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数据响应原理实例（上）
欢迎关注我的公众号，谢谢大家！