前言

自从vue3.0上线以来，大家都在纷纷转战vue3.0,我也紧跟时代步伐，自己开发demo学习了vue3.0,这里把自己学习过程中总结的两者的不同的地方列出来，方便自己学习。

对比学习法，先看看二者的原理分别是什么?

step 一，vue2.0的响应式原理

官网解释

step 二，vue3.0的响应式原理

官网解释：

当我们从一个组件的data函数中返回一个普通的javascript对象时，Vue会将该对象包裹在一个带有get和set处理程序的proxy中。

特别注意

proxy是一个对象，他包装了另一个对象，并允许你拦截对该对象的任何交互。

这里贴一下v-model的原理，避免混淆

v-model语法糖的原理，详情请移步vue v-model的实现原理

这里特别注意，千万不要把响应式原理与v-model的原理混淆，我之前就是混了。

step 三，总结一下两者的区别

----------- 3.0
(前两者不在像2.0的时候需要进行set才能更改。可以直接更改)
1，3.0 proxy 可以直接数组类型的数据变化
2，可以直接实现对象属性的新增和删除
3，3.0兼容ie12以上
4，组件上的v-model语法变更为v-bind.sync
5, 在同一元素上使用v-for和v-if的优先级已经更改
6，v-for上边的key用法已经更改
7，v-for的ref不在注册为数组
8,destroyed,beforeDestroy生命周期被重命名为unmounted和beforeUnmount
9,<template>被视为普通元素，而不是渲染器内部的内容

这里贴一下官网发布的重大变更

结束语

还有好多需要我们再使用过程中去总结的学习的知识