Vue源码解读--数据响应式

数据初始化

文件路径：src/core/instance/state.js

//判断重复，调用observe
initData() 

//返回一个observer实例
observe()

observer实例方法 判断数据对象的类型，做响应的处理

文件路径：src/core/observer/index.js

如果data里面是对象就会有一个observer实例与之对应
observer实例 构造函数判断里面传入的参数是数组的话 就特别处理
拦截数组7个方法 做额外更新
如果是对象的话，遍历对象keys，执行defineReactive
defineReactive()给data中每一个key定义数据劫持

维护管理若干watcher

文件路径：src/core/observer/dep.js

Dep.target是watcher 建立和watcher实例之间的关系

watcher

文件路径：src/core/observer/watcher.js

数据响应式总体流程

1.new Vue()
2.Vue._init initMixin()实现初始化  最后会走$mount
3.$mount扩展
4.$mount 会new watcher
5.watter getter
6.updateComponent
7.render渲染函数（html模板编译成的渲染函数）尝试调用getter属性
8.拦截属性的getter