Vue.js 监听 Vue 数据元素的变化并触发函数

在本文中，我们将介绍如何在Vue.js中监听数据元素的变化并触发相应的函数。Vue.js是一个流行的JavaScript框架，用于构建用户界面和单页面应用程序。通过Vue的响应式机制，我们可以很方便地监测数据的变化，并在数据变化时执行相应的操作。

阅读更多：Vue.js 教程

Vue的响应式原理

Vue.js的响应式原理是基于ES6的Proxy对象实现的。当创建Vue实例时，Vue会对data对象进行递归遍历，将对象的属性转化为getter/setter，并且在数据被访问或修改时触发对应的函数。这样就实现了当数据发生变化时，相关的函数可以得到自动调用。

监听数据元素的变化

在Vue.js中，我们可以使用watch属性来监听数据元素的变化。watch属性是一个对象，可以将需要监听的数据元素作为key，将对应的函数作为value。当被监听的数据发生变化时，对应的函数就会被触发。

下面是一个例子，我们创建了一个Vue实例，并在其中定义了一个data元素message：

new Vue({
  data: {
    message: 'Hello Vue.js!'
  },
  watch: {
    message(newVal, oldVal) {
      console.log('Message changed from ' + oldVal + ' to ' + newVal);
    }
  }
});

在上面的例子中，我们定义了一个watch对象，并监听了message数据元素。当message发生变化时，对应的函数会被触发，并打印出新值和旧值。

除了可以监听数据元素外，我们还可以使用computed属性来监听数据元素的变化。computed属性与watch类似，但其可以定义一个计算属性，而不仅仅是观察一个特定的数据元素。当与计算属性相关的数据发生变化时，计算属性会自动更新。

new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  },
  watch: {
    fullName(newVal, oldVal) {
      console.log('Full name changed from ' + oldVal + ' to ' + newVal);
    }
  }
});

在上面的例子中，我们定义了一个computed属性fullName，它会根据firstName和lastName的值计算出一个完整的名字。我们还定义了一个watch对象，来观察fullName的变化。当fullName发生变化时，对应的函数会被触发，并打印出新值和旧值。

示例说明

假设我们有一个购物车应用，当用户添加商品到购物车时，我们希望能够自动更新购物车的总金额。我们可以通过监听购物车商品数量的变化来实现这个功能。

首先，我们在Vue实例中定义两个数据元素cart和totalAmount，分别表示购物车的内容和总金额：

new Vue({
  data: {
    cart: [],
    totalAmount: 0
  },
  watch: {
    cart: {
      handler(newCart, oldCart) {
        this.calculateTotalAmount();
      },
      deep: true
    }
  },
  methods: {
    calculateTotalAmount() {
      this.totalAmount = 0;
      for (let item of this.cart) {
        this.totalAmount += item.price * item.quantity;
      }
    }
  }
});

在上面的例子中，我们定义了一个watch对象来监听cart数据元素的变化，并在变化时调用calculateTotalAmount方法来更新总金额。我们通过设置deep: true来监听cart数据元素的深层变化，这样即使购物车中的商品数量发生变化，也能被监听到。

接下来，我们可以在页面上展示购物车的内容和总金额：

<div id="app">
  <ul>
    <li v-for="item in cart">{{ item.name }}: {{ item.price }} x {{ item.quantity }}</li>
  </ul>
  <p>Total Amount: {{ totalAmount }}</p>
</div>

在上面的例子中，我们使用Vue的指令v-for来遍历购物车中的商品，并展示每个商品的名称、单价和数量。我们还使用插值表达式{{ totalAmount }}来展示购物车的总金额。

当用户向购物车中添加或删除商品时，cart数据元素会发生变化，并触发watch对象中定义的函数来更新总金额。用户可以实时看到购物车中商品数量和总金额的变化。