Vue检测数据的原理

Vue能够对用户的数据进行响应式，也就是你在data中写了什么，你在模板中用到data的部分就会渲染成什么，那么Vue是怎么知道用户修改了data中的数据变化并对模板重新进行解析的呢？

在Vue将数据存储为自身的_data之前，Vue会将数据进行处理，主要用到的仍然是数据代理，通过修改一个对象中的属性触发getter和setter进行设置。

如果不清楚数据代理的流程，可以参考这篇文章：https://blog.csdn.net/XunLin233/article/details/133714989

一、Vue监测对象的修改

我们使用数据代理的方式对p对象中的name属性进行数据代理：


const p = {
    name:"张三",
    age:18
}
 
Object.defineProperty(p, "name", {
    get() {
        return p.name;
    },
    set(value) {
        p.name=value;
    }
})

但是我们按照上面的写法进行数据的读取和修改的时候就会报错：

03.html:18 Uncaught RangeError: Maximum call stack size exceeded

为什么会产生这个原因呢？

当我们读取name属性时，就会调用get函数，get函数中又读取name属性，又调用get函数...如此无限套娃，就报错了。

如何解决上面问题呢？

既然不能通过对象本身去修改属性值，那我们就借助其他的对象来对属性值进行修改，然后返回这个将所有属性修改后的对象，其核心思想就是为每一个对象属性设置getter和setter。

我们可以使用构造函数的this为一个对象中添加属性：


const p = {
    name:"张三",
    age:18
}
 
function Observer(obj) {
    // 获取对象所有的属性名
    const keys = Object.keys(obj);
    // 对对象的每个属性进行遍历
    keys.forEach((k)=>{
        // 这里的this是Observe对象，所有修改后的属性都添加在了Observe对象身上
        console.log(this);  // Observer {}
        Object.defineProperty(this, k, {
            // 添加getter 和 setter
            get() {
                return obj[k];
            },
            set(value) {
                console.log("数据被修改了");
                obj[k] = value;
            }
        })
    })
}
const newp = new Observer(p);  // 创建Observe对象
console.log(newp);