computed计算属性vue3

### Vue3 中 `computed` 计算属性的使用方法

在 Vue3 中，`computed` 属性用于定义基于其他响应式数据派生的状态。这些状态会自动跟踪其依赖项的变化并重新计算结果。这使得代码更加简洁和易于维护。

#### 基本语法

可以像下面这样简单地定义一个只读的计算属性：

import { defineComponent, computed } from 'vue';

export default defineComponent({
  data() {
    return {
      message: "Hello"
    };
  },
  setup(props) {
    const reversedMessage = computed(() => {
      return props.message.split('').reverse().join('');
    });
    
    return {
      reversedMessage
    }
  }
});

上述例子展示了如何创建一个名为 `reversedMessage` 的计算属性来反转字符串消息[^1]。

对于具有 getter 和 setter 双向绑定功能的情况，则可以通过对象形式指定两个函数:

setup(props) {
  let count = ref(0);

  const plusOne = computed({
    get: () => count.value + 1,
    set: (val) => {
      count.value = val - 1;
    }
  });

  return {
    count,
    plusOne
  }
}

这段代码实现了每当修改 `plusOne` 的时候都会相应调整原始变量 `count` 的值[^2]。

#### 缓存特性

值得注意的是，只要被监视的数据源未发生改变，计算属性的结果就会从内部缓存中获取而不是每次都执行求值逻辑。这一特点有助于提高应用性能，尤其是在复杂场景下频繁访问同一表达式的场合[^4]。