vue3使用3--计算属性和监视

<template>
  <h2>计算属性和监视</h2>
  <fieldset>
    <legend>姓名操作</legend>
      <!-- 姓氏：<input type="text" placeholder="请输入姓氏" :model="user.firstName"/><br/> -->
      姓氏：<input type="text" placeholder="请输入姓氏" v-model="user.firstName"/><br/>
      名字：<input type="text" placeholder="请输入名字" v-model="user.lastName"/><br/>
  </fieldset>
    <fieldset>
    <legend>计算属性和监视的演示</legend>
      名字：<input type="text" placeholder="显示姓名" v-model="fullName1"/><br/>
      名字：<input type="text" placeholder="显示姓名" v-model="fullName2"/><br/>
      名字：<input type="text" placeholder="显示姓名" v-model="fullName3"/><br/>
  </fieldset>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref, watch, watchEffect} from 'vue'
export default defineComponent({
  name: 'App',
  setup(){
    //定义一个响应式对象
    const user = reactive({
      //姓氏
      firstName:'东方',
      //名字
      lastName:'不败'
    })
    //(1)通过计算属性的方式，实现第一个姓名的显示
    //vue3中的计算属性
    //计算属性的函数中如果只传入一个回调函数，表示的是get
    //第一个姓名，返回的是一个Ref类型的对象，只有get
    const fullName1 = computed(()=>{
      return user.firstName + "_" + user.lastName
    })
    //第二个姓名，传入一个对象 get和set
    const fullName2 = computed({
      get(){
        return user.firstName + "_" + user.lastName
      },
      set(val:string){
        // console.log("==="+val)
        const names = val.split('_')
        user.firstName = names[0]
        user.lastName = names[1]
      }
    })
    //第三个姓名，监视指定的数
    const fullName3=ref('')
    // watch(user,(user)=>{
    //   fullName3.value = user.firstName + "_" + user.lastName 
    // },{immediate:true,deep:true})
    //immediate默认会执行一次watch，deep深度监视

    watchEffect( ()=>{
      fullName3.value =  user.firstName + "_" + user.lastName 
    })
    return{
      user,
      fullName1,
      fullName2,
      fullName3
    }
  }
})
</script>
<style>
</style>