Vue中如何使用computed监听响应式数据并更新DOM

Vue是一款流行的JavaScript框架，它结合了响应式数据绑定和组件化构建，简化了前端开发。其中computed是Vue响应式数据的一种使用方式，可以根据依赖的数据动态生成计算属性，实现数据的转换和展现，并自动缓存中间结果以提高性能。本文将介绍如何使用computed监听响应式数据并更新DOM。

一、computed的基本用法

在Vue中，我们可以使用computed属性来定义一个计算属性。其语法格式为：

computed: {
  propertyName: function () { /*计算并返回属性的值*/ }
}

其中propertyName是计算属性的名称，function()是具体的计算方法。我们可以在该方法中访问Vue实例的data属性，并计算出属性的值，例如：

<template>
  <div>
    <p>商品单价：{{price}}元</p>
    <p>购买数量：{{amount}}件</p>
    <p>总价：{{totalPrice}}元</p> 
  </div>
</template>

<script>
export default {
  data () {
    return {
      price: 2, // 商品单价
      amount: 3 // 购买数量
    }
  },
  computed: {
    totalPrice: function () {
      return this.price * this.amount // 总价
    }
  }
}
</script>

在该例子中，我们定义了一个计算属性totalPrice，它依赖了price和amount两个响应式数据，每当它们的值发生变化时，totalPrice的值也会动态更新。我们在模板中使用{{totalPrice}}来展示这个计算属性的值，并不需要自己手动更新DOM，Vue会自动执行计算属性的方法，并更新对应的DOM元素。

二、computed的依赖缓存

computed属性的另一个重要特性是依赖缓存。这意味着只要计算属性依赖的响应式数据没有发生改变，那么计算属性也不会重新计算，而是直接返回上一次的结果。这样可以避免不必要的计算，提高程序的运行效率。

例如，我们在上面的例子中多次读取计算属性totalPrice，例如：

<template>
  <div>
    <p>商品单价：{{price}}元</p>
    <p>购买数量：{{amount}}件</p>
    <p>总价1：{{totalPrice}}元</p>
    <p>总价2：{{totalPrice}}元</p>
  </div>
</template>

可以看到，我们读取了两次totalPrice。但是只有当price或amount发生变化时，totalPrice才会重新计算，这样就有效地避免了重复的计算。

三、computed的getter和setter

除了上面介绍的基本用法，computed还支持getter和setter的定义方式。这意味着我们可以在计算属性的赋值操作中执行额外的操作，例如数据校验、数据格式化等。

computed的getter和setter语法格式如下：

computed: {
  propertyName: {
    get: function () {},
    set: function () {}
  }
}

其中propertyName是计算属性的名称，在get函数中返回计算属性的值，而在set函数中对计算属性的值进行赋值操作。

例如，我们在上面的例子中使用setter来修改product单价，但是限制单价不能小于0。

<template>
  <div>
    <p>商品单价：{{price}}元</p>
    <p>购买数量：{{amount}}件</p>
    <p>总价：{{totalPrice}}元</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      _price: 2, // 商品原始价格(不对外暴露)
      amount: 3 // 购买数量
    }
  },
  computed: {
    price: {
      get: function () {
        return this._price // 返回商品价格
      },
      set: function (value) {
        if (value < 0) {
          console.log("商品单价不能小于0")
          return
        }
        this._price = value // 修改商品价格
      }
    },
    totalPrice: function () {
      return this.price * this.amount // 总价
    }
  }
}
</script>

在该例子中，我们使用了一个下划线前缀的_price响应式数据来保存真正的商品单价，而将price定义为一个具有getter和setter操作的计算属性。在setter中我们判断了用户输入的price是否为负数，如果是则输出错误信息，否则将其赋值给_price。

总结

computed是Vue中非常方便的一种响应式数据使用方式，它能够根据依赖的响应式数据动态生成计算属性，并自动缓存中间结果以提高性能。我们可以在计算属性的getter和setter中执行各种数据操作，例如数据格式化、数据校验等。这样能够简化代码，提高开发效率。