Vue3浅谈：Vue3计算属性

在Vue3中，计算属性是基于响应式依赖进行缓存的。与方法不同，计算属性是基于它们的响应式依赖进制缓存的。计算属性只有在相关依赖发生变化时才会重新求值。

1. 基本使用

<template>
  <div>{{ reversedMessage }}</div>
</template>
 
<script>
import { ref, computed } from 'vue'
 
export default {
  setup() {
    const message = ref('Hello')
 
    const reversedMessage = computed(() => message.value.split('').reverse().join(''))
 
    return {
      message,
      reversedMessage
    }
  }
}
</script>

在这个例子中，reversedMessage是一个计算属性，它的返回值是message的反转字符串。只有当message发生变化时，reversedMessage才会重新计算。

2. 依赖多个响应式引用

<template>
  <div>{{ fullName }}</div>
</template>
 
<script>
import { ref, computed } from 'vue'
 
export default {
  setup() {
    const firstName = ref('John')
    const lastName = ref('Doe')
 
    const fullName = computed({
      get: () => firstName.value + ' ' + lastName.value,
      set: (value) => {
        const names = value.split(' ')
        firstName.value = names[0]
        lastName.value = names[names.length - 1]
      }
    })
 
    return {
      firstName,
      lastName,
      fullName
    }
  }
}
</script>

在这个例子中，fullName是一个可以读写的计算属性。它的get函数返回firstName和lastName的组合，而它的set函数接受一个新值，并更新firstName和lastName。

3. 使用watch监听计算属性的变化

<template>
  <div>{{ fullName }}</div>
</template>
 
<script>
import { ref, computed, watch } from 'vue'
 
export default {
  setup() {
    const firstName = ref('John')
    const lastName = ref('Doe')
 
    const fullName = computed({
      get: () => firstName.value + ' ' + lastName.value,
      set: (value) => {
        const names = value.split(' ')
        firstName.value = names[0]
        lastName.value = names[names.length - 1]
      }
    })
 
    watch(fullName, (newValue, oldValue) => {
      console.log(`fullName changed from ${oldValue} to ${newValue}`)
    })
 
    return {
      firstName,
      lastName,
      fullName
    }
  }
}
</script>

在这个例子中，我们使用watch来监听fullName的变化，当fullName变化时，会打印出一条消息。

以上就是Vue