Vue2.x 是使用 Object.defindProperty()，来进行对对象的监听的。Vue3.x 版本之后就改用Proxy进行实现的。它们可以理解为在目标对象前架设一“拦截”层，外界对该对象的访问都必须先通过这层拦截，因此提供一种机制，可以对外界的访问进行过滤和改写。本文章对这两种方式做一些简单使用介绍 ，后续会进行更深入的分析介绍。
Object.defineProperty的基本使用
基本语法
Object.defineProperty(obj, prop, descriptor);
- obj: 可以理解为目标对象。
- prop: 目标对象的属性名。
- descriptor: 对属性的描述。它是由两部分组成，分别是：数据描述符和访问器描述符，数据描述符的含义是：它是一个包含属性的值，并说明这个属性值是可读或不可读的对象。访问器描述符的含义是：包含该属性的一对 getter/setter方法的对象
示例：
Object.defineProperty(obj, 'name', {
'value': 'jack',
'writable': true,
'enumerable': true,
'configurable': true
});
直接上代码实现一个基本的双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双向绑定Object.defineProperty</title>
</head>
<body>
<h2>双向绑定Object.defineProperty</h2>
<div>
<input id="txt1" type="text"/>
<p id="p1"></p>
</div>
<script>
const obj = {};
Object.defineProperty(obj, "name", {
set: function (value) {
document.getElementById('txt1').value = value;
document.getElementById('p1').innerText = value;
}
})
document.getElementById('txt1').oninput = function (e) {
obj.name = e.target.value;
}
</script>
</body>
</html>
- 注意：此 对数组的监听无效，后续再写具体的分析。
Proxy的基本使用j
基本语法
var proxy = new Proxy(target,handler)
Proxy对象的所有写法都是上面这种形式，不同的只是handler参数写法，其中new Proxy()表示一个Proxy实例，target参数表示要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。
eg:
var proxy = new Proxy({},{
get:function(target,property){
return 35;
}
})
//proxy.title 35
//proxy.name 35
//proxy.time 35
可以看到，由于拦截函数总是返回35，所以访问任何属性都将得到35.
以下是proxy实现的简单双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>Proxy Reflect</h2>
<div>
<input id="txt1" type="text"/>
<p id="p1"></p>
</div>
</body>
<script>
var obj = new Proxy({}, {
get: function (target, key, receiver) {
console.log(`getting ${key}!`);
return Reflect.get(target, key, receiver)
},
set: function (target, key, value, receiver) {
console.log(`setting ${key}:${value}`);
if (key === 'name') {
document.getElementById('txt1').value = value;
document.getElementById('p1').innerText = value;
}
return Reflect.set(target, key, value, receiver)
}
})
obj.num = 1;
obj.num++;
document.getElementById('txt1').oninput = function (e) {
obj.name = e.target.value;
}
</script>
</html>
网友评论