vue中computed 的用法

在Vue中，computed是一种计算属性，用于根据已有的数据计算出新的属性值。computed属性是基于它们的依赖进行缓存的，只有当依赖发生变化时，才会重新计算。这样可以避免不必要的计算，提高性能。

使用computed属性的步骤如下：
1. 在Vue组件中定义computed属性，可以是一个函数或者一个对象。
2. 在computed属性中定义需要计算的属性，可以使用已有的data属性或其他computed属性。
3. 在模板中使用computed属性，就像使用普通的data属性一样。

下面是一个示例：

<template>
  <div>
    <p>原始数据：{{ originalData }}</p>
    <p>计算属性：{{ computedProperty }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalData: 10
    };
  },
  computed: {
    computedProperty() {
      // 在这里定义计算属性
      return this.originalData * 2;
    }
  }
};
</script>

在上面的示例中，我们定义了一个原始数据originalData为10，并在computed属性中定义了一个计算属性computedProperty，它的值是originalData乘以2。在模板中，我们可以直接使用computedProperty来显示计算后的结果。