Vue2与 Vue3的区别

一、  生命周期钩子函数不同

整体上变化不大，只是大部分生命周期钩子名称前 + “on”，功能上是类似的。

1、vue3中新引入了setup生命周期，setup 是围绕 beforeCreate 和 created 生命周期钩子运行的。

2、destroyed 生命周期选项被重命名为 onUnmounted

3、beforeDestroy 生命周期选项被重命名为 onBeforeUnmount

4、新增加了onRenderTracked和onRenderTriggered

5、vue3 的生命周期在调用前需要先进行引入，并将它们包在 setup 方法中：

 

二、  定义数据变量和方法不同

Vue2：定义数据变量是data(){}，创建的方法要在methods:{}中。

Vue3：定义数据和方法在setup()方法里面，return一个对象。

三、  双向数据绑定原理不同

        vue2： 使用Object.defineProperty劫持数据，使用发布订阅模式实现数据绑定。只能监听某个属性，不能对全对象监听。

        vue3： 使用ProxyAPI对数据代理，通过 reactive() 函数来创建响应式对象，给每⼀个对象都包⼀层 Proxy，通过 Proxy 监听属性的变化。

    相比于vue2.x，使用proxy的优势如下：

        1、defineProperty只能监听某个属性，不能对全对象监听

        2、可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）

        3、可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化
 

四、是否支持碎片

       Vue2：不支持碎片。vue2 在模板中如果使用多个根节点时会报错。

       Vue3：支持碎片，即支持多个根节点。
 

五、API类型不同

Vue2：使用选项类型API，选项型API在代码里分割了不同的属性：data，computed，methods等。

Vue3：提供了两个语法，一个是选项式API，另外新增了组合式API。使用组合式API，将同一个功能的代码集中起来处理，相比于传统的选项式 API，组合式 API 使代码会更加简便整洁、可读性强。
 

六、父子传参不同

Vue2： 父传子：子组件通过prop接收；子传父：子组件中通过$emit向父组件触发一个监听方法，传递一个参数。

Vue3:  使用setup接收两个参数 setup(props, context){ }：

① 第一个参数是props，即父组件向子组件传递的props的值；

② 第二个值为content代表了当前的上下文对象（包含attrs、slots、emit），对象中取出emit可以给事件推送数据，context.emit("xxx", val)。

 

注意事项：

1、setup函数中不能使用this。Vue 为了避免我们错误的使用，直接将 setup函数中的this修改成了 undefined）

2、setup 函数中的 props 是响应式的，当传入新的 props时，它将被更新。但是，因为 props 是响应式的，不能使用 ES6 解构，因为它会消除 props的响应性。

如果需要解构 props，可以通过使用 setup 函数中的toRefs 来完成此操作：

3、 setup()内使用响应式数据时，需要通过.value获取

4、从 setup() 中返回的对象上的 property 返回并可以在模板中被访问时，它将自动展开为内部值。不需要在模板中追加 .value

5、setup函数只能是同步的不能是异步的
 

七、main.js文件不同

Vue2：使用prototype（原型）的形式进行操作，引入的是构造函数。

Vue3： 需要使用结构的形式进行操作，引入的是工厂函数；vue3中app组件中可以没用根标签。

八、指令与插槽不同

Vue2：使用slot可以直接使用slot；v-for与v-if在vue2中优先级高的是v-for指令，而且不建议一起使用。

Vue3：不允许直接使用slot，正确格式为 v-slot；v-for与v-if只会把当前v-if当做v-for中的一个判断语句，不会相互冲突；移除了v-on.native修饰符；移除过滤器filter；

具名插槽使用方式不同：Vue2使用slot=''，vue3使用v-slot:''

作用域插槽使用方式不同：Vue2中在父组件中使用slot-scope="data"从子组件获取数据，Vue3中在父组件中使用 #data 或者 #default="{data}"获取。