computed

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

const firstName = ref("aaa");
const lastName = ref("bbb");

// 简写形式，返回的是一个只读ref对象
const fullName1 = computed(()=>firstName.value + ' ' + lastName.value);

// 非简写形式，返回的是一个可写的ref对象
let fullName2 = computed({
  get(){
    return firstName.value + ' ' + lastName.value
  },
  set(newVal){
    [firstName.value, lastName.value] = newVal.split(" ")
  }
})
function changeName(){
  fullName1.value = "aaa ccc"; // 可以修改，但会报一个警告
  fullName2.value = "aaa ccc"; // 修改成功
}
</script>

<template>
  <div>
    {{fullName1}}
  </div>
  <div>
    {{fullName2}}
  </div>
  <button @click="changeName">点我改名</button>
</template>

修改前计算属性修改后.png

修改后计算属性修改前.png

简写形式报出的警告：计算属性警告.png

vue3 计算属性

computed