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

2023-07-10,,

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(反射): 动态对被代理对象的相应属性进行特定的操作

你知道Vue响应式数据原理吗的相关教程结束。

《你知道Vue响应式数据原理吗.doc》

下载本文的Word格式文档,以方便收藏与打印。