vue是一款流行的javascript框架，它结合了响应式数据绑定和组件化构建，简化了前端开发。其中computed是vue响应式数据的一种使用方式，可以根据依赖的数据动态生成计算属性，实现数据的转换和展现，并自动缓存中间结果以提高性能。本文将介绍如何使用computed监听响应式数据并更新dom。
一、computed的基本用法
在Vue中，我们可以使用computed属性来定义一个计算属性。其语法格式为：
computed: {
propertyName: function () { /*计算并返回属性的值*/ }
}其中propertyName是计算属性的名称，function()是具体的计算方法。我们可以在该方法中访问Vue实例的data属性，并计算出属性的值，例如：
在该例子中，我们定义了一个计算属性totalPrice，它依赖了price和amount两个响应式数据，每当它们的值发生变化时，totalPrice的值也会动态更新。我们在模板中使用{{totalPrice}}来展示这个计算属性的值，并不需要自己手动更新DOM，Vue会自动执行计算属性的方法，并更新对应的DOM元素。
二、computed的依赖缓存
computed属性的另一个重要特性是依赖缓存。这意味着只要计算属性依赖的响应式数据没有发生改变，那么计算属性也不会重新计算，而是直接返回上一次的结果。这样可以避免不必要的计算，提高程序的运行效率。
例如，我们在上面的例子中多次读取计算属性totalPrice，例如：
可以看到，我们读取了两次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。
在该例子中，我们使用了一个下划线前缀的_price响应式数据来保存真正的商品单价，而将price定义为一个具有getter和setter操作的计算属性。在setter中我们判断了用户输入的price是否为负数，如果是则输出错误信息，否则将其赋值给_price。
总结
computed是Vue中非常方便的一种响应式数据使用方式，它能够根据依赖的响应式数据动态生成计算属性，并自动缓存中间结果以提高性能。我们可以在计算属性的getter和setter中执行各种数据操作，例如数据格式化、数据校验等。这样能够简化代码，提高开发效率。
