Vue3计算属性和异步计算属性方式

Vue3中计算属性和异步计算属性的使用方式与Vue2有所不同。接下来将详细讲解Vue3计算属性和异步计算属性的使用方式，并附上两个示例说明。

Vue3计算属性

Vue3中，计算属性仍然是一个非常重要的概念，主要是为了方便我们处理模板中的复杂计算逻辑。Vue3计算属性的使用方法与Vue2基本相同。

基本使用

在Vue3中，可以通过computed选项来定义计算属性，比如我们想要计算一个数组的长度，在模板中直接使用计算属性即可。

<template>
  <div>
    <p v-if="itemsLength">当前列表有{{ itemsLength }}项数据</p>
    <p v-else>当前列表没有数据</p>
  </div>
</template>

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

export default {
  setup() {
    const state = reactive({
      items: [1, 2, 3, 4, 5]
    })

    const itemsLength = computed(() => {
      return state.items.length
    })

    return {
      itemsLength
    }
  }
}
</script>

在上面的代码中，我们使用了Vue3提供的reactive将items对象转化为响应式对象，使用computed函数定义了一个计算属性itemsLength，并返回其值。在模板中，我们直接使用计算属性的值来判断列表是否为空。

setter方法

在Vue3中，计算属性可以设置setter方法，当计算属性的值变化时，调用setter方法。

<template>
  <div>
    <p>{{ fullName }}</p>
    <input v-model="firstName" />
    <input v-model="lastName" />
  </div>
</template>

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

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

    const fullName = computed(
      () => `${state.firstName} ${state.lastName}`,
      (value) => {
        const names = value.split(' ')
        state.firstName = names[0]
        state.lastName = names[1]
      }
    )

    return {
      firstName: state.firstName,
      lastName: state.lastName,
      fullName
    }
  }
}
</script>

在上面的代码中，我们定义了一个计算属性fullName用于拼接firstName和lastName，并设置了setter方法来处理输入框中的数据。

Vue3异步计算属性

异步计算属性指的是计算属性需要异步获取数据的场景，Vue3通过watchEffect和markRaw函数提供了异步计算属性的支持，下面来一一介绍。

watchEffect实现异步计算属性

在Vue3中，watchEffect用于监听响应式数据变化，并执行相应的回调函数，该函数可以返回计算属性的值。

<template>
  <div>
    <p>{{ asyncName }}</p>
  </div>
</template>

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

export default {
  setup() {
    const state = reactive({
      name: 'John',
      isLoading: false
    })

    const asyncName = watchEffect(async () => {
      state.isLoading = true
      const res = await fetch('https://api.example.com/name')
      const data = await res.json()
      state.isLoading = false
      return data.name
    })

    return {
      asyncName,
      isLoading: state.isLoading
    }
  }
}
</script>

在上面的代码中，我们用watchEffect函数定义了一个异步计算属性asyncName，并根据isLoading状态判断是否显示loading状态。

markRaw禁用响应式

有时候一个值不需要响应式的功能，比如一个常量或者由服务器渲染的内容，Vue3提供了markRaw函数来禁用响应式。

<template>
  <div>
    <p>{{ serverHtml }}</p>
  </div>
</template>

<script>
import { markRaw } from 'vue'

export default {
  setup() {
    const serverHtml = markRaw('<p>Hello World</p>')

    return {
      serverHtml
    }
  }
}
</script>

在上面的代码中，我们使用了markRaw函数来禁用serverHtml对象的响应式，如果我们不禁用响应式，会在控制台输出警告信息。

至此，Vue3计算属性和异步计算属性的使用方式就介绍完了。