Vue2和Vue3的区别（由浅入深）

骑猪看日落 2024-02-20 10:12 30阅读 0赞

### 前言 ###

vue2和vu3之前的区别，一直以来是面试必考题目，如何回答，回答的层次决定了面试者的对于vue2，3的理解，以及对于vue3目前稳定版本发展的方向的了解，即考察使用程度，又考察了学习能力，可以说是回答即可以很简单，也可以很不简单，这里需要注意的是面试官的面试程度，需要我们层层递进，由浅入深来回答，这样可以体现出面试者的考虑全面，又能体现知识广度。简而言之，vue2升级vue3之后变得更快，更轻，协作更方便。无论对于我们开发者的体验或者用户使用方面都是升级优化，但是本质区别是什么，下面分为几个部分进行讲解。

### vue2 vs vue3 ###

<table> 
 <thead> 
  <tr> 
   <th>对比</th> 
   <th>vue2</th> 
   <th>vue3</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>脚手架</td> 
   <td>命令式</td> 
   <td>可视化创建脚?架</td> 
  </tr> 
  <tr> 
   <td>组件通信</td> 
   <td>见下文</td> 
   <td>见下文</td> 
  </tr> 
  <tr> 
   <td>数据监听</td> 
   <td>watch,computed</td> 
   <td>watch,watchEffect,computed</td> 
  </tr> 
  <tr> 
   <td>双向绑定</td> 
   <td>Object.defineProperty</td> 
   <td>ProxyAPI</td> 
  </tr> 
  <tr> 
   <td>生命周期</td> 
   <td>见下文</td> 
   <td>见下文</td> 
  </tr> 
  <tr> 
   <td>api</td> 
   <td>选项式</td> 
   <td>组合式</td> 
  </tr> 
 </tbody> 
</table>

### 双向绑定更新 ###

**vue2** 的双向数据绑定是利用ES5 的一个 API ，Object.defineProperty()对数据进行劫持 结合 发布订阅模式的方式来实现的。

**vue3** 中使用了 ES6 的 ProxyAPI 对数据代理，通过 reactive() 函数给每一个对象都包一层 Proxy，通过 Proxy 监听属性的变化，从而实现对数据的监控。

> 这里是相比于vue2版本，使用proxy的优势如下
> 
> 1.**defineProperty只能监听某个属性**，不能对全对象监听 可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
> 
> 2.**可以监听数组，不用再去单独的对数组做特异性操作**,通过Proxy可以直接拦截所有对象类型数据的操作，完美支持对数组的监听。

### 实例化 ###

Vue2.x中new出的实例对象，所有的东西都在这个vue对象上，这样其实无论你用到还是没用到，都会跑一遍，这样不仅提高了性能消耗，也无疑增加了用户加载时间。

而vue3.0中可以用ES module imports按需引入，如：keep-alive内置组件、v-model指令，等等，不仅我们开发起来更加的便捷，减少 了内存消耗，也同时减少了用户加载时间，优化用户体验。

### 生命周期 ###

引用掘金图片如下：

![e8256adeaa1d4ab79df2cea118b8b38e.png][]

### 获取props ###

vue2在script代码块可以直接获取props，vue3通过setup指令传递

vue2：console.log(‘props’,this.xxx)
    vue3：setup(props,context){
         console.log(‘props’,props) }

### 数据和方法的定义 ###

Vue2使用的是选项类型API（Options API），Vue3使用的是合成型API（Composition API）

Vue2：

data() {
         return {
        }; }, methods:{
         }

Vue3：

数据和方法都定义在setup中，并统一进行return\{\}

### 给父组件传值emit ###

vue2：this.$emit()vue3：setup(props,context){context.emit()}

### watchEffect ###

Vue3中除了watch，还引入了副作用监听函数watchEffect，用过之后我发现它和React中的useEffect很像，只不过watchEffect不需要传入依赖项。

那么什么是watchEffect呢？

watchEffect它会立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。

computed和watch所依赖的数据必须是响应式的。Vue3引入了watchEffect,watchEffect 相当于将 watch 的依赖源和回调函数合并，当任何你有用到的响应式依赖更新时，该回调函数便会重新执行。不同于 watch的是watchEffect的回调函数会被立即执行，即（\{ immediate: true \}）。

### 组件通信 ###

![0244e04dc98042a88b8947ed634dd910.png][]

#### 注意 ####

props中数据流是单项的，即子组件不可改变父组件传来的值

在组合式API中，如果想在子组件中用其它变量接收props的值时需要使用toRef将props中的属性转为响应式。

##### attrs和listeners #####

子组件使用$attrs可以获得父组件除了props传递的属性和特性绑定属性 (class和 style)之外的所有属性。

子组件使用$listeners可以获得父组件(不含.native修饰器的)所有v-on事件监听器，在Vue3中已经不再使用；但是Vue3中的attrs不仅可以获得父组件传来的属性也可以获得父组件v-on事件监听器

### 路由 ###

vue3和vue2路由常用功能只是写法上有些区别：

`vue3的beforeRouteEnter`作为路由守卫的示例是因为它在`setup`语法糖中是无法使用的；大家都知道`setup`中组件实例已经创建，是能够获取到组件实例的。而`beforeRouteEnter`是再进入路由前触发的，此时组件还未创建，所以是无法用在`setup`中的；如果想在setup语法糖中使用则需要再写一个`script` 如下：

vue3路由写法：

vue2写法：

### 总结 ###

vue2和vue3比较还是有很多不一样的地方，比如setup语法糖的形式最为便捷而且更符合开发者习惯，未来vue3将会大面积使用这种规则，这样更加符合开发习惯和降低后续维护的成本，还有目前Vue3已经成为了Vue的默认版本，后续维护应该也会以Vue3为主。希望各位同学赶紧学起来吧～

####  ####

###  ###

[e8256adeaa1d4ab79df2cea118b8b38e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/cb78b0b09aa04abebac88c9a64aa6c15.png
[0244e04dc98042a88b8947ed634dd910.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/2a5746f017e24409be6e8f08c36560b9.png