vue3

13.Vue3/project2/src/App.vue

@@ -17,6 +17,7 @@
     <Demo14 ref="flower" />
     <Demo15/> -->
     <Demo16  />
+    <Demo17/>
   </div>
 </template>
 
@@ -57,6 +58,7 @@ import Demo13 from './components/Demo13.vue'
 import Demo14 from './components/Demo14.vue'
 import Demo15 from './components/Demo15.vue'
 import Demo16 from './components/Demo16.vue'
+import Demo17 from './components/Demo17.vue'
 // vue2 选项式API => Option API
 // Vue3 组合式API => component API
 // export default {

13.Vue3/project2/src/components/Demo16.vue

@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import { ref, reactive,withDefaults,defineProps} from 'vue'
-import  { aaList} from '../types/demo16.ts';
+import  {aaList} from '../types/demo16';
 // 1.传什么 接什么
 // defineProps(['name','hobby']);
 // let score:aaList = reactive([
@@ -41,7 +41,7 @@ import  { aaList} from '../types/demo16.ts';
 const props = withDefaults(defineProps<{score:aaList,name:string,hobby:string}>(), {
   name:'未知用户',
   hobby: '吃饭',
-  score:[{name:'胡',grad:0}]
+  score:()=>{[{name:'胡',grad:0}]}
 })
 </script>
 <style lang='scss' scoped>

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

@@ -0,0 +1,40 @@
+<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>