当前位置：首页 > news >正文

大白话Vue 双向数据绑定的实现原理与数据劫持技术

news 来源：原创 2025/5/15 19:34:15

咱们来好好唠唠Vue双向数据绑定的实现原理和数据劫持技术，我会用特别通俗的例子给你讲明白。

啥是双向数据绑定

你可以把双向数据绑定想象成一个神奇的“同步器”。在网页里有两部分，一部分是数据，就像你记在小本本上的信息；另一部分是页面上显示的内容，就像展示在黑板上的信息。双向数据绑定就是让小本本上的信息和黑板上的信息始终保持一致。不管你是改了小本本上的信息，还是改了黑板上的信息，另一处都会马上跟着变。

数据劫持技术是咋回事

数据劫持就像是在数据的“家门口”安排了一个小保镖。当有人想要访问或者修改这个数据的时候，小保镖都会知道，并且可以做出相应的动作。在Vue里，用的是 Object.defineProperty() （Vue 2）和 Proxy （Vue 3）这两个工具来当小保镖。

Vue 2 用 `Object.defineProperty()` 实现数据劫持

咱们以一个简单的对象为例，这个对象就像一个小房子，里面有不同的房间（属性）。

let person = {
    name: '张三',
    age: 20
};

现在咱们用 Object.defineProperty() 给这个对象的属性安排小保镖：

let newPerson = {};
Object.defineProperty(newPerson, 'name', {
    get: function() {
        console.log('有人要读取 name 属性啦');
        return person.name;
    },
    set: function(newValue) {
        console.log('有人要修改 name 属性啦，新的值是 ' + newValue);
        person.name = newValue;
    }
});

这里的 get 就像是小保镖在有人来访问 name 属性的时候，会喊一嗓子“有人要读取啦”，然后把实际的值给出去；set 就像是小保镖在有人要修改 name 属性的时候，会喊一嗓子“有人要修改啦”，然后把新的值存进去。

Vue 3 用 `Proxy` 实现数据劫持

Proxy 就像是一个更厉害的大保镖，它可以一次性管整个对象。

let person = {
    name: '张三',
    age: 20
};

let proxyPerson = new Proxy(person, {
    get: function(target, property) {
        console.log('有人要读取 ' + property + ' 属性啦');
        return target[property];
    },
    set: function(target, property, newValue) {
        console.log('有人要修改 ' + property + ' 属性啦，新的值是 ' + newValue);
        target[property] = newValue;
        return true;
    }
});

这里的 Proxy 会监听整个 person 对象，不管是访问还是修改对象的任何属性，它都能知道。

Vue 双向数据绑定的实现原理

结合上面的数据劫持技术，Vue 实现双向数据绑定主要有这么几个步骤：

1. 数据劫持

Vue 会遍历你定义的数据对象，用 Object.defineProperty() （Vue 2）或者 Proxy （Vue 3）给每个属性或者整个对象安排小保镖，这样就能监听数据的访问和修改。

2. 发布 - 订阅模式

这就像是一个消息通知系统。当数据发生变化时，小保镖（数据劫持）会发出一个消息，告诉所有关注这个数据的地方（比如页面上显示这个数据的区域），数据变啦，你们赶紧更新。而页面上关注这个数据的地方就像订阅了这个消息的人，收到消息后就会更新自己显示的内容。

3. 视图更新

当页面上的输入框等元素发生变化时，Vue 会捕捉到这个变化，然后更新对应的数据。同时，因为数据被劫持了，数据的变化又会触发消息通知，让页面上其他显示这个数据的地方也跟着更新，这样就实现了双向数据绑定。

比如说，页面上有一个输入框显示着 person.name 的值，当你在输入框里修改了名字，Vue 会先更新 person.name 这个数据，然后数据劫持检测到数据变了，就通知页面上所有显示 person.name 的地方更新显示新的名字，这样就保证了数据和页面显示的同步。

双向数据绑定在 Vue 中有哪些优缺点？

双向数据绑定在 Vue 里就像是一把双刃剑，既有优点能让开发变得轻松，也存在一些缺点需要我们留意。下面咱用大白话详细说说它的优缺点。

优点

1. 代码简洁，开发高效

在 Vue 里使用双向数据绑定，能让代码变得特别简洁。你不用手动去写很多代码来实现数据和视图的同步更新。比如说，有一个输入框和一个数据变量绑定了，当你在输入框里输入内容时，数据变量会自动更新；反过来，当数据变量的值改变时，输入框里显示的内容也会自动更新。这就好比你有一个神奇的魔法，让数据和视图自己就能保持一致，大大节省了开发时间和精力。

<template>
  <input v-model="message">
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

在这个例子中，通过 v-model 指令实现了双向数据绑定，你不需要额外写代码来处理输入框和 message 变量之间的同步。