【Vue3】computed 计算属性

computed 计算属性

---

计算属性就是当依赖的属性的值发生变化的时候，才会触发他的更改，如果依赖的值，不发生变化的时候，使用的是缓存中的属性值。

Vue3中有两种写法

1. 如果计算属性不需要修改，可以直接使用函数形式
2. 如果计算属性有被修改的情况，则使用对象包括getter和setter方法，get为读取计算属性时触发，set为修改计算属性时触发

    // 响应式源对象
    let person = reactive({
      firstName: "张",
      lastName: "三",
    });
    // 计算属性-简写形式（函数形式），没有考虑计算属性被修改的情况
    /* person.fullName = computed(()=>{
          return person.firstName + '-' + person.lastName
        }) */

    // 计算属性-完整（对象形式），考虑读与写
    person.fullName = computed({
      get(){
        return person.firstName + "-" + person.lastName;
      },
      set(value){
        const nameArr = value.split('-')
        person.firstName = nameArr[0]
        person.lastName = nameArr[1]
      }
    });