本篇文章給大家分享的是有關Vue2.X和Vue3.0數據響應的區別有哪些，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
defineProperty 定義對象的屬性，只不過屬性里的get和set實現了響應式。
常用：
value屬性值
get
set
writeable 是否可寫
enumrable 可遍歷
Vue從改變一個數據到發生改變的過程
Vue2.X數據響應原理
創建頁面，實現延時2s修改對象的值。
<!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();
setTimeout(function () {
console.log('change');
console.log(vm.$data);
vm.$data.a = 444;
}, 2000);
</script>
</body>
</html>defineProperty 實現：
function vue() {
this.$data = {
a: 1
};
this.el = document.getElementById('app');
this._html = "";
this.observe(this.$data);
this.render();
}
vue.prototype.observe = function (obj) {
let self = this;
let value;
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中console運行，結果頁面顯示： I am 444
針對數組特性化處理：
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);
結果顯示：
Vue3.0數據響應原理
Vue3.0數據響應原理
創建頁面，實現延時2s修改對象的值。代碼同上。
Proxy實現：
function vue() {
this.$data = {
a: 1
};
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中console運行，結果頁面顯示： I am 444
為什么改用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);結果顯示：
以上就是Vue2.X和Vue3.0數據響應的區別有哪些，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
