剖析 Vue.js 2 的双向数据绑定：直观揭秘其工作原理

前端

2023-11-29 14:42:44

Vue.js 的双向数据绑定：无缝的数据同步

在前端开发世界中，Vue.js 凭借其简洁的语法、出色的性能和直观的用户体验而备受推崇。它的核心特性之一是双向数据绑定，它使数据和视图之间建立了无缝的连接，让开发者专注于业务逻辑，而无需担心繁琐的手动数据更新。

数据劫持：在幕后的秘密

Vue.js 的双向数据绑定是通过一种称为“数据劫持”的技术实现的。当您将数据对象声明为 Vue 实例的一部分时，Vue 会创建一个该对象的代理。这个代理对象负责监听原始对象的属性变化。

例如，假设我们有一个 Vue 组件，其中有一个名为 message 的数据属性。当您将 message 的值更改为“Hello Vue!”时，代理对象会检测到此更改并触发响应。

发布者-订阅者模式：传播更改

数据劫持本身并不能实现双向数据绑定。Vue 使用了发布者-订阅者模式来广播更改。当代理对象的属性发生变化时，Vue 会发布一个事件。任何订阅此事件的组件（包括视图）都会收到通知并相应更新。

回到我们的 message 示例，当您更改 message 的值时，Vue 会发布一个事件。模板中绑定 message 属性的元素将订阅此事件，并在收到事件通知后更新显示的文本。

直观的示例：动态购物车

为了更好地理解双向数据绑定，让我们构建一个简单的购物车应用程序。当用户向购物车添加或删除商品时，我们希望视图中显示的商品列表与底层数据保持同步。

使用 Vue.js，您可以轻松地实现这一点：

<template>
  <ul>
    <li v-for="item in cart" :key="item.id">{{ item.name }}</li>
  </ul>
  <button @click="addItem">添加商品</button>
</template>

<script>
export default {
  data() {
    return {
      cart: []
    }
  },
  methods: {
    addItem() {
      this.cart.push({ id: Math.random(), name: '新商品' })
    }
  }
}
</script>