vue3 计算属性

Vue3 的计算属性和 Vue2 的计算属性基本相同，都是根据已有的数据计算出新的值。在 Vue3 中，计算属性的定义方式与 Vue2 相同，但是需要使用 computed 函数来创建计算属性。

创建计算属性的方法如下：

import { computed } from 'vue'

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    }
  }
}

在这个例子中，我们定义了两个属性 firstName 和 lastName，然后定义了一个计算属性 fullName。fullName 是根据 firstName 和 lastName 计算出来的，所以它是一个只读属性，不能被直接修改。

注意：Vue3 中的 computed 函数和 Vue2 中的 computed 属性是不同的，Vue3 的 computed 函数是一个工厂函数，用于创建计算属性，而 Vue2 的 computed 属性是一个对象，用于定义计算属性。

我们还可以使用 watchEffect 来创建计算属性。watchEffect 函数会自动追踪其内部使用的所有响应式数据，并在这些数据发生变化时重新计算计算属性。下面是一个使用 watchEffect 创建计算属性的例子：

import { reactive, watchEffect } from 'vue'

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

    const fullName = computed(() => {
      return `${data.firstName} ${data.lastName}`
    })

    watchEffect(() => {
      console.log(fullName.value)
    })

    return {
      data,
      fullName
    }
  }
}

在这个例子中，我们使用 reactive 函数创建一个响应式对象 data，然后定义一个计算属性 fullName，接着使用 watchEffect 函数监听 fullName 的变化，并在控制台输出 fullName 的值。最后，我们将 data 和 fullName 返回，以便在模板中使用。