阅读 576

Vue2.X和Vue3.0数据响应原理实例(上)

Vue2.X数据响应原理

Object.defineProperty

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。

Vue2.x使用属性里的get和set实现了数据响应。

常用属性:

value:该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认为 undefined

get:一个给属性提供 getter 的方法,如果没有 getter 则为 undefined。当访问该属性时,该方法会被执行,方法执行时没有参数传入,但是会传入this对象(由于继承关系,这里的this并不一定是定义该属性的对象)。 默认为 undefined

set:一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。当属性值修改时,触发执行该方法。该方法将接受唯一参数,即该属性新的参数值。 默认为 undefined

writeable:当且仅当该属性的writabletrue时,value才能被赋值运算符改变。默认为 false

enumrable:当且仅当该属性的enumerabletrue时,该属性才能够出现在对象的枚举属性中。默认为 false

configurable: 当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除。默认为 false

Vue从改变一个数据到发生改变的过程

Vue2.X数据响应原理

实例:在页面上初始化“I am Hector”,延时2s,修改“Hector”部分的值,修改为“Hector Real”,页面显示“I am Hector Real”,实现数据响应。

创建页面:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>LearnVue3.0</title>
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="test.js"></script>
    <script type="text/javascript">
        const vm = new vue();
        // 延时2s修改数据
        setTimeout(function () {
            console.log('change');
            console.log(vm.$data);
            vm.$data.a = 'Hector Real';
        }, 2000);
    </script>
</body>
</html>
复制代码

test.js中使用Object.defineProperty实现数据响应:

function vue() {
    // 固定对象和dom
    this.$data = {
        a: 'Hector'
    };
    this.el = document.getElementById('app');
    // 需要渲染的文字
    this._html = "";
    // 初始化
    this.observe(this.$data);
    this.render();
}

// 数据监听
vue.prototype.observe = function (obj) {
    let self = this;
    let value;
    // 解决只能对某个属性进行defineProperty的问题
    // 所以针对传入obj进行了for-in遍历
    for (let key in obj) {
        value = obj[key];
        if (typeof value === 'object') {
            // 再对这个对象设置监听
            this.observe(value);
        } else {
            Object.defineProperty(this.$data, key, {
                // 依赖收集
                get: function () {
                    return value;
                },
                // 触发更新
                set: function (newvalue) {
                    value = newvalue;
                    self.render();
                }
            })
        }
    }
}

// 渲染
vue.prototype.render = function () {
    this._html = "I am " + this.$data.a;
    this.el.innerHTML = this._html;
}
复制代码

在Chrome中运行,结果页面显示: I am Hector Real

在Chrome的console中的log:

数组特性化

针对数组特性化处理:

let arraypro = Array.prototype;
// 为什么要create再次创建对象,create是深拷贝,不影响之前的arraypro
let arrayob = Object.create(arraypro);
// 定义哪些方法触发更新
let arr = ["push", "pop", "shift"];

// arr里的方法,既能保持原有方法,又能触发更新
// 装饰者模式
arr.forEach(function (method, index) {
    // 对自己的push方法重写
    arrayob[method] = function () {
        let ret = arraypro[method].apply(this, arguments);
        // self.render();
        console.log('检测到数组变化,触发更新');
        return ret;
    }
});
复制代码

在Chrome中console运行示例:

let arr = [];
arr.__proto__ = arrayob;
arr.push(1);
复制代码

结果显示:


欢迎关注我的公众号,谢谢大家!