2020 web前端面试题及答案大全 (8)

jq优点: 比原生js更易书写, 封装了很多api, 有丰富的插件库; 缺点: 每次升级与之前版本不兼容, 只能手动开发, 操作DOM很慢, 不方便, 变量名污染, 作用域混淆等。

vue优缺点: 双向绑定, 虚拟DOM, diff算法, MVVM, 组件化, 通信方便, 路由分发等

17. vue解除双向绑定

 

let obj = JSON.parse(JSON.stringify(this.temp1));

18. vue异步组件

为了简化,Vue 允许你以一个工厂函数的方式定义你的组件,这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数,且会把结果缓存起来供未来重渲染

Vue.component( \'async-webpack-example\', // 这个 `import` 函数会返回一个 `Promise` 对象。 () => import(\'./my-async-component\'))

19. MVC与MVVM

model-数据层 view-视图层 controller-控制层

MVC的目的是实现M和V的分离,单向通信,必须通过C来承上启下

MVVM中通过VM(vue中的实例化对象)的发布者-订阅者模式实现双向绑定,数据绑定,dom事件监听

区别:MVC和MVVM的区别并不是VM完全取代了C,ViewModel存在目的在于抽离Controller中展示的业务逻辑,而不是替代Controller,其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用

20. vue渐进式

小到可以只使用核心功能,比如单文件组件作为一部分嵌入;大到使用整个工程,vue init webpack my-project来构建项目;VUE的核心库及其生态系统也可以满足你的各式需求(core+vuex+vue-route)

react相关

1. 新旧生命周期

旧: will, did; mount, update...

新: 16版本之后:

getDerivedStateFromProps: 虚拟dom之后,实际dom挂载之前, 每次获取新的props或state之后, 返回新的state, 配合didUpdate可以替代willReceiveProps

getSnapshotBeforeUpdate: update发生的时候,组件更新前触发, 在render之后,在组件dom渲染之前;返回一个值,作为componentDidUpdate的第三个参数;配合componentDidUpdate, 可以覆盖componentWillUpdate的所有用法

componentDidCatch: 错误处理

对比: 弃用了三个will, 新增两个get来代替will, 不能混用, 17版本会彻底删除. 新增错误处理

2. react核心

虚拟DOM, Diff算法, 遍历key值

react-dom: 提供了针对DOM的方法,比如:把创建的虚拟DOM,渲染到页面上 或 配合ref来操作DOM

react-router

3. fiber核心(react 16)

旧: 浏览器渲染引擎单线程, 计算DOM树时锁住整个线程, 所有行为同步发生, 有效率问题, 期间react会一直占用浏览器主线程,如果组件层级比较深,相应的堆栈也会很深,长时间占用浏览器主线程, 任何其他的操作(包括用户的点击,鼠标移动等操作)都无法执行。

新: 重写底层算法逻辑, 引入fiber时间片, 异步渲染, react会在渲染一部分树后检查是否有更高优先级的任务需要处理(如用户操作或绘图), 处理完后再继续渲染, 并可以更新优先级, 以此管理渲染任务. 加入fiber的react将组件更新分为两个时期(phase 1 && phase 2),render前的生命周期为phase1,render后的生命周期为phase2, 1可以打断, 2不能打断一次性更新. 三个will生命周期可能会重复执行, 尽量避免使用。

4. 渲染一个react

分为首次渲染和更新渲染

生命周期, 建立虚拟DOM, 进行diff算法

对比新旧DOM, 节点对比, 将算法复杂度从O(n^3)降低到O(n)

key值优化, 避免用index作为key值, 兄弟节点中唯一就行

5. 高阶组件

高阶组件就是一个函数,且该函数(wrapper)接受一个组件作为参数,并返回一个新的组件。
高阶组件并不关心数据使用的方式和原因,而被包裹的组件也不关心数据来自何处.

react-dnd: 根组件, source, target等
export default DragSource(type, spec, collect)(MyComponent)

重构代码库使用HOC提升开发效率

6. hook(v16.7测试)

在无状态组件(如函数式组件)中也能操作state以及其他react特性, 通过useState

7. redux和vuex以及dva:

redux: 通过store存储,通过action唯一更改,reducer描述如何更改。dispatch一个action

dva: 基于redux,结合redux-saga等中间件进行封装

vuex:类似dva,集成化。action异步,mutation非异步

8. react和vue的区别

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwwfxg.html