2022web前端常见面试题 - 框架篇（Vue与React）

Vue-router 有两种模式：Hash 模式和 History 模式。

• Hash 模式：

  URL 路径会出现 # 字符。

  Hash 值不包括在 HTTP 请求中，改变 Hash 值不会刷新页面，也不会向服务器发送请求。

  Hash 值的改变会触发 hashchange 事件。

• History 模式：

  整个地址重新加载，可以保存历史记录，方便前进后退。

  使用 HTML5 API（旧浏览器不支持）和 HTTP 服务端配置，没有后台配置的话，页面刷新时会出现 404。

当组件的 data 是一个函数时，每一个实例的 data 属性都是独立的，不会相互影响。这是因为 Vue 在创建组件实例时，会调用 data 函数来返回一个新的数据对象，确保每个实例都有自己的数据副本。

• watch 擅长处理的场景：

  一个数据影响多个数据。

  对象内用深监听（deep: true）。

• computed 擅长处理的场景：

  一个数据受多个数据影响。

具体区别如下：

• computed 支持缓存，只有依赖数据发生改变时，才会重新进行计算；而 watch 不支持缓存，数据变直接会触发相应的操作。
• computed 不支持异步操作，当 computed 内有异步操作时无效，无法监听数据的变化；而 watch 支持异步。
• computed 属性值会默认走缓存，基于它们的响应式依赖进行缓存；而 watch 监听的函数接收两个参数，最新的值和输入之前的值。
• 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性（多对一或一对一），一般用 computed；而一个属性发生变化时，需要执行对应的操作（一对多），一般用 watch。
• computed 属性值如果是函数，默认会走 get 方法，函数的返回值就是属性的属性值；在 computed 中，属性都有 get 和 set 方法，当数据变化时，调用 set 方法。而 watch 监听的数据必须是 data 中声明过或者父组件传递过来的 props 中的数据，当数据变化时，触发其他操作。

• 手段：

  v-if 是通过控制 DOM 节点的存在与否来控制元素的显隐。

  v-show 是通过设置 DOM 元素的 display 样式（block 为显示，none 为隐藏）来控制元素的显隐。

• 编译过程：

  v-if 切换有一个局部编译/卸载的过程，切换过程中会销毁和重建内部的事件监听和子组件。

  v-show 只是简单的基于 CSS 切换。

• 编译条件：

  v-if 是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存，然后再切换时进行局部卸载）。

  v-show 在任何条件下（首次条件是否为真）都被编译，然后被缓存，DOM 元素保留。

• 性能消耗：

  v-if 有更高的切换消耗。

  v-show 有更高的初始渲染消耗。

• 主要作用：用来提高渲染性能。
• 避免数据混乱：如果元素中包含了有临时数据的元素，如果不用 key 就会产生数据混乱。

• 父子组件通信：

  props

  自定义事件

• 发布订阅
• Vuex

v-model 实现双向数据绑定，即当数据发生变化时，视图也发生变化；当视图发生变化时，数据也会同步变化。Vue 实现双向数据绑定主要采用数据劫持结合“发布-订阅”模式的方式，通过 Object.defineProperty() 的 set 和 get，在数据变动时发布消息给订阅者触发监听。

• create 和 mounted

  beforecreated：el 和 data 并未初始化。

  created：完成了 data 数据的初始化，el 没有。

  beforeMount：完成了 el 和 data 初始化。

  mounted：完成挂载。

• update

  当数据更新时，会触发 update 的操作。

• destroy

  销毁完成后，Vue 不再对后续动作进行响应。原先生成的 DOM 元素还存在，但不再受 Vue 控制。

Vue 实现双向数据绑定主要采用数据劫持结合“发布-订阅”模式的方式，通过 Object.defineProperty() 的 set 和 get，在数据变动时发布消息给订阅者触发监听。

• Vue2 响应式弊端：响应式数据类型为对象时，只能做数据的增、删、查和改，但对于增加和删除操作，页面不会做出响应式更新。
• Vue3 与 Vue2 区别：Vue3 采用的是代理 Proxy 和反射 Reflect。

Vue 中的 Diff 算法主要比较同级的节点，若找不到与新节点类型相同的节点，则插入一个新节点；若有相同类型的节点，则进行节点属性的更新；最后删除新节点列表中不包含的旧节点。

• 组件将要挂载时：componentWillMount（已废弃，建议使用 constructor 或 static getDerivedStateFromProps）
• 组件挂载完成时：componentDidMount
• 是否要更新数据时：shouldComponentUpdate
• 将要更新数据时：componentWillUpdate（已废弃，建议使用 getSnapshotBeforeUpdate）
• 数据更新完成时：componentDidUpdate
• 组件将要销毁时：componentWillUnmount
• 父组件中改变了 props 传值时：componentWillReceiveProps（已废弃，建议使用 static getDerivedStateFromProps 或 getSnapshotBeforeUpdate）

key 的主要作用是用来提高渲染性能，避免数据混乱的情况出现。如果元素中包含了有临时数据的元素，如果不用 key 就会产生数据混乱。

Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码“钩”进来。React 提供了以下常用的钩子：

• useState()
• useContext()
• useReducer()
• useEffect()

在 React 中，可以通过 shouldComponentUpdate 函数来阻止组件的重复更新。该函数在重渲染时 render() 函数调用前被调用，接收 nextProps 和 nextState 两个参数，分别表示下一个 props 和 state 的值。当函数返回 false 时，阻止接下来的 render() 函数的调用，从而阻止组件重渲染；返回 true 时，组件照常渲染。

Redux 是将整个应用状态存储到一个地方，称为 store，里面保存着一个状态树（store tree）。组件可以派发（dispatch）行为（action）给 store，而不是直接通知其他组件。组件内部通过订阅 store 中的状态（state）来刷新自己的视图。