理解
- 核心点: Object.defineProperty
- 默认 Vue 在初始化数据时,会给 data 中的属性使用 Object.defineProperty 重新定义所有属性,当页面取到对应属性时。会进行依赖收集(收集当前组件的watcher) 如果属性发生变化会通知相关依赖进行更新操作。
过程
- initData: 初始化用户传入的data中的数据
- new Obsever:将数据进行观测
- this.walk(value):进行对象的处理
- defineReactive:循环对象属性定义响应式变化
- Object.defineProperty:重新定义数据
如何检测数组的变化
- 使用函数劫持的方式,重写了数组的方法
- Vue 将 data 中的数组,进行了原型链重写。指向了自己定义的数组原型方法,这样当调用数组api 时,可以通知依赖更新.如果数组中包含着引用类型。会对数组中的引用类型再次进行监控。
过程
- initData: 初始化用户传入的data中的数据
- new Obsever:将数据进行观测
- protoAugment(value,arrayMethods): 将数组的原型方法指向重写的数据原型(push、unshit、pop等6种)
- observeArray:深度观测数据中的每一项(对象类型),非对象不观测