vue3

vue3/my_project/src/App.vue

@@ -1,13 +1,19 @@
 <template>
    <div id="app">
     <!-- html -->
-    <Demo2></Demo2>
+    <Demo5></Demo5>
+    <!-- <Demo4></Demo4> -->
+    <!-- <Demo3></Demo3> -->
+    <!-- <Demo2></Demo2> -->
     <!-- <Demo1></Demo1> -->
     <!-- <Demo></Demo> -->
    </div>
 </template>
 
 <script>
+import Demo5 from './components/Demo5.vue'
+import Demo4 from './components/Demo4.vue'
+import Demo3 from './components/Demo3.vue'
 import Demo2 from './components/Demo2.vue'
 import Demo1 from './components/Demo1.vue'
 // import Demo from './components/Demo.vue'
@@ -16,7 +22,10 @@ export default {
     components: {   
         // Demo,
         // Demo1,
-        Demo2
+        // Demo2,
+        // Demo3,
+        // Demo4,
+        Demo5
     },
 }
 </script>

vue3/my_project/src/components/Demo3.vue

@@ -0,0 +1,46 @@
+<template>
+  <!-- watch -->
+  <div class="demo3">
+    <h2>姓名：{{ person.name }}</h2>
+    <h2>年龄：{{ person.age }}</h2>
+    <button @click="changeName">修改姓名</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="changePerson">修改</button>
+  </div>
+</template>
+
+<script setup name="Demo3" lang="ts">
+    import { ref, watch } from "vue";
+    let person = ref({
+        name: "孙悟空",
+        age: 20,
+    });
+    function changeName() {
+        person.value.name = "猪八戒";
+        // person.name.value = '猪八戒';
+    }
+    function changeAge() {
+        person.value.age = 19;
+    }
+    function changePerson() {
+        person.value = {
+            name: "唐僧",
+            age: 18,
+        };
+    }
+    /**
+     * 情况二：watch监听ref的对象类型
+     * 三个参数：
+     * 第一个：监听的对象
+     * 第二个：值得变化：
+     * 第三个：开启深度监听 deep immediate
+     * 
+     * 第一种：监听对象时候 新值是新值 旧值是旧值
+     * 第二种：开启深度监听后 对象中的属性也可以监听到 属性中新旧值是相同 对象中新旧值不同
+     */
+    watch(person,((newValue,oldValue) => {
+        console.log(newValue,oldValue);
+    }),{deep: true,immediate: true});
+</script>
+
+<style></style>

vue3/my_project/src/components/Demo4.vue

@@ -0,0 +1,39 @@
+<template>
+    <div id="demo4">
+        <h2>姓名：{{person.name}}</h2>
+        <h2>年龄：{{person.age}}</h2>
+        <button @click="changeName">修改姓名</button>
+        <button @click="changeAge">修改年龄</button>
+        <button @click="changePerson">修改人</button>
+        <!-- watch:reactive -->
+        
+    </div>
+</template>
+
+<script setup name="demo4" lang="ts">
+    import {reactive,watch} from "vue";
+    let person = reactive({
+        name:"孙悟空",
+        age:18
+    })
+    function changeAge() {
+        person.age += 1;
+    }
+    function changeName() {
+        person.name += '~';
+    }
+    function changePerson() {
+        // person = {}
+        Object.assign(person,{name:"猪八戒",age:100})
+    }
+
+    // 情况三：watch监听reactive时 
+    // 默认开启深度监听 属性及对象的新旧值都是相同的
+    watch(person,(newValue,oldValue)=>{
+        console.log(newValue,oldValue);
+    })
+</script>
+
+<style>
+
+</style>

vue3/my_project/src/components/Demo5.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="demo5">
+    <!-- watch:监听ref或者reactive定义的对象类型中的属性 -->
+    <h2>姓名：{{obj.name}}</h2>
+    <h2>年龄：{{obj.age}}</h2>
+    <h2>小车：{{obj.car.c1}}---{{ obj.car.c2 }}</h2>
+    <button @click="changeName">修改姓名</button>
+    <button @click="changeC1">修改第一辆</button>
+    <button @click="changeC2">修改第二辆</button>
+    <button @click="changeCar">全换了</button>
+  </div>
+</template>
+
+<script lang="ts" name="demo5" setup>
+    import { reactive, watch } from "vue";
+    let obj = reactive({
+        name: "张三",
+        age: 18,
+        car: {
+            c1: "五菱宏光",
+            c2: "大众"
+        }
+    })
+    function changeName() {
+        obj.name += '~'
+    }
+    function changeC1() {
+        obj.car.c1 = '自行车'
+    }
+    function changeC2() {
+        obj.car.c2 = '电动车'
+    }
+    function changeCar() {
+        // Object.assign(obj,{})
+        obj.car = {
+            c1:"马车",
+            c2:"牛车"
+        }
+    }
+    /**
+     * 情况四：watch监听对象类型的基本属性时 写成函数形式 进行监听
+     * watch监听对象类型的对象属性时 写成函数形式 进行监听
+     */
+    // watch(()=>obj.name,(newValue,oldValue)=>{
+    //     console.log(newValue,oldValue)
+    // })
+    // watch(()=>obj.car,(newValue,oldValue)=>{
+    //     console.log(newValue,oldValue)
+    // })
+    watch(()=>obj.car.c1,(newValue,oldValue)=>{
+        console.log(newValue,oldValue)
+    })
+</script>
+
+<style></style>