vue2和vue3的主要区别#记录

一、 vue2和vue3的区别

1、vue2和vue3双向数据绑定原理发生了改变

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

vue3 中使用了 es6 的 ProxyAPI 对数据代理。

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

1. defineProperty只能监听某个属性，不能对全对象监听
2. 可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
3. 可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化

 二、Vue3支持碎片(Fragments)，也就是说在组件可以拥有多个根节点

//vue2
<template>
    <div>
        111
        <div>222</div>
    </div>
</template>

//vue3
<template>
    <div>111</div>
    <div>222</div>
</template>

三、Composition API

Vue2与Vue3 最大的区别 — Vue2使用选项类型API（Options API）对比Vue3合成型API（Composition API）

四、生命周期钩子 — Lifecyle Hooks

 五、父子传参不同，setup() 函数特性

总结：

1、setup 函数时，它将接受两个参数：（props、context(包含attrs、slots、emit)

2、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之前的函数

3、执行 setup 时，组件实例尚未被创建

4、与模板一起使用：需要返回一个对象 (在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用)（setup语法糖除外）

5、使用渲染函数：可以返回一个渲染函数，该函数可以直接使用在同一作用域中声明的响应式状态

注意事项：

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

2、setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。但是，因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。（如果需要解构 prop，可以通过使用 setup 函数中的toRefs 来完成此操作）