API对数据代理。

相比vue2.x#xff0c;使用proxy的优势如…1、数据绑定原理不同

vue2vue2的数据绑定是利用ES5的一个APIObject.definePropert()

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

vue3vue3支持碎片Fragments就是说可以拥有多个根节点。

3、API类型不同

vue2vue2使用选项类型api选项型api在代码里分割了不同的属性data,computed,methods等。

vue3vue3使用组合式api新的合成型api能让我们使用方法来分割相比于旧的api使用属性来分组这样代码会更加简便和整洁。

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

vue2vue2是把数据放入data中在vue2中定义数据变量是data(){}创建的方法要在methods:{}中。

vue3vue3就需要使用一个新的setup()方法此方法在组件初始化构造的时候触发。

使用以下三个步骤来建立反应性数据

从vue引入reactive

使用setup()方法来返回我们的响应性数据从而template可以获取这些响应性数据。

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

生命周期在调用前需要先进行引入。

除了这些钩子函数外vue3.x还增加了onRenderTracked

6、父子传参不同

Events。

在vue2中会调用this$emit然后传入事件名和对象。

vue3父传子用props,子传父用事件

Events。

在vue3中的setup()中的第二个参数content对象中就有emit那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。

7、指令与插槽不同

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

vue3vue3中必须使用v-slot的形式vue3中v-for与v-if,只会把当前v-if当做v-for中的一个判断语句不会相互冲突vue3中移除keyCode作为v-on的修饰符当然也不支持config.keyCodesvue3中移除v-on.native修饰符vue3中移除过滤器filter。

8、main.js文件不同

vue2vue2中我们可以使用pototype(原型)的形式去进行操作引入的是构造函数。

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