vue3中的computed 也被封装成了一个组合api , 所以我们使用的时候， 要 import {computed} from “vue”

和vue2样， computed 是有两种书写方式 简写方式和全写方式

<template>
  <div> firstname:
    <input v-model="firstname" />
  </div>
  <br/>
  <div> lastname:
    <input v-model="lastname"/>
  </div>
  <br/>
  <div> fullname:{{fullname}}</div>
  <br/>
  <button @click="fullname='hahha-222'">修改全名</button>
</template>

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

export default {
  name: 'App',

  setup(){
    let firstname = ref("黄");
    let lastname = ref("巾军");

    // let fullname = computed(()=>{
    //   return firstname.value + '-' + lastname.value;
    // })
    let fullname = computed({
      set(value){
        console.log("set");
        console.log(value);
        let nameArr = value.split("-");
        firstname.value = nameArr[0];
        lastname.value = nameArr[1];
      },
      get(){
        return firstname.value + "-" + lastname.value
      }
    })

    return {
      firstname,
      lastname,
      fullname
    }
  },
}
</script>

在setup中
简写模式

这里要注意一下， 我们是用 ref 来定义的 firstname 和 lastname , 所以， 我们在获取数据的时候，要使用 firstname.value

如果我们这样定义 firstname 和 lastname 就不需要使用value

let person = reactive({
firstname:“”,
lastname:“”
})
上面的 使用 reactive 定义数据的时候， 就不需要使用value

原因， 可以看一下 ，ref 和 reactive 的区别，这里就不再多说了

简写模式

let  fullname = computed(()=>{
	return firstname.value + "-" +lastname.value
})

全写模式

let fullname = computed({
	set(value){
		let nameArr = value.split("-");
		firstname.value = nameArr[0];
		lastname.value = nameArr[1];
	},
	get(){
		return firstname.value +"-" +lastname.value
	}
})

简写模式中， computed 函数中的参数是一个 函数， 而全写模式中是一个对象， 其中有 set 和 get 方法，set 方法，是在当 计算属性被修改的时候， 会被调用

当我们使用了简写方式， 也就是说 computed 的时候，没有写set 方法，但时我们在使用的过程中又更改了， 这个计算属性就会报一个错误

大至的意思就是说， 计算属生是个只读的， 不能修改， 此时我们使用全写的形式， 把 set 方法写上， 就可以解决了