Obect.definedProperty响应

最新推荐文章于 2024-06-18 00:24:59 发布

原创最新推荐文章于 2024-06-18 00:24:59 发布 · 279 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文深入探讨Vue2中响应式系统的实现机制，利用ES5的Object.defineProperty方法，通过get和set访问器创建数据绑定，实现视图更新。文章详细解释了依赖收集和通知过程，展示了如何在数据变化时自动触发视图更新。

在之前学习vue2时发现响应式的原理是利用Object.definedProperty方法实现数据的绑定，已达到响应式，这是ES5的方法。

语法：

Object.definedProperty(target,propKey,handler)

target：目标对象
propKey：属性名称的字符串
handler：对象描述符，有两个方法 get()和set()(双向数据绑定正是利用了这两个方法，即访问器），以及其他属性（configurable，enumerable，writable，默认是false）
- set()：一旦属性被重新赋值，此方法被自动调用。

- get()：一旦属性被访问读取，此方法被自动调用。

响应数据绑定例子：

let x;
let y;
let f = n=>n*100+100;

let active;
let onXChange=function(cb){
    active = cb;
    active();
    active = null;
}

class Dep{
    constructor(){
        this.deps = new Set();
    }
    depend(){
        if(active){            
            this.deps.add(active);            
        }
    }
    notify(){              
        this.deps.forEach(dep=>dep());
    }
}
let ref = initValue=>{
    let value = initValue;
    let dep = new Dep();
    return Object.defineProperty({},'value',{
        get(){
            dep.depend(); 
            return value;
        },
        set(newValue){
            value = newValue; 
            dep.notify();
        }
    })
}
x = ref(1);
onXChange(()=>{        
    y = f(x.value);
    console.log(y); // 1,2,3
})

x.value=2;
x.value=3;

响应流程：

1. reg(1) => 返回x.value对象

2. onXChange 调用回调赋值给 active,后执行

3. x.value =>触发get 方法 => this.deps = >active?add:''

4. f方法计算返回值

5. 当x.value发生改变，触发set 方法 => 存入值=> this.deps循环触发之前添加的回调方法执行，然后又从3开始，直到，x.value值没有变动