数据响应式详解(JavaScript)

什么是数据响应式？

定义

某个数据发生变化时，同时也会使这个数据相关联的代码响应更新。

图解

应用实例

Vue。Vue中的数据响应式是通过Object.defineProperty对数据进行劫持（数据劫持），并结合观察者模式实现的。
具体来说，Vue通过Object.defineProperty创建一个observer来劫持监听所有的属性，并将这些属性转化为getter和setter。由于每个Vue组件都有一个对应的watcher实例，该watcher实例会在组件渲染过程中收集所有使用过的数据属性通过getter收集为依赖（收集依赖）。之后当依赖项的setter触发时，会通知watcher，从而使它相关联的组件重新渲染（数据响应）。

Demo

//-------------------------Object.defineProperty实现响应式------------------------------//
//---------------------------------------------------------------------------------------//

function observe(data)
{
    //判断data是否为空且判断data类型是否为对象
    if(!data||typeof data!="object") return ;
    //遍历data对象所有的属性名(key)
    for(var key in data){
        //获取属性名(key)对应的属性值
        let val=data[key];
        //设置该属性
        Object.defineProperty(data,key,{
            enumerable:true,
            configurable:true,
            //获取数据时调用
            get:function(){
                //track函数：获取属性值时的处理函数，获取数据时，输出属性名即key
                track(data,key);
                //返回属性值
                return val;
            },
            //设置数据时调用
            set:function(newVal){
                trigger(data,key,newVal);
                //设置属性值为传入形参
                val=newVal;
            }
        })
        //如果属性值也为对象，那也调用observe对该值进行get,set设置
        if(typeof val==='object')
        {
            observe(val);
        }
    }
}
//track函数：获取属性值时的处理函数，获取数据时，输出属性名即key
function track(data,key){
    console.log('get data',key);
}
//trigger函数：修改属性值时的处理函数，获取数据时，输出属性名即key
function trigger(data,key,value){
    console.log('set data',key,":",value);
}
var data={
    name:'HelloWorld',
    friends:[1,2,3]
}
observe(data);
console.log(data.name);
data.name='valley';
data.friends[0]=4;
data.friends[3]=5;
data.age=6;