Web1020/13.Vue3/project2/src/components/Demo17.vue

<template>
  <div>
    <h2>watchEffect</h2>
    <p>
        姓:<input type="text" v-model="user.firstName" >
    </p>
    <p>
        名:<input type="text" v-model="user.lastName" >
    </p>
    <h4>全名：<input type="text" v-model="fullName"></h4>
  </div>
</template>

<script setup>
import { ref, reactive,watch,watchEffect} from 'vue'
// let firstName = ref('喜')
// let lastName = ref('羊羊')
let user = reactive({
    firstName:'喜',
    lastName:"羊羊"
})
let fullName = ref("");
// watch监听
// watch(()=>user.firstName)
watch(user,({firstName,lastName}) => {
    // console.log(news,olds)
    fullName.value = firstName + "-" + lastName
},{
    deep: true,
    immediate:true
})
// watchEffect监听  立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行
watchEffect(()=>{
    console.log(fullName.value,'哈哈哈')
    console.log(user,'user')
})
</script>
<style lang='scss' scoped>

</style>