vue2响应式原理
对象的变化侦测:
defineProperty 循环递归为data中的数据进行设置访问器属性;并在getter中收集(设置)依赖,set中触发依赖
源码关键方法:observe walk Observer defineReative 闭包 Dep def
数组的变化侦测:
getter中收集依赖,在拦截器中触发依赖;
拦截器——就是在数组方法push pop shift unshift sort splice reverse中,先取出源方法,当调用这些方法时,先触发依赖,再去使用源方法执行该功能;
既然是vue的拦截方法,就不能污染到数组的原型上;那么如何将需要侦测的数组改变原型方法呢?
1、var arrayProto = Array.prototype; // 获取原始原型
2、var arrayMethods = Object.create(arrayProto) // Object.create() 方法用于创建一个新对象,使用现有的对象来作为新创建对象的原型(prototype)
3、使用 Object.defineProperty (arrayMethods, 方法名,mutator) // 进行拦截
4、赋值原型 target.proto = arrayMethods ; // 将需要侦测的数组__proto__指向修改过的新原型
数组的依赖收集和新增元素处理侦测——for循环侦测每一项,对于新增元素,先对方法获取参数(参数是新增的元素),再对其参数进行ob.observeArray来侦测新增元素的变化
依赖:Class Dep
依赖收集:dep.depend()
依赖触发:dep.notify)
依赖保存在Observer的实例上,也就是 ob;
defineProperty 'ob' 值为this (Observer实例);实例this下挂原始value和依赖Dep;
本文来自博客园,作者:Math点PI,个性签名:“不写bug怎么进步?”,转载请注明原文链接:https://www.cnblogs.com/MrZhous/p/17084948.html

浙公网安备 33010602011771号