vue3

vue3/project3/src/App.vue

@@ -12,7 +12,9 @@
     <Demo8></Demo8>
     <Demo9></Demo9> -->
     
-    <Demo10></Demo10>
+    <!-- <Demo10></Demo10> -->
+    <!-- <Demo11></Demo11> -->
+    <Demo12></Demo12>
   </div>
 </template>
 
@@ -44,6 +46,8 @@ import Demo7 from './components/Demo7.vue';
 import Demo8 from './components/Demo8.vue';
 import Demo9 from './components/Demo9.vue';
 import Demo10 from './components/Demo10.vue';
+import Demo11 from './components/Demo11.vue';
+import Demo12 from './components/Demo12.vue';
 </script>
 <style>
 </style>

vue3/project3/src/components/Demo11.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <h1>Watch:监听reactive引用数据类型</h1>
+   <p>我叫{{ obj.name }},今年{{ obj.age }}岁</p>
+   <button @click="changeName">修改名字</button>
+   <button @click="changePerson">修改整体</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {reactive,watch} from "vue" 
+let obj = reactive({
+    name:"图图",
+    age:3
+})
+function changeName() {
+    obj.name = '蜡笔小新';
+}
+function changePerson() {
+    Object.assign(obj,{
+        name:'瑶一瑶',
+        age:4
+    })
+}
+// 监听reactive引用数据类型 可以监听到属性
+watch(obj,(newValue,oldValue)=>{
+    console.log(newValue,oldValue)
+},{
+    deep:true,
+    immediate: true
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

vue3/project3/src/components/Demo12.vue

@@ -0,0 +1,54 @@
+<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'
+    }
+}
+// 监听reactive引用数据类型 监听单独属性 注意 写成函数体
+watch(()=>obj.name,(newValue,oldValue)=>{
+    console.log(newValue,oldValue)
+},{
+    deep:true,
+    immediate: true
+})
+</script>
+
+<style lang="scss" scoped>
+</style>