Object.defineproperty()和proxy

最新推荐文章于 2024-05-02 14:26:53 发布

努力不熬夜的小喵

最新推荐文章于 2024-05-02 14:26:53 发布

阅读量1k

点赞数 4

文章标签：前端 javascript vue

本文链接：https://blog.csdn.net/qq_43569680/article/details/123813338

版权

数据绑定

“数据绑定”的关键在于监听数据的变化，可是对于这样一个对象：var obj = {value: 1}，我们该怎么知道 obj 发生了改变呢？

Object.defineProperty

ES5 提供了 Object.defineProperty 方法，该方法可以在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。
语法：Object.defineProperty(obj, prop, descriptor)
参数
- obj: 要在其上定义属性的对象
- prop: 要定义或修改的属性的名称
- descriptor: 将被定义或修改的属性的描述符

Proxy

ES6提供了 Proxy，可以重定义更多的行为，比如 in、delete、函数调用等更多行为。
Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。
语法：var proxy = new Proxy(target, handler)
复制代码proxy 对象的所有用法，都是上面这种形式，不同的只是handler参数的写法。
- new Proxy()表示生成一个Proxy实例
- target参数表示所要拦截的目标对象
- handler参数也是一个对象，用来定制拦截行为

区别

使用Object.defineProperty的时候，我们遇到的问题有：

一次只能对一个属性进行监听，需要遍历来对所有属性监听
在遇到一个对象的属性还是一个对象的情况下，需要递归监听
对于对象的新增属性，需要手动监听
对于数组通过push、unshift方法增加的元素，也无法监听

Object.defineProperty简单实现

<body>
    <input id="input" type="text" />
	<div id="text"></div>
</body>

// 简单粗暴的说明双向绑定的原理
const input = document.getElementById("input");
const text = document.getElementById("text");
const data = { value: "" };
Object.defineProperty(data, value, {
    get: function(){
        return input.value;
    },
    set: function(newVal){
        text.innerHTML = newVal;
        input.value = newVal;
    }
});
input.onkeyup = function(e){
    data.value = e.target.value;
}

实现mvvm的双向绑定

是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。就必须要实现以下几点：

实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
mvvm入口函数，整合以上三者

具体实现

function defineReactive(obj, key, val){
    let dep = new Dep(); // 为属性添加订阅者
    Object.defineProperty(obj, key, {
        get: function () { 
            if(Dep.target){
                dep.addSub(Dep.target); // 添加订阅者到dep实例对象
            }
            return val; // 返回监听到的值
         },
        set: function (newVal) {
            if(newVal === val) return;
            val = newVal; // 写入新的val值
            dep.notify(); // 作为发布者发布通知
        }
    });
}
function observe(obj, vm) { 
    Object.keys(obj).forEach((key) => {
        defineReactive(vm, key, obj[key]);
    })
 }

努力不熬夜的小喵

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
Object.defineproperty()和proxy

数据绑定“数据绑定”的关键在于监听数据的变化，可是对于这样一个对象：var obj = {value: 1}，我们该怎么知道 obj 发生了改变呢？Object.definePropertyES5 提供了 Object.defineProperty 方法，该方法可以在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。语法：Object.defineProperty(obj, prop, descriptor)参数obj: 要在其上定义属性的对象prop: 要定义或修改
复制链接

扫一扫