计算属性和监听属性的区别

Vue.js中的计算属性和监听属性都是用来处理数据的，但它们有不同的作用。

计算属性是在处理模板中需要进行复杂逻辑的数据时使用的，它会返回一个新的计算结果，并且只有在相关数据发生改变时才会重新计算。计算属性是基于依赖缓存的，只有当它依赖的数据发生了变化才会重新计算。

示例：

在上面的示例中，我们定义了一个计算属性 `salePrice`，它根据 `price` 和 `discount` 的值来计算打折后的价格。

监听属性是在当数据发生变化时需要执行一些额外操作时使用的，它可以监听数据的变化并在数据变化时触发一个函数。

示例：

在上面的示例中，我们使用监听属性 `watch` 监听了 `count` 数据的变化，并在每次 `count` 变化时输出变化的信息。

需要注意的是，计算属性和监听属性都只是对数据的处理和监听，不会改变原始数据的值。