vue3

vue3/project3/src/App.vue

@@ -14,7 +14,8 @@
     
     <!-- <Demo10></Demo10> -->
     <!-- <Demo11></Demo11> -->
-    <Demo12></Demo12>
+    <!-- <Demo12></Demo12> -->
+    <Demo13></Demo13>
   </div>
 </template>
 
@@ -48,6 +49,7 @@ import Demo9 from './components/Demo9.vue';
 import Demo10 from './components/Demo10.vue';
 import Demo11 from './components/Demo11.vue';
 import Demo12 from './components/Demo12.vue';
+import Demo13 from './components/Demo13.vue';
 </script>
 <style>
 </style>

vue3/project3/src/components/Demo12.vue

@@ -42,7 +42,13 @@ function changeMain() {
     }
 }
 // 监听reactive引用数据类型 监听单独属性 注意 写成函数体
-watch(()=>obj.name,(newValue,oldValue)=>{
+// watch(()=>obj.name,(newValue,oldValue)=>{
+//     console.log(newValue,oldValue)
+// },{
+//     deep:true,
+//     immediate:true
+// })
+watch(()=>obj.address,(newValue,oldValue)=>{
     console.log(newValue,oldValue)
 },{
     deep:true,

vue3/project3/src/components/Demo13.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <h1>Watch:监听reactive引用数据类型</h1>
+   <p>我叫{{ obj.name }},今年{{ obj.age }}岁,我家住在{{ obj.address.main }},我有一对{{ obj.address.desc }}</p>
+   <button @click="changeName">修改名字</button>
+   <button @click="changePerson">修改整体</button>
+   <button @click="changeAddress">修改地址</button>
+   <button @click="changeMain">修改描述信息</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {reactive,watch} from "vue" 
+let obj = reactive({
+    name:"图图",
+    age:3,
+    address:{
+        main:"翻斗花园",
+        desc:'大耳朵'
+    }
+})
+function changeName() {
+    obj.name = '蜡笔小新';
+}
+function changePerson() {
+    Object.assign(obj,{
+        name:'瑶一瑶',
+        age:4,
+        address:{
+            main:'33',
+            desc:"44"
+        }
+    })
+}
+function changeAddress() {
+    obj.address.main = '上海'
+}
+function changeMain() {
+    obj.address = {
+        main:'1',
+        desc:'2'
+    }
+}
+watch([()=>obj.address,()=>obj.name],(newValue,oldValue)=>{
+    console.log(newValue,oldValue)
+})
+// watch(()=>obj.name,(newValue,oldValue)=>{
+//     console.log(newValue,oldValue)
+// },{
+//     deep:true,
+//     immediate: true
+// })
+</script>
+
+<style lang="scss" scoped>
+</style>