Vue实现数据响应式原理

最新推荐文章于 2024-09-14 15:49:07 发布

KKou.c

最新推荐文章于 2024-09-14 15:49:07 发布

阅读量851

点赞数

分类专栏： vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/curry0711/article/details/120080246

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Vue中的数据响应式：

我们修改代码（例如修改data中的属性值），不需要我们刷新，页面就重新渲染 ——— 这就是数据响应式。

程序猿只需要把属性添加到data中，然后在模板里用插值{{}}语句或者v-bind指令等方法就可以实现该功能，但Vue是怎么实现的呢？

在我的理解中，Vue实现该功能其实是巧妙的运用了两层的数据代理外加数据劫持。至于数据代理和数据劫持就需要大家先了解一下了，这里不多讲。

1、第一层数据代理

首先，我们来看一个简单的例子：

export default {
   name: "ProxyStudy",
    data() {
        return {
            name: 'xxc',
            age: 18
        }
    },
    created() {
        console.log(this)
    }
}

我们简单的在data中定义了name以及age属性，那么，我们定义的属性具体是放在vue的哪里呢？
于是我们打印一下vue实例看看里面是不是存放了我们写的data：
在这里插入图片描述
如我们所料，在vue的实例（姑且叫做vm）中确实新增了age与name属性，但是细心的朋友就会发现在vm中还存在着一个属性叫做_data，展开以后里面也有age与name属性。

那这些age和name哪个才是我们自己写入的呢？
答案：都不是！

Vue做的第一层数据代理，就是vm上的属性age和name代理_data中的age和name。

在这一层数据代理的getter和setter中，vue并没有做数据劫持，只是单纯的数据代理。

2、第二层数据代理

回到上面的问题，我们自己写入的data到底存入到哪去了呢？

我们辛辛苦苦写的data，vue肯定不会直接扔了，而是做了一次简单加工，也就是第二层数据代理。示例：

let data = {
    name: 'xxc',
    age: 18
};

//创建一个监视的实例对象，用于监视data中的属性变化
const obs = new Observer(data);

//准备一个vue实例对象
let vm = {};
vm._data = data = obs;

这里的Observer是vue团队写的为了监视数据变化的方法。在这个方法里面，做了一次数据代理，也就是vue中的第二层数据代理，

用obs实例对象代理我们写入的data，并将值赋给_data和我们自己写入的data。

也就是说，我们写入的data其实是在这里进行的调用。所以我们在控制台中可以看到这个现象：
在这里插入图片描述
但是我们应该知道，这里的data也并非我们写入的data，是经过加工了的。

而vue在这一层数据代理的setter中加入了数据劫持，所以最终实现了数据响应式，可能要看懂vue写的Observer源码会比较难，这里我简单的写一下里面的核心内容大家就明白了：

function Observer(obj) {
    //汇总对象中的所有属性形成一个数组
    const keys = Object.keys(obj);
    //遍历
    keys.forEach((k) => {
        //此处this指向obs
        Object.defineProperty(this, k, {
            get() {
                return obj[k]
            },
            set(val) {
                //此处做数据劫持，重新渲染模板
                console.log(`${k}被修改了，解析模板，生成虚拟Dom，进行比较，并按需重新渲染模板`);
                obj[k] = val
            }
        })
    })
}