分别使用 Object.defineProperty 和 proxy 实现简单的数据双向绑定
程序员文章站
2022-07-12 22:57:11
...
Object.defineProperty
<input id="input">
<span id="span"></span>
const data = {
text: 'default'
}
var input = document.getElementById('input');
var span = document.getElementById('span');
function define(data, key, value) {
Object.defineProperty(data, key, {
set(newV) {
input.value = newV;
span.innerHTML = newV;
// 可以看到,这里其实是需要 另外一个 不涉及到 data 内存的地址来专门存放数据
// 可以使用闭包
// 要不然会陷入死循环
// 可以试试看改成 data[key] = value
value = newV
},
get() {
// 同上, 可以试试 return data[key]
return value
}
})
}
define(data, 'text', data.text)
input.addEventListener('input', function (e) {
data.text = e.target.value
});
proxy
const data = {
text: 'default'
}
var input = document.getElementById('input');
var span = document.getElementById('span');
const handler = {
// 可以看到,这里其实是没有指定 key 的,也就是说,他是绑定在所有属性上的
// 因此不需要像 definePropery 一样, 每一个 key 都要执行一次 definePropery
set(target, key, value) {
target[key] = value;
input.value = value;
span.innerHTML = value;
return value;
},
// 事实上,不同于 defineProperty ,这里不需要设置 get 也能够拿到对应的属性
get(target, key) {
return target[key];
}
}
const proxy = new Proxy(data, handler);
input.addEventListener('input', function (e) {
proxy.text = e.target.value
})
而且 proxy 经过专门的优化,运行速度比 defineProperty 要快
推荐阅读
-
使用 Object.defineProperty (vue2)和 Proxy(vue3)实现Vue双向数据绑定
-
分别使用 Object.defineProperty 和 proxy 实现简单的数据双向绑定
-
Proxy和Object.defineProperty实现简单的数据绑定
-
用object.defineproperty()和proxy实现简单的双向绑定,并比较两者优劣
-
vue的双向数据绑定(Object.defineProperty(),和es6的Proxy的底层封装是Object.defineProperty()封装的);...
-
简单实现Vue2.0(Object.defineProperty)和Vue3.0(Proxy)的数据双向绑定
-
使用Object.defineProperty实现简单的js双向绑定_javascript技巧
-
使用Object.defineProperty实现简单的js双向绑定_javascript技巧
-
Vue(2.x及3.0)是如何实现双向绑定的(Object.defineProperty 和 Proxy)以及常见错误说明