VueJS双向数据绑定实现

Posted 2021-05-01 珠峰培训

Object.defineProperty简单应用

var obj = {};

Object.defineProperty(obj, 'hello', {

    get: function() {

        console.log('get方法获取值');

    },

    set: function(val) {

        console.log('set方法设置的值为：' + val);

    }

});

obj.hello; // get方法获取值

obj.hello = 'Hello World';

实现数据和视图的联动，即实现双向绑定，听起来是不是很牛叉？并且Vue.js和Avalon.js 都是通过它实现双向绑定的。是不是有点小激动呢？所以更有必要了解一下了几行代码看它怎么用？

基本用法

var a = {};

Object.defineProperty(a, 'b', {

    value: 123

});

console.log(a.b); // 123

很简单，它接受三个参数，而且都是必填的。

参数介绍:

• 第一个参数：目标对象

• 第二个参数：需要定义的属性或方法的名字。

• 第三个参数：目标属性所拥有的特性。

前两个参数不多说了，一看代码就懂，主要看第三个参数，看看有哪些取值。

• value ：属性的值。

• writable ：如果为 false ，属性的值就不能被重写,只能为只读了。

• configurable ：总开关，一旦为 false ，就不能再设置他的（ value ， writable ， configurable ）。

enumerable ：是否能在 for…in 循环中遍历出来或在 Object.keys 中列举出来。

• get ：见下面例子。

• set ：见下面例子。

接下来，该是到了用实例说话的时候了。

var a = {};

Object.defineProperty(a, 'b', {

    value: 123

});

console.log(a.b); // 123

我们只设置了 value ，别的并没有设置，但是 第一次的时候 可以简单的理解为（暂时这样理解）它会默认帮我们把 writable 、 configurable 、 enumerable 、都设上值，而且值还都是 false 。也就是说，上面代码和下面是等价的的（ 仅限于第一次设置的时候）：

var a = {};

Object.defineProperty(a, 'b', {

    value: 123,

    writable: false,

    enumerable: false,

    configurable: false

});

console.log(a.b); //123

configurable

总开关，第一次设置 false 之后，，第二次什么设置也不行了，比如说：

var a = {};

Object.defineProperty(a, 'b', {

    configurable: false

});

Object.defineProperty(a, 'b', { // Uncaught TypeError: Cannot redefine property: b(…)

    configurable: true

});

如果第一次不设置，第二次再设置同样会报错。

writable

如果设置为 fasle ，就变成只读了。。

var a = {};

Object.defineProperty(a, 'b', {

    value: 123,

    writable: false

});

console.log(a.b); // 打印 123

a.b = 124; // 没有错误抛出（在严格模式下会抛出，即使之前已经有相同的值）

console.log(a.b); // 打印 123， 赋值不起作用。

enumerable

属性特性 enumerable 定义了对象的属性是否可以在 for…in 循环和 Object.keys() 中被枚举。

var a = {};

Object.defineProperty(a, "b", {

    value: 3445,

    enumerable: true

});

console.log(Object.keys(a)); // 打印["b"]

改为 false

var a = {};

Object.defineProperty(a, "b", {

    value: 3445,

    enumerable: false //注意咯这里改了

});

console.log(Object.keys(a)); // 打印[]

for…in 类似，不赘述了。

set 和 get

在参数中不能 同时 设置访问器 ( get 和 set ) 和 wriable 或 value ，否则会错，就是说想用( get 和 set )，就不能用（ wriable 或 value 中的任何一个）

set 和 get ，他俩干啥用的的？

var a = {};

Object.defineProperty(a, 'b', {

    set: function(newValue) {

        console.log('你要赋值给我，我的新值是：'+ newValue);

    },

    get: function() {

        console.log("你取我的值");

        return 2; //注意这里，我硬编码返回2

    }

});

a.b = 1; //打印 你要赋值给我,我的新值是1

console.log(a.b); //打印 你取我的值 2

简单来说，这个 b 赋值或者取值的时候会分别触发 set 和 get 对应的函数。

现在开始使用 Object.defineProperty 实现数据和视图的联动。

<!-- html -->

<div>

    你好，<span id='nickName'></span>

    <div id="introduce"></div>

</div>

// javascript

// 视图控制器

var userInfo = {};

Object.defineProperty(userInfo, "nickName", {

    get: function() {

        return document.getElementById('nickName').innerHTML;

    },

    set: function(nick) {

        document.getElementById('nickName').innerHTML = nick;

    }

});

Object.defineProperty(userInfo, "introduce", {

    get: function() {

        return document.getElementById('introduce').innerHTML;

    },

    set: function(introduce) {

        document.getElementById('introduce').innerHTML = introduce;

    }

});

userInfo.nickName = "xxx";

userInfo.introduce = "我是xxx，我来自云南，..."

设置 userInfo 的 nickName 属性时会调用 set 方法，更新DOM节点的HTML。

Vue 事件驱动和依赖追踪

在之前 实现一个自己的MVVM中 ，用 setter 来观测 model ，将界面上所有的 viewModel 绑定到 model 上。 当 model 改变，更新所有的 viewModel ，将新值渲染到界面上 。同时监听界面上通过 v-model 绑定的所有 input ，并通过 addEventListener 事件将新值更新到 model 上，以此来完成双向绑定 。

为数据定义 getter & setter

class Observer {

    constructor(data) {

        this._data = data;

        this.walk(this._data);

    }

    walk(data) {

        Object.keys(data).forEach((key) => {

            this.defineRective(data, key, data[key])

        })

    };

    defineRective(vm, key, value) {

        var self = this;

        if (value && typeof value === "object") {

            this.walk(value);

        }

        Object.defineProperty(vm, key, {

            get: function() {

                return value;

            },

            set: function(newVal) {

                if (value != newVal) {

                    if (newVal && typeof newVal === "object") {

                        self.walk(newVal);

                    }

                    value = newVal;

                }

            }

        })

    }

}

module.exports = Observer;

这样，就为每个属性添加了 getter 和 setter ，当属性是一个对象，那么就递归添加。

一旦获取属性值或者为属性赋值就会触发 get 或 set ，当触发了 set ，即 model 变化，就可以发布一个消息，通知所有 viewModel 更新。

defineRective(vm, key, value) {

    // 将这个属性的依赖表达式存储在闭包中。

    var dep = new Dep();

    var self = this;

    if (value && typeof value === "object") {

        this.walk(value);

    }

    Object.defineProperty(vm, key, {

        get: function() {

            return value;

        },

        set: function(newVal) {

            if (value != newVal) {

                if (newVal && typeof newVal === "object") {

                    self.walk(newVal);

                }

                value = newVal;

                // 通知所有的 viewModel 更新

                dep.notify();

            }

        }

    })

}

那么怎么定义 Dep 呢？？

class Dep {

    constructor() {

        // 依赖列表

        this.dependences = [];

    }

    // 添加依赖

    addDep(watcher) {

        if (watcher) {

            this.dependences.push(watcher);

        }

    }

    // 通知所有依赖更新

    notify() {

        this.dependences.forEach((watcher) => {

            watcher.update();

        })

    }

}

module.exports = Dep;

这里的每个依赖就是一个 Watcher 。看看如何定义 Watcher 。这里每一个 Watcher 都会有一个唯一的 id 号，它拥有一个表达式和一个回调函数 。

比如 表达式 a +b ; 会在 get 计算时 访问 a 与 b ， 由于 JavaScript是单线程，任一时刻只有一处JavaScript代码在执行， 用 Dep.target 作为一个全局变量来表示当前 Watcher 的表达式，然后通过 compute 访问 a ， b ，触发 a 与 b 的 getter ，在 getter 里面将 Dep.target 添加为依赖 。

一旦 a 与 b 的 set 触发，调用 update 函数，更新依赖的值 。

var uid = 0;

class Watcher {

    constructor(viewModel, exp, callback) {

        this.viewModel = viewModel;

        this.id = uid++;

        this.exp = exp;

        this.callback = callback;

        this.oldValue = "";

        this.update();

    }

    get() {

        Dep.target = this;

        var res = this.compute(this.viewModel, this.exp);

        Dep.target = null;

        return res;

    }

    update() {

        var newValue = this.get();

        if (this.oldValue === newValue) {

            return;

        }

        // callback 里进行Dom 的更新操作

        this.callback(newValue, this.oldValue);

        this.oldValue = newValue;

    }

    compute(viewModel, exp) {

        var res = replaceWith(viewModel, exp);

        return res;

    }

}

module.exports = Watcher;

由于当前表达式需要在 当前的 model 下面执行，所以 采用 replaceWith 函数来代替 with

通过 get 添加依赖：

Object.defineProperty(vm, key, {

    get: function() {

        var watcher = Dep.target;

        if (watcher && !dep.dependences[watcher.id]) {

            dep.addDep(watcher);

        }

        return value;

    },

    set: function(newVal) {

        if (value != newVal) {

            if (newVal && typeof newVal === "object") {

                self.walk(newVal);

            }

            value = newVal;

            dep.notify();

        }

    }

})