Vue.js响应式原理

主要由三部分组成Observer Compiler Watcher

Observer监听数据变化,使得当数据变化时,我们有能力去执行一些操作

Compiler解析模板,将数据结合模板渲染到页面上

Watcher将两者结合起来,当挂载组件或初始化计算属性时,都会去实例化Watcher,将target传递给Observer,执行数据的getter方法,getter方法中取到target并收集到Dep中,这样就完成了依赖收集;当数据发生变化时,会调用dep.notify方法,通知所有的监听者Watcher,Watcher再调用参数中的回调函数update,更新视图