Vue observable 方法

• observable 顾名思义就是“可观察的”

• 官网定义： Vue.observable 方法可以让一个对象变成响应式的，Vue 内部会用它来处理 data 函数返回的对象

• 在 Vue2 中，被传入的对象会被 Vue.observable 数据劫持，和被返回的对象是同一个对象

• 在 Vue3 中，被传入的对象会被 Vue.observable 会做一层拦截，返回一个可响应的代理代理对象

observe 方法

• 负责为每一个 Object 类型的 data 创建一个 observer 实例

// src\core\observer\index.js 
export function observe (value: any, asRootData: ?boolean): Observer | void
{

// 判断 value 是否是对象
if (!isObject(value) || value instanceof VNode) {
    return
}

let ob: Observer | void

// 如果 value 有 __ob__(observer对象) 属性 结束
if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    ob = value.__ob__
} else if (
    shouldObserve &&
    !isServerRendering() &&
    (Array.isArray(value) || isPlainObject(value)) &&
    Object.isExtensible(value) &&
    !value._isVue
) {
    // 创建一个 Observer 对象
    ob = new Observer(value)
}
if (asRootData && ob) {
    ob.vmCount++
}
return ob
}

Observer 类

• 对对象做响应化处理，对数组做响应化处理

// src\core\observer\index.js
export class Observer {
    value: any; // 观测对象
    dep: Dep;  // 依赖对象
    vmCount: number; // 实例计数器
    constructor (value: any) {
        this.value = value
        this.dep = new Dep()
        // 初始化实例的 vmCount 为 0
        this.vmCount = 0
        // 将实例挂载到观测对象的 __ob__ 属性，设置为不可枚举
        def(value, '__ob__', this)
        if (Array.isArray(value)) {
            // 数组的响应式处理
            if (hasProto) {
                protoAugment(value, arrayMethods)
            } else {
                copyAugment(value, arrayMethods, arrayKeys)
            }
            // 为数组中的每一个对象创建一个 observer 实例
            this.observeArray(value)
        } else {
            // 对象的响应化处理
            // 遍历对象中的每一个属性，转换成 setter/getter
            this.walk(value)
        }
    }
    walk (obj: Object) {
        // 获取观察对象的每一个属性
        const keys = Object.keys(obj)
        // 遍历每一个属性，设置为响应式数据
        for (let i = 0; i < keys.length; i++) {
            defineReactive(obj, keys[i])
        }
    }
    observeArray (items: Array<any>) {
        for (let i = 0, l = items.length; i < l; i++) {
         observe(items[i])
        }
    }
}

defineReactive 方法

• 为一个对象定义一个响应式的属性，每一个属性对应一个 dep 对象
• 如果该属性的值是对象，继续调用 observe
• 如果给属性赋新值，继续调用 observe
• 如果数据更新发送通知

// src\core\observer\index.js
export function defineReactive (
    obj: Object,
    key: string,
    val: any,
    customSetter?: ?Function,
    shallow?: boolean
) {

    // 1. 为每一个属性，创建依赖对象实例
    const dep = new Dep()
    // 获取 obj 的属性描述符对象
    const property = Object.getOwnPropertyDescriptor(obj, key)
    if (property && property.configurable === false) {
        return
    }
    // 提供预定义的存取器函数
    const getter = property && property.get
    const setter = property && property.set
    if ((!getter || setter) && arguments.length === 2) {
        val = obj[key]
    }
    // 2. 判断是否递归观察子对象，并将子对象属性都转换成 getter/setter，返回子观察对象
    let childOb = !shallow && observe(val)
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: function reactiveGetter () {
            // 如果预定义的 getter 存在则 value 等于getter 调用的返回值
            // 否则直接赋予属性值
            const value = getter ? getter.call(obj) : val
            // 如果存在当前依赖目标，即 watcher 对象，则建立依赖
            if (Dep.target) {
                // dep() 添加相互的依赖
                // 1个组件对应一个 watcher 对象
                // 1个watcher会对应多个dep（要观察的属性很多）
                // 我们可以手动创建多个 watcher 监听1个属性的变化，1个dep可以对应多个watcher
                dep.depend()
                // 如果子观察目标存在，建立子对象的依赖关系，将来 Vue.set() 会用到
                if (childOb) {
                    childOb.dep.depend()
                    // 如果属性是数组，则特殊处理收集数组对象依赖
                    if (Array.isArray(value)) {
                        dependArray(value)
                    }
                }
             }
             // 返回属性值
             return value
         },
        set: function reactiveSetter (newVal) {
            // 如果预定义的 getter 存在则 value 等于getter 调用的返回值
            // 否则直接赋予属性值
            const value = getter ? getter.call(obj) : val
            // 如果新值等于旧值或者新值旧值为null则不执行
            if (newVal === value || (newVal !== newVal && value !== value)) {
                return
            }
            if (process.env.NODE_ENV !== 'production' && customSetter) {
                customSetter()
            }
            // 如果没有 setter 直接返回
            if (getter && !setter) return
            // 如果预定义setter存在则调用，否则直接更新新值
            if (setter) {
                setter.call(obj, newVal)
            } else {
                val = newVal
            }
            // 3. 如果新值是对象，观察子对象并返回 子的 observer 对象
            childOb = !shallow && observe(newVal)
            // 4. 发布更改通知
            dep.notify()
        }
    })
}

重写数组修改数据的方法

// src\core\observer\array.js
const arrayProto = Array.prototype
// 克隆数组的原型
export const arrayMethods = Object.create(arrayProto)
// 修改数组元素的方法
const methodsToPatch = [
    'push',
    'pop',
    'shift',
    'unshift',
    'splice',
    'sort',
    'reverse'
]

methodsToPatch.forEach(function (method) {
    // 保存数组原方法
    const original = arrayProto[method]
    // 调用 Object.defineProperty() 重新定义修改数组的方法
    def(arrayMethods, method, function mutator (...args) {
    // 执行数组的原始方法
    // 获取数组对象的 ob 对象
    const ob = this.__ob__
    let inserted
    switch (method) {
        case 'push':
        case 'unshift':
            inserted = args
            break
        case 'splice':
            inserted = args.slice(2)
            break
    }
    // 对插入的新元素，重新遍历数组元素设置为响应式数据
    if (inserted) ob.observeArray(inserted)
        // 调用了修改数组的方法，调用数组的ob对象发送通知
        ob.dep.notify()
        return result
    })
})