web0331/11.vue3/vue-project1/src/components/Demo17.vue

<template>
  <div>
    <h1>Demo17</h1>
    <p>
      姓:<input v-model="user.firstName" />
    </p>
    <p>
      名:<input v-model="user.lastName" />
    </p>
    <h3>全名:<input v-model="fullName" /></h3>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch,watchEffect } from "vue";
let user = reactive({
  firstName:"喜",
  lastName:"羊羊"
})
let fullName = ref("");
// watch(user,({firstName,lastName})=> {
//   console.log(firstName,lastName)
//   fullName.value = firstName + lastName
// },{
//   deep: true,
//   immediate: true
// })
watchEffect(()=>{
  console.log(fullName.value);
  console.log(user)
})
</script>

<style lang="scss" scoped>
</style>