Vue2 面试题之 Vue 源码 - data 劫持

最新推荐文章于 2025-07-05 13:35:15 发布

原创最新推荐文章于 2025-07-05 13:35:15 发布 · 1.1k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

前端专栏收录该内容

579 篇文章

订阅专栏

Vue2 面试题之 Vue 源码 - data 劫持

在 Vue2 的面试中，经常会涉及到对 Vue 源码的理解，其中 data 劫持是一个重要的知识点。本文将结合一个视频的内容，详细介绍 Vue2 中 data 劫持的实现原理，并附上相关的 JavaScript 代码。

一、问题背景

视频中提出了一个问题，即在 Vue2 中，如何实现对 data 中的数据进行劫持，使得当 data 中的数据发生变化时，视图能够自动更新。

二、问题分析

首先，打印this时，发现它是一个大对象，但直接打印this.STR却无法获取到data中的数据。这是因为在当前对象下没有STR这个属性，而STR在date中。
为了解决这个问题，需要将date中的数据拷贝一份到外部的大对象中，这样就可以通过this.STR访问到data中的数据了。
但是，仅仅拷贝数据还不够，当data中的数据发生变化时，外部的拷贝也需要跟着变化，这就需要用到双向绑定原理，即Object.defineProperty。

三、解决方案

定义一个方法，实现以下两个功能：
- 给新的大对象添加来自于date中的属性。
- 保持date中的属性值和视图对象的属性值双向同步，即劫持数据变化，当date中的数据变化时，外部的拷贝也跟着变化。

以下是实现这个方法的 JavaScript 代码：

function dataHijacking() {
  // 遍历 date 中的属性，将其添加到大对象中，并实现双向绑定
  for (let k in this.options.data) {
    Object.defineProperty(this, k, {
      get() {
        return this.options.data[k];
      },
      set(value) {
        this.options.data[k] = value;
      },
    });
  }
}

在需要的地方调用这个方法，例如在 Vue 的实例化过程中：

new Vue({
  el: '#app',
  data: {
    STR: '123',
    B: '456',
  },
  created() {
    dataHijacking.call(this);
  },
});

四、问题延伸

虽然实现了数据的双向绑定，但是当数据变化时，视图并没有自动更新。这是因为还没有执行innerText、innerHTML或textContent等操作来更新 DOM。下节课将重点解决这个问题，让视图能够随着数据的变化而自动更新。

通过以上分析和解决方案，我们对 Vue2 中的 data 劫持有了更深入的理解。在实际开发中，了解 Vue 的源码原理可以帮助我们更好地使用 Vue 框架，提高开发效率和代码质量。

如果vue3也有的话把vue3带上

Vue2 与 Vue3 中的数据劫持

在 Vue2 和 Vue3 中，数据劫持都是实现响应式系统的关键技术之一。本文将结合上述视频字幕内容，详细介绍 Vue2 中数据劫持的实现方式，并简单提及 Vue3 中的相关变化。

一、Vue2 中的数据劫持

（一）问题引出

在视频中，作者首先提出了在 Vue2 中的一个矛盾点。当打印this时，它是一个大对象，但直接打印this.STR却无法获取到data中的数据。这是因为在当前对象下没有STR这个属性，而STR在data中。

（二）解决方案

为了解决这个问题，需要将data中的数据拷贝一份到外部的大对象中，这样就可以通过this.STR访问到data中的数据了。
但是，仅仅拷贝数据还不够，当data中的数据发生变化时，外部的拷贝也需要跟着变化，这就需要用到双向绑定原理，即Object.defineProperty。

作者通过定义一个方法dataHijacking来实现这个功能。该方法遍历date中的属性，将其添加到大对象中，并通过Object.defineProperty实现双向绑定。当获取属性值时，返回this.options.data[k]；当设置属性值时，更新this.options.data[k]。

以下是实现这个方法的 JavaScript 代码：

function dataHijacking() {
  // 遍历 date 中的属性，将其添加到大对象中，并实现双向绑定
  for (let k in this.options.data) {
    Object.defineProperty(this, k, {
      get() {
        return this.options.data[k];
      },
      set(value) {
        this.options.data[k] = value;
      },
    });
  }
}

在 Vue 的实例化过程中调用这个方法：

new Vue({
  el: '#app',
  data: {
    STR: '123',
    B: '456',
  },
  created() {
    dataHijacking.call(this);
  },
});

二、Vue3 中的数据劫持

在 Vue3 中，数据劫持的实现方式与 Vue2 有所不同。Vue3 使用了 ES6 的Proxy来实现数据劫持，相比Object.defineProperty，Proxy具有以下优势：

Proxy可以直接代理整个对象，而Object.defineProperty只能代理单个属性。
Proxy可以拦截更多的操作，如delete、in等。
Proxy的性能更好，尤其是在处理大量数据时。

以下是一个使用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);

通过以上对比可以看出，Vue3 在数据劫持方面进行了优化，提高了性能和灵活性。

总之，了解 Vue2 和 Vue3 中的数据劫持实现方式，可以帮助我们更好地理解 Vue 的响应式系统，从而在开发中更加高效地使用 Vue 框架。