计算属性，侦听属性，方法区别及例子
计算属性、监听属性和方法都是Vue中的重要概念，但它们在功能和使用上有所不同：
-
计算属性：计算属性是基于依赖进行缓存的属性，可以根据其他数据动态计算得出。计算属性会根据依赖自动更新，但是只有在其所依赖的数据发生改变时才会更新。计算属性的特点是具有缓存机制，计算结果会被缓存下来，下一次计算如果依赖的数据没有发生变化，则直接从缓存中读取结果。适用于需要多次使用同一计算结果的场景。
-
监听属性：监听属性是用来监听一个数据变化而触发的回调函数。监听属性是通过 watch 方法实现的，可以监听一个或多个数据的变化，当数据发生变化时，会执行 watch 中定义的回调函数，从而执行一些自定义的业务逻辑。
-
方法：方法是一段定义在 Vue 实例中的 JavaScript 代码片段，它是响应式系统中能够触发重新渲染的最基本的方式。当我们需要响应用户的交互行为时，可以使用方法。与计算属性和监听属性不同，方法不具有缓存机制，每次执行都会重新计算。
总的来说，计算属性适用于需要多次使用同一计算结果的场景，监听属性适用于需要监听数据变化并执行一些自定义业务逻辑的场景，方法则适用于需要响应用户交互行为并触发重新渲染的场景。
以下是Vue计算属性、监听属性和方法的区别的例子：
- 计算属性：
<template><div><p>商品价格：{{price}}</p><p>商品折后价格：{{discountPrice}}</p></div>
</template><script>
export default {data() {return {price: 100, // 商品价格discount: 0.8, // 折扣};},computed: {discountPrice() {return this.price * this.discount;},},
};
</script>
在上面的例子中，通过定义一个计算属性discountPrice，根据商品价格和折扣计算出折后价，这个计算结果会被缓存下来，下一次计算如果依赖的数据没有发生变化，则直接从缓存中读取结果。这样做的好处是可以避免重复计算，提高计算效率。
- 监听属性：
<template><div><p>当前商品数量：{{count}}</p></div>
</template><script>
export default {data() {return {count: 0, // 商品数量maxCount: 5, // 库存上限};},watch: {count(newVal) {if (newVal > this.maxCount) {this.count = this.maxCount;}},},
};
</script>
在上面的例子中，通过定义一个监听属性count，当商品数量发生变化时，会执行watch方法中的回调函数，判断当前商品数量是否超过库存上限，如果超过则将商品数量设置为库存上限。
- 方法：
<template><div><button @click="changeCount(1)">加1</button><button @click="changeCount(-1)">减1</button><p>当前商品数量：{{count}}</p></div>
</template><script>
export default {data() {return {count: 0, // 商品数量};},methods: {changeCount(num) {this.count += num;},},
};
</script>
在上面的例子中，定义一个方法changeCount，用于响应用户的点击事件，实现商品数量加减的功能。每次点击按钮时，都会重新计算商品数量，并触发重新渲染页面。
以下是Vue计算属性、监听属性和方法的区别的例子：
- 计算属性：
<template><div><p>商品价格：{{price}}</p><p>商品折后价格：{{discountPrice}}</p></div>
</template><script>
export default {data() {return {price: 100, // 商品价格discount: 0.8, // 折扣};},computed: {discountPrice() {return this.price * this.discount;},},
};
</script>
在上面的例子中，通过定义一个计算属性discountPrice，根据商品价格和折扣计算出折后价，这个计算结果会被缓存下来，下一次计算如果依赖的数据没有发生变化，则直接从缓存中读取结果。这样做的好处是可以避免重复计算，提高计算效率。
- 监听属性：
<template><div><p>当前商品数量：{{count}}</p></div>
</template><script>
export default {data() {return {count: 0, // 商品数量maxCount: 5, // 库存上限};},watch: {count(newVal) {if (newVal > this.maxCount) {this.count = this.maxCount;}},},
};
</script>
在上面的例子中，通过定义一个监听属性count，当商品数量发生变化时，会执行watch方法中的回调函数，判断当前商品数量是否超过库存上限，如果超过则将商品数量设置为库存上限。
- 方法：
<template><div><button @click="changeCount(1)">加1</button><button @click="changeCount(-1)">减1</button><p>当前商品数量：{{count}}</p></div>
</template><script>
export default {data() {return {count: 0, // 商品数量};},methods: {changeCount(num) {this.count += num;},},
};
</script>
在上面的例子中，定义一个方法changeCount，用于响应用户的点击事件，实现商品数量加减的功能。每次点击按钮时，都会重新计算商品数量，并触发重新渲染页面。