你知道Vue响应式数据原理吗

1. Vue2的响应式式原理主要是通过Object.defineProperty的方法里面的setter和getter方法的观察者模式来实现。也就是在组件的初始话阶段给每一个data属性都注册一个setter和getter,然后再new一个watcher对象,这个时候会立即调用组件里面的render函数去生成一个虚拟的DOM,然后再调用render的时候,就会需要用的data的属性值,此时就会触发getter函数,把当前的watcher函数注册到sub里面。当data属性发生了改变后,就会立即遍历sub里面的每个watcher对象,通知他们重新渲染组件

2. Vue3的响应式原理主要是通过Proxy(代理)+Reflect(反射)来实现的

  通过 Proxy(代理) : 拦截对data任意属性的任意(13种)操作, 包括属性值的增删改查

 通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作

 

posted @ 2022-11-05 10:51  LT先生  阅读(78)  评论(0)    收藏  举报