observe工厂函数

在之前的源码initdata函数中最后一句

observe(data, true /* asRootData */)复制代码

调用了observe函数观察数据

export function observe (value: any, asRootData: ?boolean): Observer | void { if (!isObject(value) || value instanceof VNode) { return //判断是否是一个对象或者VNode
}let ob: Observer | void  //定义变量ob 保存observe实例
if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) { ob = value.__ob__ //检测目标对象是否含有_ob_，并且 __ob__ 属性应该是Observer的实例            作用是为了避免重复观察同一个数据对象} else if (//对数据对象进行观测
shouldObserve &&    !isServerRendering() &&   (Array.isArray(value) || isPlainObject(value)) &&   Object.isExtensible(value) &&    !value._isVue  ) {  ob = new Observer(value) } if (asRootData && ob) {  ob.vmCount++  }  return ob
}复制代码

看下else..if..第一个条件shouldObserve 必须为true

export let shouldObserve: boolean = true //初始化默认设置为true
export function toggleObserving (value: boolean) {// 接收一个布尔值 改变true false  shouldObserve = value}复制代码

第二个条件!isServerRendering() 必须ture

let _isServer //定义一个变量
export const isServerRendering = () => {if (_isServer === undefined) {/* istanbul ignore if */
if (!inBrowser && !inWeex && typeof global !== 'undefined') { // detect presence of vue-server-renderer and avoid     // Webpack shimming the process
_isServer = global['process'] && global['process'].env.VUE_ENV === 'server'  } else { _isServer = false
}
}  return _isServer}复制代码

这个函数作用是为了判断是否为服务端渲染

第三个条件判断是否为数组和纯对象

第四个判断对象是可拓展性的...接下来就不说了 相信应该能看懂

ob = new Observer(value)复制代码

最后创建一个observer实例

observe构造函数

export class Observer
{
value: any;
dep: Dep; vmCount: number; // number of vms that have this object as root $dataconstructor (value: any) {this.value = value //属性引用了数据对象   this.dep = new Dep() //保存了一个新创建的 Dep 实例对象    this.vmCount = 0 //实例属性设置为0    def(value, '__ob__', this) //为数据对象定义了一个 __ob__ 属性，这个属性的值就是当前 Observer 实例对象，其中 def 函数其实就是 Object.defineProperty 函数的简单封装，
之所以这里使用 def 函数定义 __ob__ 属性是因为这样可以定义不可枚举的属性，
这样后面遍历数据对象的时候就能够防止遍历到 __ob__ 属性
if (Array.isArray(value)) {
//判断是否为数组
if (hasProto) {protoAugment(value, arrayMethods)
} else {copyAugment(value, arrayMethods, arrayKeys)
}      this.observeArray(value)
} else {
//纯对象的情况      this.walk(value)
}
}/**   * Walk through all properties and convert them into  * getter/setters. This method should only be called when   * value type is Object.   */ walk (obj: Object) {const keys = Object.keys(obj)
for (let i = 0; i < keys.length; i++) { defineReactive(obj, keys[i])
}
}/**   * Observe a list of Array items.   */
observeArray (items: Array<any>) {for (let i = 0, l = items.length; i < l; i++) {observe(items[i])
}
}
}
复制代码

walk 实例对象方法遍历了变量获得了可枚举的属性，

每个属性调用了defineReactive函数：

export function defineReactive ( obj: Object,key: string,val: any,  customSetter?: ?Function,  shallow?: boolean) {const dep = new Dep() //定义一个dep常量接收Dep实例对象
//getOwnPropertyDescriptor方法返回指定对象上一个自有属性对应的属性描述const property = Object.getOwnPropertyDescriptor(obj, key)
if (property && property.configurable === false) {return //判断是否可配置
}// cater for pre-defined getter/setters
const getter = property && property.get
//保存 property 对象的 get 和 set函数
const setter = property && property.set
if ((!getter || setter) && arguments.length === 2) {val = obj[key]//当只传递两个参数时，说明没有传递第三个参数 val，
那么此时需要根据 key 主动去对象上获取相应的值，即执行 if 语句块内的代码：val = obj[key]
}let childOb = !shallow && observe(val)
Object.defineProperty(obj, key, {
//函数重新定义属性的 setter/getter，这会导致属性原有的 set 和 get 方法被覆盖，
所以要将属性原有的 setter/getter 缓存，并在重新定义的 set 和 get 方法中调用缓存的函数，
从而做到不影响属性的原有读写操作。
enumerable: true,
configurable: true,
get: function reactiveGetter () {const value = getter ? getter.call(obj) : val
//判断是否存在getter？直接调用该函数：使用val
if (Dep.target) {
//Dep.target 中保存的值就是要被收集的依赖(观察者)dep.depend()
//行 dep 对象的 depend 方法将依赖收集到 dep中
if (childOb) {
//大概意思是收集的依赖的触发时机是在使用 $set 或 Vue.set 给数据对象添加新属性时触发
childOb.dep.depend()
if (Array.isArray(value)) {//对数组依赖收集的处理
dependArray(value)
}
}
}return value
},
set: function reactiveSetter (newVal) {const value = getter ? getter.call(obj) : val //如上一样     /* eslint-disable no-self-compare */
if (newVal === value || (newVal !== newVal && value !== value)) { return //新旧值判断处理 后面判断应该是为了处理NaN
}      /* eslint-enable no-self-compare */     if (process.env.NODE_ENV !== 'production' && customSetter) { customSetter()//环境判断和customSetter函数判断（作用：用来打印辅助属性）
}     // #7981: for accessor properties without setter     if (getter && !setter) return     if (setter) {//正确设置属性值        setter.call(obj, newVal)
} else { val = newVal
}     childOb = !shallow && observe(newVal)     dep.notify()//深度观测 依赖收集
}
})
}复制代码

defineReactive 函数的核心就是 将数据对象的数据属性转换为访问器属性，即为数据对象的属性设置一对 getter/setter，但其中做了很多处理边界条件的工作defineReactive 接收五个参数，但是在 walk 方法中调用 defineReactive 函数时只传递了前两个参数，即数据对象和属性的键名