- vue对象观察模块源码学习(上)
- 本文源码基于2.6.11版本 尝试着从源码角度来学习,这是我个人的一些理解发出来与大家沟通讨论
- 入口
/vue/src/core/instace/index.js
首先,vue在初始化的时候,在beforeCreated和created之间按顺序进行初始化响应式数据,包括props,methods,data,computed,watch,在初始化的过程中呢会做出许多的判断,包括当前的环境是否为生产环境等等,具体可以详细查看源码。
- 初始化
/vue/src/core/observer/index.js
在初始化这些数据的过程中会调用observer函数来绑定数据劫持。
在这个方法里面,首先会判断是否已经有了__ob__属性并且ob属性是observer对象实例如果有了就直接返回,不然就new一个observer实例,并将实例返回。
- 数据劫持
在new实例的时候会先定义一个不可枚举的ob属性用以之后判断该对象是否已经进行数据劫持。
然后会对对象类型进行一个判断,是否为数组,数组的话则进行遍历数组的内容调用observer函数进行处理。
如果是对象则遍历每一个属性调用defineReactive方法将属性变成响应式属性。
在defineReactive方法中,先会new一个Dep类的实例以备后用,然后会进行判断是否已经有get和set方法,如果有get或者没有set方法,并且参数只传递了对象和键值的时候就通过对象获取,然后对val使用observer方法进行迭代判断。
在做完这些之后就会正式调用Object.defineProperty方法进行数据劫持,修改属性的get和set方法。