vue2怎么写computed属性

在Vue 2中，computed属性是基于它们的响应式依赖进行缓存的计算属性。只有当计算属性依赖的响应式数据发生变化时，计算属性才会重新计算。以下是如何在Vue 2中定义computed属性的步骤：

1. 定义响应式数据：首先，你需要在组件的data函数中定义一些响应式数据。

2. 创建计算属性：在组件的computed选项中定义计算属性。

3. 使用计算属性：在模板或其他计算属性中使用计算属性。

下面是一个简单的示例，展示如何在Vue 2中使用computed属性：

<template><div><p>Price: {{ price }}</p><p>Tax: {{ tax }}</p><p>Total Price: {{ totalPrice }}</p></div>
</template><script>
export default {data() {return {price: 100, // 商品价格taxRate: 0.1 // 税率};},computed: {// 计算属性 'tax'，依赖于 'price' 和 'taxRate'tax() {return this.price * this.taxRate;},// 计算属性 'totalPrice'，依赖于 'price' 和 'tax'totalPrice() {return this.price + this.tax;}}
};
</script>

在这个例子中：

• price 和 taxRate 是响应式数据，它们在data函数中被定义。
• tax 和 totalPrice 是计算属性，它们在computed选项中被定义。
• tax 计算属性依赖于price和taxRate。
• totalPrice 计算属性依赖于price和tax。

当你更改price或taxRate的值时，tax和totalPrice会自动更新，因为它们是基于这些响应式数据计算得出的。

记住，计算属性是基于它们的依赖进行缓存的，所以只有当依赖发生变化时，计算属性的值才会重新计算。这使得计算属性在性能上比方法更优，尤其是在模板中频繁使用时。