computed()

计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的DOM部分也会同步自动更新。

computed() 用来创建计算属性，computed() 函数的返回值是一个 ref 的实例。

创建只读的计算属性

在调用 computed() 函数期间，传入一个 function 函数，可以得到一个只读的计算属性

import { reactive, computed } from 'vue'
setup(){
    let userinfo = reactive({
        firthName:'zhang',
        lastName:'san'
    })
    let fullName = computed(()=>{
        return userinfo.firthName+''+lastName;
    })
    return{
        userinfo,
        fullName  // 模板中可以直接使用
    }
}

创建可读可写的计算属性

在调用 computed() 函数期间，传入一个包含 get 和 set 函数的对象，可以得到一个可读可写的计算属性

// 创建一个 ref 响应式数据
const count = ref(1)

// 创建一个 computed 计算属性
const plusOne = computed({
  // 取值函数
  get: () => count.value + 1,
  // 赋值函数
  set: val => {
    count.value = val - 1
  }
})

// 为计算属性赋值的操作，会触发 set 函数
plusOne.value = 9
// 触发 set 函数后，count 的值会被更新
console.log(count.value) // 输出 8