Vue原理之使Object数据具备“可观测”

Vue中数据的每次读和写能够被监听到，并渲染视图，即我们能够知道数据什么时候被读取了或数据什么时候被改写了，我们将其称为数据变的‘可观测’。

要将数据变的 ‘可观测’ ，我们就要使用js中的 Object.defineProperty 方法了，下面我们就使用这个方法使数据变得“可观测”。

首先，我们定义一个数据对象 people

let people = {
    'name': 'YQL',
    'age': 25,
    'gender': 'man'
}

然后是当该对象属性被访问或是修改，向我通知

let a;
Object.defineProperty(people, 'name', {
    get() {
        console.log("gender被查看了");
        return name
    },
    set(v) {
        console.log("gender被修改了");
        a = v
    },
})

这样就实现了一个简单的让对象具备可观测性
在控制台访问或是修改都会触发
如图：

可以看到，people已经可以主动告诉我们它的属性的读写情况了，这也意味着，这个people的数据对象已经是“可观测”的了。

为了把people的所有属性都变得可观测，我们可以编写如下代码：

class Observable {
    constructor(value) {
        this.value = value
        if (Array.isArray(value)) {
            // 如果是数组的话。。。
        } else {
            this.walk(value)
        }
    }
    walk(obj) {
        const keys = Object.keys(obj);
        obj.map(keyName => {
            ObservableMethod(obj, keyName)
        })
    }
}

const ObservableMethod = (obj, key, val) => {
    // 如果只传了前两个参数，给val设置默认值
    if (arguments.length === 2) val = obj[key];
    // 如果值依然是object，再次循环
    if (typeof val === 'object') new Observer(val)
    Object.defineProperty(obj, key, {
        get() {
            console.log(`${key}属性被读取了`);
            return val;
        },
        set(newVal) {
            if (val === newVal) {
                return
            }
            console.log(`${key}属性被修改了`);
            val = newVal;
        }
    })
};