Vue 源码中数据劫持的原理与实现

阿贾克斯的黎明

于 2024-10-09 03:19:33 发布

阅读量206

点赞数 1

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

本文链接：https://blog.csdn.net/m0_57836225/article/details/142770209

版权

前端专栏收录该内容

119 篇文章 0 订阅

订阅专栏

在 Vue2 中，数据劫持是实现响应式系统的关键机制之一。本文将结合视频内容详细讲解 Vue2 中数据劫持的过程，并探讨在 Vue3 中的变化以及给出相关代码示例。

一、Vue2 中的数据劫持

（一）问题引入

在视频中，作者首先提出了一个矛盾点。当打印this时，得到的是一个大对象，但想要打印this.str（其中str是在data中的数据）时却无法直接获取。在脚手架中正常编写代码时，可以打印出str，但在特定场景下却不行。这是因为在当前对象下没有这个属性，而str在date里面。

（二）解决方案

为了解决这个问题，作者提出要将date中的数据拷贝一份放到外面的对象中。例如，有一个view对象，其中包含date、EL、options和event fn等属性。在date中有STR（例如值为 "123"）和B（例如值为 "456"）等属性。在外面再定义一个SSTR和B，这样就可以通过this.str访问到data中的数据了。

但是，仅仅这样还不行，因为当修改了data中的STR时，外面的SSTR并不会自动跟着改变。为了解决这个问题，需要用到双向绑定原理，即使用Object.defineProperty来实现数据劫持。

（三）实现方法

首先新增一个方法，该方法的作用是给新的大对象（view对象）附加来自于date中的属性，并保持date中的属性值和view对象的属性值双向同步，也就是实现数据劫持。
在这个方法中，使用for in循环遍历date中的属性，然后使用Object.defineProperty为view对象添加属性，并监测属性的变化。在get方法中，返回this.date[k]，即获取date中的对应属性值；在set方法中，设置date中的对应属性值为新的值，从而实现双向同步。

二、Vue3 中的变化

在 Vue3 中，数据劫持的实现方式发生了一些变化。Vue3 使用了 ES6 的Proxy来实现数据劫持，相比 Vue2 中的Object.defineProperty，Proxy具有以下优势：

Proxy可以直接代理整个对象，而Object.defineProperty只能代理单个属性。
Proxy可以代理数组的各种操作，而Object.defineProperty对数组的代理比较麻烦。
Proxy可以拦截更多的操作，如delete、in等，而Object.defineProperty只能拦截get和set操作。

以下是使用Proxy实现数据劫持的示例代码：

const data = {
  str: '123',
  b: '456'
};

const handler = {
  get(target, key) {
    return target[key];
  },
  set(target, key, value) {
    target[key] = value;
    // 可以在这里触发视图更新等操作
    return true;
  }
};

const proxyData = new Proxy(data, handler);

console.log(proxyData.str); // 123
proxyData.str = 'new value';
console.log(proxyData.str); // new value

通过以上代码，使用Proxy创建了一个代理对象proxyData，对data对象进行了数据劫持。当获取或设置proxyData的属性时，会触发handler中的get和set方法。