在Vue.js中computed的用法：在表达式自动计算值并返回结果

computed的用法
在Vue.js中，`computed` 是一个非常有用的功能，它允许开发者根据模板中的表达式自动计算值并返回结果。`computed` 函数与`methods` 方法不同，因为它不仅可以调用已定义的方法，还可以直接从数据属性中获取值。更重要的是，`computed` 依赖的属性值发生变化时才会重新计算，这有助于减少重复计算，提高代码的性能和可读性。1

`computed` 函数具有缓存特性，这意味着如果依赖的数据没有发生变化，`computed` 函数会直接返回缓存的结果，而不是重新计算。例如，如果`computed` 方法依赖的数据没有发生变化，那么`computed` 方法会直接返回缓存的结果，而不是重新计算。这样可以节省重复的计算，提升代码的性能。

`computed` 函数可以依赖其他属性，这意味着计算结果不仅基于当前组件的数据属性，还可以基于其他组件的数据属性、`computed` 属性、以及`props` 属性等。Vue.js会自动追踪这些依赖关系，并在依赖项发生变化时重新计算`computed` 函数的结果。

`computed` 函数的写法在Vue 2和Vue 3中有所不同。在Vue 2中，`computed` 函数的写法是：

```javascript

computed: {

sum: function () {

return this.num1 + this.num2;

}

}

```

而在Vue 3中，可以使用组合式API来写`computed` 函数，例如：

```javascript

import { ref, computed } from "vue";

export default {

setup() {

const num1 = ref(1);

const num2 = ref(1);

let sum = computed(() => num1.value + num2.value);

}

};

```

`computed` 函数还可以提供`getter` 和`setter`。