【Vue原理模拟】模拟Vue实现响应式数据

1. 预期效果

当数据变动时，触发自定义的回调函数。

2. 思路

对对象 object 的 setter 进行设置，使 setter 在赋值之后执行回调函数 callback()。

3.细节

3.1 设置 setter 和 getter

JS提供了 [Object.defineProperty()](Object.defineProperty() - JavaScript | MDN (mozilla.org)) 这个API来定义对象属性的设置，这些设置就包括了 getter 和 setter。注意，在这些属性中，如果一个描述符同时拥有 value 或 writable 和 get 或 set 键，则会产生一个异常。

Object.defineProperty(obj, "key", {
  enumerable: false, // 是否可枚举
  configurable: false, // 是否可配置
  writable: false, // 是否可写
  value: "static"
});

我们可以利用JS的 [闭包](闭包 - JavaScript | MDN (mozilla.org))，给 getter 和 setter 创造一个共同的环境，来保存和操作数据 value 和 callback 。同时，还可以在 setter 中检测值的变化。

// task1.js
const defineReactive = function(data, key, value, cb) {
    Object.defineProperty(data, key, {
        enumerable: true,
        configurable: true,
        get() {
            console.log('getter')
            return value
        },
        set(newValue) {
            if (newValue !== value) {
                value = newValue
                console.log('setter: value change')
                cb(newValue)
            }
        }
    });
}

const task = function() {
    console.log('running task 1...')
    const obj = {}
    const callback = function(newVal) {
        console.log('callback: new value is ' + newVal)
    }
    defineReactive(obj, 'a', 1, callback)
    console.log(obj.a)
    obj.a = 2
    obj.a = 3
    obj.a = 4
}

task()

至此我们监控了 value ，可以感知到它的变化并执行回调函数。

3.2 递归监听对象的值

上面的 defineRective() 在 value 为对象的时候，当修改深层键值，则无法响应到。因此通过循环递归的方法来对每一个键值赋予响应式。这里可以通过 observe() 和 Observer 类来实现这种递归：

// observe.js
import { Observer } from "./Observer.js"

// 为数据添加响应式特性
export default function(value) {
    console.log('type of obj: ', typeof value)
    if (typeof value !== 'object') {
        // typeof 数组 = object
        return
    }
    if (typeof value.__ob__ !== 'undefined') {
        return value.__ob__
    }
    return new Observer(value)
}

// Observer.js
import { defineReactive } from './defineReactive.js'
import { def } from './util.js';

export class Observer {
    constructor(obj) {
        // 注意设置成不可枚举，不然会在walk()中循环调用
        def(obj, '__ob__', this, false)
        this.walk(obj)
    }
    walk(obj) {
        for (const key in obj) {
            defineReactive(obj, key)
        }
    }
}

在这里包装了一个 def() 函数，用于配置对象属性，把 __ob__ 属性设置成不可枚举，因为 __ob__ 类型指向自身，设置成不可枚举可以放置遍历对象时死循环

// util.js
export const def = function(obj, key, value, enumerable) {
    Object.defineProperty(obj, key, {
        value,
        enumerable,
        writable: true,
        configurable: true
    })
}

3.3 检测数组

从需求出发，对于响应式，我们对数组和对象的要求不同，对于对象，我们一般要求检测其成员的修改；对于数组，不仅要检测元素的修改，还要检测其增删（比如网页中的表格）

对由于数组没有 key ，所以不能通过 defineReactive() 来设置响应式，同时为了满足响应数组的增删改，所以 Vue 的方法是，通过包装 Array 的方法来实现响应式，当调用 push()、poll()、splice() 等方法时，会执行自己设置的响应式方法

使用 Object.create(obj) 方法可以 obj 对象为原型（prototype）创建一个对象，因此我们可以以数组原型 Array.prototype 为原型创建一个新的数组对象，在这个对象中响应式包装原来的 push()、pop()、splice()等数组

// array.js
import { def } from "./util.js"
export const arrayMethods = Object.create(Array.prototype)
const methodNameNeedChange = [
    'pop',
    'push',
    'splice',
    'shift',
    'unshift',
    'sort',
    'reverse'
]

methodNameNeedChange.forEach(methodName => {
    const original = Array.prototype[methodName]
    def(arrayMethods, methodName, function() {
        // 响应式处理
        console.log('call ' + methodName)
        const res = original.apply(this, arguments)
        const args = [...arguments]
        let inserted = []
        const ob = this.__ob__
        switch (methodName) {
            case 'push':
            case 'unshift':
                inserted = args
            case 'splice':
                inserted = args.slice(2)
        }
        ob.observeArray(inserted)

        return res
    })
})

// Observer.js
import { arrayMethods } from './array.js'
import { defineReactive } from './defineReactive.js'
import observe from './observe.js'
import { def } from './util.js'

export class Observer {
    constructor(obj) {
        console.log('Observer', obj)
        // 注意设置成不可枚举，不然会在walk()中循环调用
        def(obj, '__ob__', this, false)
        if (Array.isArray(obj)) {
            // 将数组方法设置为响应式
            Object.setPrototypeOf(obj, arrayMethods)
            this.observeArray(obj)
        } else {
            this.walk(obj)
        }
    }
    // 遍历对象成员并设置为响应式
    walk(obj) {
        for (const key in obj) {
            defineReactive(obj, key)
        }
    }
    // 遍历数组成员并设置为响应式
    observeArray(arr) {
        for (let i = 0, l = arr.length; i < l; i++) {
            observe(arr[i])
        }
    }
}

3.5 Watcher 和 Dep 类

设置多个观察者检测同一个数据

// Dep.js

var uid = 0
export default class Dep {
    constructor() {
        this.id = uid++
        // console.log('construct Dep ' + this.id)
        this.subs = []
    }
    addSub(sub) {
        this.subs.push(sub)
    }
    depend() {
        if (Dep.target) {
            if (this.subs.some((sub) => { sub.id === Dep.target.id })) {
                return
            }
            this.addSub(Dep.target)
        }
    }
    notify() {
        const s = this.subs.slice();
        for (let i = 0, l = s.length; i < l; i++) {
            s[i].update()
        }
    }
}

// Watcher.js

import Dep from "./Dep.js"

var uid = 0
export default class Watcher {
    constructor(target, expression, callback) {
        this.id = uid++
        this.target = target
        this.getter = parsePath(expression)
        this.callback = callback
        this.value = this.get()
    }
    get() {
        Dep.target = this
        const obj = this.target
        let value
        try {
            value = this.getter(obj)
        } finally {
            Dep.target = null
        }
        return value
    }
    update() {
        this.run()
    }
    run() {
        this.getAndInvoke(this.callback)
    }
    getAndInvoke(cb) {
        const obj = this.target
        const newValue = this.get()
        if (this.value !== newValue || typeof newValue === 'object') {
            const oldValue = this.value
            this.value = newValue
            cb.call(obj, newValue, newValue, oldValue)
        }

    }
}

function parsePath(str) {
    var segments = str.split('.');

    return (obj) => {
        for (let i = 0; i < segments.length; i++) {
            if (!obj) return;
            obj = obj[segments[i]]
        }
        return obj;
    };
}

// task2.js
import observe from "../observe.js";
import Watcher from "../Watcher.js";

const task2 = function() {
    const a = {
        b: {
            c: {
                d: {
                    h: 1
                }
            }
        },
        e: {
            f: 2
        },
        g: [ 1, 2, 3, { k: 1 }]
    }
    const ob_a = observe(a)
    const w_a = new Watcher(a, 'b.c.d.h', (val) => {
        console.log('1111111111')
    })
    a.b.c.d.h = 10
    a.b.c.d.h = 10

    console.log(a)
}

task2()

执行结果如下，可以看到成功响应了数据变化