Vue2.X和Vue3.0數據響應原理實例（下）

時間 2019-11-21

標籤 vue2.x vue vue3.0 數據響應原理實例简体版

原文原文鏈接

Vue3.0數據響應原理

實例：在頁面上初始化「I am Hector」，延時2s，修改「Hector」部分的值，修改成「Hector Real」，頁面顯示「I am Hector Real」，實現數據響應。javascript

建立頁面：html

<!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實現數據響應：vue

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 Realjava

在Chrome的console中的log：api

爲何改用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);
複製代碼

結果顯示：app

真正的私有變量

Proxy 把以 _ 開頭的變量都認爲是私有的。dom

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;					// 私有變量不能被修改
複製代碼