vue3 响应式,Vue的响应式原理

　　本文主要介绍vue2.0/3.0响应性的原理和区别的相关信息。通过图文非常详细的介绍，对大家的学习或者工作都有一定的参考价值。和有需要的朋友一起学习吧。

前言

　　自从vue3.0正式推出后，很多朋友都转战vue3.0，这里我就把3.0和2.0的原理以及两者的区别写出来，方便自己学习。

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

　　先看官网的解释：

　　当你将一个普通的JavaScript对象传递给Vue实例的data选项时，Vue会遍历这个对象的所有属性，并使用Object.defineProperty将所有这些属性转换成getter/setter。Object.defineProperty是ES5中无法填补的特性，这也是Vue不支持IE8及更早版本浏览器的原因。

　　这些getter/setter对用户来说是不可见的，但是在内部，它们让Vue跟踪依赖关系，并在属性被访问和修改时通知变化。这里需要注意的问题是，浏览器控制台打印数据对象时getter/setter的格式是不一样的，所以你可能需要安装vue-devtools来获得更友好的界面进行检查。

　　每个组件实例都有一个对应的watcher实例对象，该对象在组件渲染过程中将属性记录为依赖关系。然后，当依赖项的setter被调用时，它将通知watcher重新计算，以便更新其关联的组件。

　　这里说一下自己的理解

　　其实看过api和源代码的人很容易知道，v-model和responsive principle是分两层的。

　　第一层，底层，是es5的一个特性。Object.defineProperty通过getter、setter更新数据。

　　第二层是表示层。看过v-model原理的人都知道，v-model里面有一个守望者。v-on watcher，v-onwatcher数据更改，以及v-on对视图的更新。

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

　　先看官网的解释：

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

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

　　- 3.0

　　(前两个不像2.0，需要设置后才能更改。可以直接改)

　　1、3.0代理可以直接数组数据修改。

　　2.您可以直接添加和删除对象属性。

　　3、3.0兼容ie12或以上

　　4.组件上的v-model语法更改为V-bind.sync。

　　5.在同一元素上使用v-for和v-if的优先级已更改

　　6.v-for上的键的用法已更改。

　　7，v-for的ref不再注册为数组。

　　8，8，destroyed，beforeDestroy生命周期被重命名为Unmount和beforeUnmount。

　　9、模板被视为普通元素，而不是渲染器内部的内容。

　　在这里发布官方网站发布的主要变化。

总结

　　关于vue2.0/3.0的响应式原理和区别的文章到此为止。更多关于vue2.0/3.0的响应式原理，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。