vue2.0和3.0的响应式原理以及区别

前言

---

自从vue3.0正式上线以来，好多小伙伴都转战vue3.0了，这里把我自己总结的3.0和2.0的原理以及他俩的区别写出来，方便自己学习。

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

官网的解释：

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

官网的解释：

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

特别注意

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

这也就是vue3.0可以直接对对象属性进行删除和修改的原因

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>被视为普通元素，而不是渲染器内部的内容

---

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

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

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

结束语

我也还在不断学习中，有不足的以后会慢慢更新。