vue3

20.vue3/project1/src/App.vue

@@ -3,7 +3,7 @@
     <h1>App</h1>
     <hr>
     <hr>
-    <Demo19></Demo19>
+    <Demo20></Demo20>
     <!-- <Demo17 ref="dom1"></Demo17> -->
     <!-- <button @click="changeMain">获取</button> -->
     <!-- <Demo16 v-if="isShow"></Demo16> -->
@@ -46,7 +46,7 @@
 // import Demo9 from './components/Demo9.vue'
 // import Demo16 from './components/Demo16.vue';
 // import Demo17 from './components/Demo17.vue';
-import Demo19 from './components/Demo19.vue';
+import Demo20 from './components/Demo20.vue';
 import { ref } from 'vue';
 let isShow = ref(true);
 let dom1 = ref();

20.vue3/project1/src/components/Demo20.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <h1>Demo20</h1>
+    <p>姓: <input type="text" v-model="user.firstName"></p>
+    <p>名: <input type="text" v-model="user.lastName"></p>
+    <p>全名:{{ fullName }}</p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref, watch, watchEffect} from "vue" 
+let user = ref({
+    firstName:"胡",
+    lastName:"图图"
+})
+let fullName = ref("");
+// watch(user,({firstName,lastName}) => {
+//     // console.log(val,'val')
+//     fullName.value = firstName + lastName;
+// },{
+//     deep: true,
+//     immediate: true
+// })
+// 立即执行函数 响应式追踪依赖 在依赖发生变化时候 触发执行回调
+watchEffect(()=>{
+    fullName.value = user.value.firstName + user.value.lastName;
+})
+</script>
+
+<style lang="scss" scoped>
+</style>