Vue响应式原理
先说几个概念:
-
1.响应式reactive:当你修改数据时,视图会进行更新
-
2.劫持:使用Object.defineProperty对data选项进行遍历并添加getter/setter钩子
-
3.依赖收集:当第一次touch时,把当前声明式变量的更新方法watcher添加到dep依赖数组中
-
4.Watcher:(与声明式变量对应的dom更新方法)
-
5.re-render(当声明式变量被set时,Vue通知Watcher更新DOM,即重新渲染)
-
6.面试题:说一下Vue的响应式原理?
当vue组件被创建时,在生命周期的第一阶段,Vue使用Object.defineProperty()对data选项进行遍历劫持并添加get/set钩子;在生命周期第二阶段,指令第一次与声明式变量touch时,发生依赖收集,再调用当前组件的watcher第一次更新DOM,DOM视图就显示出来了。当声明式变量发生变化时,vue再次通知Watcher更新视图,这就是响应式(原理)。