用于描述依赖响应式状态的复杂逻辑

  • 会缓存计算结果（计算属性仅会在其响应式依赖更新时才重新计算）
<script setup>
import { ref, computed } from "vue";

const firstName = ref("朝");
const lastName = ref("阳");

const fullName = computed(() => firstName.value + " " + lastName.value);
</script>
<template>
  <sapn>{{ fullName }}</sapn>
</template>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • computed() 的参数为一个 getter 函数，返回依赖响应式状态变化的一个值。（与普通函数相比，它能缓存返回值，提升了性能）
  • getter 函数不能有任何副作用：不能改变其他状态、做异步请求或者更改 DOM （需要随依赖变化，创建副作用时，请使用 侦听器 watch）
  • 计算属性返回的值是一个“临时快照”，应该被视为只读的，并且永远不应该直接更改它，而应该更新它所依赖的源状态来触发新的计算。
  • 某些特殊场景可能需要通过修改计算属性返回的值更新它所依赖的源状态
<script setup>
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 注意：我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
</script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.