vue2和vue3区别面试题静态提升（vue3和vue2最大的区别）

科技前沿 • 2025-04-21 12:27 • 阅读 28

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <hr />

讯享网

监测机制的变化、Fragments（碎片）的更新、API模式的变更、数据的存放、生命周期钩子、父子传参等。。

监测机制的变化

Vue3中使用了ES6中Proxy API 对数据进行代理，监测整个对象，而不再是某个属性。
消除Vue2中基于Object.defineProperty的实现所存在的诸多限制。
Vue3可以监测到对象属性的添加和删除也可以监听到数组的变化。
Vue3中支持Map、Set、WeakMap和WeakSet

Fragments（碎片）

Vue2在组件中只能有一个根节点。
Vue3在组件中可以拥有多个根节点。

API模式的变化

Vue2使用选项式API（Options API）。Vue3使用组合式API（Composition API）

数据的存放

Vue2中数据存放在data属性中
Vue3使用setup()方法，setup()方法在组件初始化构造的时候触发。
- 从vue引入ref或reactive
- 简单数据类型使用ref()方法进行处理，复杂数据类型使用reactive()方法进行处理。
- 使用setup()方法来返回响应式数据，在template可以获取这些响应式数据。

生命周期钩子

setup()：开始创建组件之前，在beforeCreate和created之前执行。
onBeforeMount()：组件挂载到节点之前执行。
onMounted()：组件挂载完成之后执行。
onBeforeUpdate()：组件更新之前执行。
onUpdated()：组件更新之后执行。
onBeforeUnmount()：组件卸载之前执行。
onUnmounted()：组件卸载之后执行
- 若组件被keep-alive包裹，则多出两个钩子函数
```
讯享网<ul><li>onActivated()&#xff1a;被激活时执行。</li><li>onDeactivated()&#xff1a;A组件切换到B组件。A组件消失时执行。</li></ul> </li></ul> </li></ul> 
```
  父子传参
  - 子组件通过defineProps()进行接收，并且接收这个函数的返回值进行相应操作。
  diff算法
  - Vue2：进行虚拟节点对比，并返回一个patch对象来存储两个节点的不同，最后用patch记录的消息去局部更新Dom。它会比较每一个Vnode但对一些不参与更新的元素，进行比较会消耗性能。
  - Vue3：diff算法在初始化时会给每个虚拟节点一个patchFlags（优化的一个标识）。只会比较patchFlags发生变化的Vnode，从而进行视图更新，对比没有变化的做静态标记，渲染时直接复用。
  v-if和v-for优先级
  - Vue2中：v-for优先执行
  - Vue3中：v-if优先执行
  - 注：最好不要把v-if和v-for同时用在一个元素上，这样会带来性能的浪费
  最后
  
  四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer，也刷了些在牛客网上的面经。大概就说这些了，写代码去了
  
  祝大家都能收获大厂offer
  
  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
  
  讯享网
  
  篇幅有限，仅展示部分内容