vue3

vue3/my_project/src/App.vue

@@ -1,7 +1,9 @@
 <template>
    <div id="app">
     <!-- html -->
-    <Demo5></Demo5>
+    <Demo7></Demo7>
+    <!-- <Demo6></Demo6> -->
+    <!-- <Demo5></Demo5> -->
     <!-- <Demo4></Demo4> -->
     <!-- <Demo3></Demo3> -->
     <!-- <Demo2></Demo2> -->
@@ -11,6 +13,8 @@
 </template>
 
 <script>
+import Demo7 from './components/Demo7.vue'
+import Demo6 from './components/Demo6.vue'
 import Demo5 from './components/Demo5.vue'
 import Demo4 from './components/Demo4.vue'
 import Demo3 from './components/Demo3.vue'
@@ -25,7 +29,9 @@ export default {
         // Demo2,
         // Demo3,
         // Demo4,
-        Demo5
+        // Demo5,
+        // Demo6,
+        Demo7,
     },
 }
 </script>

vue3/my_project/src/components/Demo6.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="demo6">
+    <!-- watch:监听一切上述所有情况 -->
+    <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="demo6" 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([()=>obj.name,()=>obj.car],(newValue,oldValue)=>{
+    console.log(newValue,oldValue)
+},{deep:true})
+</script>
+
+<style></style>

vue3/my_project/src/components/Demo7.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="demo7">
+    <!-- watchEffect -->
+    <p>num: {{num}}</p>
+    <p>sum: {{sum}}</p>
+    <button @click="changeNum">num+10</button>
+    <br>
+    <button @click="changeSum">sum+10</button>
+  </div>
+</template>
+
+<script setup name="demo7" lang="ts">
+    import {ref,watch, watchEffect} from 'vue';
+    let num = ref(10);
+    let sum = ref(20);
+    function changeNum() {
+        num.value += 10;
+    }
+    function changeSum() {
+        sum.value += 10;
+    }
+    // watch([num,sum],(value) => {
+    //     // 当num大于60时 或 sum 大于80时 弹出警告框
+    //     // console.log(value);
+    //     let [num1,sum1] = value;
+    //     // console.log(num1,'num');
+    //     // console.log(sum1,'sum1')
+    //     if(num1 > 60 || sum1 > 80) {
+    //         console.log("达到了")
+    //     }
+    // })
+    console.log(num.value)
+    // watchEffect 自动监听
+    watchEffect(()=>{
+        if(num.value > 60 || sum.value > 40) {
+            console.log("达到了")
+        }
+    })
+</script>
+
+<style>
+
+</style>