Vue3计算属性基础使用

1、只读计算属性

import { ref, computed } from 'vue'
const firstName = ref('Sam')
const lastName = ref('xiaoguai')
const fullName = computed<string>(() => {
  return firstName.value + '-' + lastName.value;
});

2.可写计算属性

import { ref, computed } from 'vue'
 
const firstName = ref('Sam')
const lastName = ref('xiaoguai')

const fullName = computed({
  // getter
  get() {
    return firstName.value + '-' + lastName.value
  },
  // setter
  set(newValue) {
    // 注意：我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split('-')
  }
})