首页 > 其他 > 详细

VUE3响应式

时间:2020-11-04 14:15:52      阅读:25      评论:0      收藏:0      [点我收藏+]

1.vue2的响应式

3和2的响应式原理不同,既然3修改了实现响应式的方法,那2的响应式的肯定是有缺陷的。所以需要先了解一下2的响应式:

Vue2官方网站对响应式的解释

主要的思想在于:

  • 2的响应式主要实现由Object.defineProperty实现,当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 property,并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。

  • Vue无法检测property的添加或者移除。(可以使用Vue.set()方法添加响应式property)

  • Vue只能通过监测数组API的执行来实现响应式

2.vue3的响应式

3的响应式通过Proxy实现。具体的解释可以见官网。这里给一个简单的实例:

vue2的get/set方法

Object.defineProperty(data,‘count‘,{
  get(){},
  set(){},
})

vue3的Proxy:

new Proxy(data,{
  get(key){},
  set(key,value){}
})

 待补充

VUE3响应式

原文:https://www.cnblogs.com/codexlx/p/13925006.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!