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
}
.........................................................