数据绑定原理
vue 2使用ES5的Object.defineProperty实现数据的双向绑定,而Vue 3则采用ES6的Proxy来实现数据代理。
下面用代码实现两种数据绑定原理,来更直接的学习和理解它们。
Object.defineProperty
Object.defineProperty只能监听某个属性,不能对全对象进行监听。
接收三个参数:obj(需要在其上定义属性的对象),key(需要定义的属性名),描述符对象。
以下介绍描述符对象:
- value – 属性对应的值,可以使任意类型的值,默认为undefined
<script setup>
import { reactive } from 'vue'
const obj = reactive({});
Object.defineProperty(obj, 'keyname', {
value: '添加属性'
});
console.log(obj.keyname); // 输出 添加属性
<script>
- writable – 属性的值是否可以被重写。默认为false。
<template>
<button @click="changedObj">changedObj</button>
</template>
<script setup>
import { reactive } from 'vue'
const obj = reactive({ })
Object.defineProperty(obj, 'keyname', {
value: '默认值',
writable: true // or false
});
function changedObj() {
obj.keyname = '新属性'
}
</script>
结果
writable为true时,obj.keyname的值会被修改为‘新属性’;
writable为false时,报错如下
**注意:value / writable不能与get / set一起使用
**
- enumerable – 此属性是否可以被枚举。默认为false。
<template>
<button @click="ergodicObj">ergodicObj</button>
</template>
<script setup>
import { reactive } from 'vue'
const obj = reactive({ })
Object.defineProperty(obj, 'keyname', {
value: '默认值',
writable: true,
enumerable: true // or false
});
function ergodicObj() {
console.log(obj,'ooooo')
for(let k in obj){
console.log(obj[k]);
}
}
</script>
结果
enumerable 为true时,obj会被正常遍历输出值‘默认值’;
enumerable 为false时,obj不会被遍历,控制台无任何输出,如下图。
4. configurable – 是否可以删除目标属性或是否可以再次修改属性的特性(writable,configurable,enumerable),默认为false,值一旦被设置不能被修改。
<template>
<button @click="deleteAttr">deleteAttr</button>
</template>
<script setup>
import { reactive } from 'vue'
const obj = reactive({ })
Object.defineProperty(obj, 'keyname', {
value: '默认值',
writable: true,
enumerable: true,
configurable: true // or false
});
function deleteAttr() {
delete obj.keyname
console.log(obj.keyname)
}
</script>
结果
configurable为true时,可以正常删除keyname属性,控制台输出undefined;
configurable为false时, 报错如下:
5. get / set – 取值 / 赋值
<template>
<div>
<button @click="addCount">addCount</button>
<p>{{ obj.count }}</p>
</div>
</template>
<script setup>
function fun(obj, key, val) {
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter() {
return val;
},
set: function reactiveSetter(newVal) {
if (newVal === val) return;
val = newVal;
console.log('当数据变化时,可以触发视图更新等操作')
}
});
}
import { reactive } from 'vue'
const obj = reactive({ count: 1 })
fun(obj, 'count', obj.count);
function addCount() {
obj.count++;
fun(obj, 'count', obj.count);
}
</script>
结果
当属性值发生变化时会触发get / set;如果get / set和value / writable同时使用时会报错如下:
Proxy
Proxy可以省去for in、闭包等操作来提升效率,并且能够直接绑定整个对象,同时也能监听数组的变化,无需使用this.$set()方法。
<template>
<div>
<button @click="changedProxy">修改代理对象的值</button>
<p>原对象:{{ data.count }} --- 代理对象:{{ proxy.count }}</p>
</div>
</template>
<script setup>
import { reactive } from 'vue'
const data = reactive({ count: 1 });
const proxy = new Proxy(data, {
get(target, property) {
return Reflect.get(target, property);
},
set(target, property, value) {
return Reflect.set(target, property, value);
},
deleteProperty(target, prop) {
return Reflect.deleteProperty(target, prop);
}
});
function changedProxy(){
proxy.count++;
}
</script>
参数
- data – 需要代理的对象
- 配置Proxy行为的对象。可指定get / set / deleteProperty等方法来定义属性被访问、修改或删除时的行为。
- get / set / deleteProperty方法的参数,target(要读取的属性所在的对象),property(要读取的属性名),value(属性的值)。
总结
使用Proxy解决Object.defineProperty的以下问题:
- 依赖跟踪有限:Vue 2 使用 Object.defineProperty 来跟踪依赖,但它不能监听数组的变化。
- 不兼容性:Object.defineProperty 不能监听属性被删除或者在原型上添加新属性的变化。
- 性能问题:大量使用 Object.defineProperty 会导致性能下降,因为它会递归地对所有属性进行定义。
- 无法原生监听数组索引和长度的变化。