vue响应式原理(vue2/vue3)

81 阅读1分钟

vue2响应式原理

弄清楚两个问题
1.vue如何知道data对象中的数据变化了=》数据劫持
2.某个数据变化后,如何实现组件界面自动更新?收集依赖,派发更新

数据劫持:
   通过defineProtity给data中所有层级的属性添加getter和setter
     getter用于收集依赖
     setter用于监视值的变化,派发更新
     初始化时把data中所有层级的属性进行defiproperty进行数据劫持,为每一个属性都创建一个dep,用于
     收集依赖此属性的watcher
     
     读取数据的时候,会执行对应的getter方法,就进行依赖收集,将wacther添加到对应的dep对象中
     当更新data中的某个数据的时候,派发更新执行执行dep的notify方法,便利内部subs中所有的watcher去update

vue3响应式原理