阅读 678

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

Vue3.0数据响应原理

Vue3.0数据响应原理

实例:在页面上初始化“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中使用Proxy实现数据响应:

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;

    this.$data = new Proxy(this.$data, {
        get: function (target, key) {
            return target[key];
        },
        set: function (target, key, newvalue) {
            target[key] = 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:

为什么改用Proxy

  • defineProperty只能监听某个属性,不能对全对象监听
  • 可以省去for-in循环提升效率
  • 可以监听数组,不用再去单独的对数组做特异性操作

Proxy还能做什么

校验类型

function createValidator(target, validator) {
    return new Proxy(target, {
        _validator: validator,
        set(target, key, value, proxy) {
            if(target.hasOwnProperty(key)) {
                let validator = this._validator[key];
                if(validator(value)) {
                    return Reflect.set(target, key, value, proxy);
                } else {
                    throw Error('type error');
                }
            }
        }
    })
}

let personValidator = {
    name(val) {
        return typeof val === 'string';
    },
    age(val) {
        return typeof val === 'number' && val > 18;
    }
}

class person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
        return createValidator(this, personValidator);
    }
}
复制代码

在Chrome中console运行示例:

let tmp = new person('张三', 30);
复制代码

结果显示:

真正的私有变量

Proxy 把以 _ 开头的变量都认为是私有的。

let api = {
  _secretName: 'Hector',
  _otherName: 'Shirly',
  ver: 'v0.0.1'
};

api = new Proxy(api, {
  get: function(target, key) {
    // 以 _ 下划线开头的都认为是 私有的
    if (key.startsWith('_')) {
      console.log('私有变量不能被访问');
      return false;
    }
    return target[key];
  },
  set: function(target, key, value) {
    if (key.startsWith('_')) {
      console.log('私有变量不能被修改');
      return false;
    }
    target[key] = value;
  }
});

api._secretName; 					// 私有变量不能被访问
console.log(api.ver); 				// v0.0.1
api._otherName = 3;					// 私有变量不能被修改
复制代码

上一篇文章:Vue2.X和Vue3.0数据响应原理实例(上)


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

关注下面的标签,发现更多相似文章
评论