1.8 Vue3核心语法之【computed】计算属性

一、概述

作用：根据已有数据计算出新数据（和Vue2中的computed作用一致）。

二、使用

①只读

let 计算结果的属性名 = computed(()=>{
 return 计算过程

  })

②可读可写

let 计算结果的属性名 = computed({

//当计算结果被读取时，get调用

get(){

  return 计算过程

},

//当计算结果被修改时，set调用，且会收到修改的值（set必有参数）

set(val){

//接收修改后的东西

}

})

// 方法

function 方法名(){

   计算结果属性名.value = '修改后的东西'

}

三、举例说明 

需求一：将zhangsan的首字母大写，只读

v-model表示页面和内部双向读到并渲染

computed属性依赖的数据只要发生变化就会重新计算，没发生变化就不会重新计算，是有缓存的（方法是没有缓存的，而且要调用，用几次就调用几次）

此时面修改firstName和lastName会引起fullName的变化，但并不是直接在修改fullName，如果要直接修改fullName，就需要使用可读可写的computed写法

需求二：直接修改fullName

不写箭头函数

set里一定有参数，收到'li-si'

split()返回的是一个数组，进行解构

通过打印可以得知fullName是一个ref对象，所以要.value