vue3

vue3/project1/src/App.vue

@@ -3,6 +3,9 @@
     <h1>App</h1>
     <hr>
     <hr>
+    <Demo14></Demo14>
+    <hr>
+    <hr>
     <Demo11></Demo11>
     <hr>
     <hr>
@@ -38,17 +41,19 @@
 </template>
 
 <script setup>
-import Demo1 from './components/Demo1.vue'
-import Demo2 from './components/Demo2.vue'
-import Demo3 from './components/Demo3.vue'
-import Demo4 from './components/Demo4.vue'
-import Demo5 from './components/Demo5.vue'
-import Demo6 from './components/Demo6.vue'
-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 Demo1 from './components/Demo1.vue'
+// import Demo2 from './components/Demo2.vue'
+// import Demo3 from './components/Demo3.vue'
+// import Demo4 from './components/Demo4.vue'
+// import Demo5 from './components/Demo5.vue'
+// import Demo6 from './components/Demo6.vue'
+// 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 Demo14 from './components/Demo14.vue'
+// import Demo12 from './components/Demo12.vue'
 </script>
 
 <style lang="scss" scoped>

vue3/project1/src/components/Demo12.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <h1>Demo12:watch监听reactive定义的引用数据类型</h1>
+    <h2>我在{{ flower.month }}的{{ flower.city }}--{{flower.a.b }}</h2>
+    <button @click="changeMonth">修改月份</button>
+    <button @click="changeB">修改b</button>
+    <button @click="changeFlower">修改整体</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, watch } from "vue";
+let flower = reactive({
+  month: "六月",
+  city: "哈尔滨",
+    a:{
+      b:1
+    }
+});
+function changeB() {
+  flower.a.b = 12;
+}
+function changeFlower() {
+  // flower.value--;
+  Object.assign(flower, {
+    month: "八月",
+    city: "北京"
+  });
+}
+function changeMonth() {
+  flower.month = "七月";
+}
+watch(
+  flower,
+  (newValue, oldValue) => {
+    console.log(newValue, oldValue, "12");
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+</style>

vue3/project1/src/components/Demo13.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <h1>Demo13:watch监听reactive、ref定义的引用数据类型中某个属性</h1>
+    <h2>我在{{ flower.month }}的{{ flower.city }}--{{ flower.a.b }}</h2>
+    <button @click="changeMonth">修改月份</button>
+    <button @click="changeB">修改b</button>
+    <button @click="changeFlower">修改整体</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from "vue";
+let flower = ref({
+  month: "六月",
+  city: "哈尔滨",
+  a: {
+    b: 1,
+  },
+});
+function changeB() {
+  flower.value.a.b = 12;
+}
+function changeFlower() {
+  // flower.value--;
+  Object.assign(flower.value, {
+    month: "八月",
+    city: "北京",
+    a: {
+      b: "122",
+    },
+  });
+}
+function changeMonth() {
+  flower.value.month = "七月";
+}
+watch(
+  flower.value.a,
+  (newValue, oldValue) => {
+    console.log(newValue, oldValue, "12");
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+);
+// watch(
+//  ()=>flower.value.month,
+//   (newValue, oldValue) => {
+//     console.log(newValue, oldValue, "12");
+//   },
+//   {
+//     deep: true,
+//     immediate: true,
+//   }
+// );
+</script>
+
+<style lang="scss" scoped>
+</style>

vue3/project1/src/components/Demo14.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <h1>Demo14:watch监听reactive、ref定义的引用数据类型中多个属性</h1>
+    <h2>我在{{ flower.month }}的{{ flower.city }}--{{ flower.a.b }}</h2>
+    <button @click="changeMonth">修改月份</button>
+    <button @click="changeB">修改b</button>
+    <button @click="changeFlower">修改整体</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from "vue";
+let flower = ref({
+  month: "六月",
+  city: "哈尔滨",
+  a: {
+    b: 1,
+  },
+});
+function changeB() {
+  flower.value.a.b = 12;
+}
+function changeFlower() {
+  // flower.value--;
+  Object.assign(flower.value, {
+    month: "八月",
+    city: "北京",
+    a: {
+      b: "122",
+    },
+  });
+}
+function changeMonth() {
+  flower.value.month = "七月";
+}
+// watch(
+//   flower.value.a,
+//   (newValue, oldValue) => {
+//     console.log(newValue, oldValue, "12");
+//   },
+//   {
+//     deep: true,
+//     immediate: true
+//   }
+// );
+// watch(
+//  ()=>flower.value.month,
+//   (newValue, oldValue) => {
+//     console.log(newValue, oldValue, "12");
+//   },
+//   {
+//     deep: true,
+//     immediate: true,
+//   }
+// );
+watch(
+ [()=>flower.value.month,flower.value.a],
+  (newValue, oldValue) => {
+    console.log(newValue, oldValue, "哈哈");
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+</style>