vue3

17.Vue3/project/src/App.vue

@@ -28,6 +28,9 @@ export default {
 <template>
   <div>
     <h1>首页</h1>
+    <Demo14></Demo14>
+    <hr>
+    <hr>
     <Demo13 ref="flower"></Demo13>
     <hr>
     <hr>
@@ -83,6 +86,7 @@ import Demo10 from './components/Demo10.vue';
 import Demo11 from './components/Demo11.vue';
 import Demo12 from './components/Demo12.vue';
 import Demo13 from './components/Demo13.vue';
+import Demo14 from './components/Demo14.vue';
 // export default {
 //   // components:{
 //   //   Demo1

17.Vue3/project/src/components/Demo14.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <h1>watchEffect</h1>
+    <p>
+      姓: <input type="text" v-model="firstName">
+    </p>
+    <p>
+      名: <input type="text" v-model="lastName">
+    </p>
+    <p>
+      全名:{{ fullName }}
+    </p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,watch,watchEffect} from "vue" 
+let firstName = ref("");
+let lastName = ref("");
+// let user = ref({
+//   firstName:"",
+//   lastName:""
+// })
+let fullName = ref("");
+watchEffect(()=>{
+  console.log(fullName.value,firstName.value,lastName.value)
+  fullName.value = firstName.value + lastName.value;
+})
+// watch(firstName,(newValue,oldValue)=>{
+//   fullName.value = newValue + lastName.value
+// })
+// watch(lastName,(newValue,oldValue)=>{
+//   fullName.value = firstName.value + newValue
+// })
+</script>
+
+<style lang="scss" scoped>
+</style>