vue3

vue3/project3/src/App.vue

@@ -20,7 +20,7 @@
     <Demo13></Demo13> -->
     <!-- <Demo25 :name="name1" :age="10"/>
     <Demo25 :list1="list"/> -->
-    <Demo25/>
+    <Demo26 />
   </div>
 </template>
 
@@ -65,6 +65,7 @@ import Demo19 from './components/Demo19.vue';
 import Demo23 from './components/Demo23.vue';
 import Demo24 from './components/Demo24.vue';
 import Demo25 from './components/Demo25.vue';
+import Demo26 from './components/Demo26.vue';
 let isshow  = ref(true);
 let main = ref<any>(null);
 // onMounted(() => {

vue3/project3/src/components/Demo26.vue

@@ -0,0 +1,41 @@
+<template>
+  <div> 
+    <h1>WatchEffect</h1>
+    <p>姓:
+        <input type="text" v-model="user.firstName">
+    </p>
+    <p>
+        名:
+        <input type="text" v-model="user.lastName"/>
+    </p>
+    <h2>全名:
+        <input type="text" v-model="fullName">
+    </h2>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive, watch, watchEffect} from "vue" 
+interface Person {
+    firstName:string,
+    lastName:string
+}
+let user:Person = reactive({
+    firstName:'喜',
+    lastName:'羊羊'
+})
+const fullName = ref<string>("")
+// watch(user,({firstName,lastName}) => {
+//     console.log(firstName,lastName)
+//     fullName.value = `${firstName}${lastName}`
+// })
+// 自动的监听数据 发生改变 依赖也会随之变化
+watchEffect(()=>{
+    console.log(user,'user')
+    console.log(fullName.value,'fullName')
+    fullName.value = user.firstName + user.lastName
+})
+</script>
+
+<style lang="scss" scoped>
+</style>