Vue 3 计算

在Vue 3中，计算是指在模板中定义一个计算结果依赖于一个或多个响应式变量的值。计算可以使得模板更加简洁和可读，并且也有助于在组件中重用逻辑。

基本用法

在Vue 3中，计算使用computed函数来实现。你可以在组件定义中使用computed属性来定义和使用计算。例如，假设我们有一个message变量和一个computed属性：

<script>
import { reactive, computed } from 'vue'

export default {
  setup() {
    const state = reactive({
      message: 'Hello World'
    })

    const reversedMessage = computed(() => {
      return state.message.split('').reverse().join('')
    })

    return {
      state,
      reversedMessage
    }
  }
}
</script>

<template>
  <div>
    <p>{{ state.message }}</p>
    <p>{{ reversedMessage }}</p>
  </div>
</template>

在上面的代码中，我们定义了一个名为reversedMessage的计算属性，它依赖于message变量。计算属性是一个函数，它会在它依赖的任何响应式变量发生更改时重新计算它的值。在模板中，我们可以通过{{}}语法访问state变量和reversedMessage计算属性。

计算 vs 方法

在Vue 3中，你可以通过methods属性声明方法，并在模板中使用它们。而计算和方法很像，它们都是一个函数，它们可以使用组件定义中的任何响应式变量。那么两者有什么区别呢？

计算有一个缓存机制，当计算依赖的响应式变量没有发生更改时，它们不会被重新计算。当计算属性被多次使用时，它们只会被计算一次，而后续的调用将直接返回缓存结果，提高了性能。

相反，方法在每次调用时都会重新计算，不会有缓存机制。如果你需要在模板中多次使用一个计算结果，那么使用计算属性是更好的选择。

计算 Setter

除了只读计算之外，我们还可以定义一个带有setter的计算，它可以让我们在模板中使用v-model语法来更新计算的值。下面是一个例子：

<script>
import { reactive, computed } from 'vue'

export default {
  setup() {
    const state = reactive({
      firstName: 'John',
      lastName: 'Doe'
    })

    const fullName = computed({
      get: () => `${state.firstName} ${state.lastName}`,
      set: (value) => {
        const [firstName, lastName] = value.split(' ')
        state.firstName = firstName
        state.lastName = lastName
      }
    })

    return {
      state,
      fullName
    }
  }
}
</script>

<template>
  <div>
    <input v-model="fullName">
  </div>
</template>

在上面的代码中，我们定义了一个名为fullName的计算属性，并在它的定义中使用了一个setter函数。该setter函数会在用户通过输入框更改值时调用，并更新firstName和lastName的值。

小结

Vue 3中的计算使得我们可以定义简单的函数来依赖和重用响应式变量，它们还避免了重复计算，提高了性能。我们还可以定义一个带有setter的计算，使得我们可以在模板中使用v-model语法来更新计算的值。