vue3

20.vue3/project1/src/App.vue

@@ -3,7 +3,7 @@
     <h1>App</h1>
     <hr>
     <hr>
-    <Demo11></Demo11>
+    <Demo14></Demo14>
     <!-- <hr>
     <hr>
     <Demo8></Demo8>
@@ -41,7 +41,7 @@
 // import Demo7 from './components/Demo7.vue'
 // import Demo8 from './components/Demo8.vue'
 // import Demo9 from './components/Demo9.vue'
-import Demo11 from './components/Demo11.vue'
+import Demo14 from './components/Demo14.vue'
 </script>
 
 <style lang="scss" scoped>

20.vue3/project1/src/components/Demo12.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <h1>watch:引用数据类型</h1>
+    <h2>我有{{ flower.num }}朵{{flower.type}}花</h2>
+    <button @click="changeNum">减少数量</button>
+    <button @click="changeFlower">修改全部</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {reactive, watch} from "vue" 
+let flower = reactive({
+  type:"牡丹",
+  num: 10
+});
+function changeFlower() {
+    Object.assign(flower,{
+      type:'康乃馨',
+      num: 20
+    })
+}
+const changeNum = () => {
+  flower.num--;
+}
+watch(flower,(newValue,oldValue)=>{
+    console.log(newValue,oldValue)
+},{
+    deep: true,//深度监听
+    immediate: true//立即监听
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

20.vue3/project1/src/components/Demo13.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <h1>watch:ref/reactive引用数据类型中的属性</h1>
+    <h2>我有{{ flower.num }}朵{{flower.type}}花--新的:{{ flower.aaa.b }}-- {{ flower.aaa.c }}</h2>
+    <button @click="changeNum">减少数量</button>
+    <button @click="changeFlower">修改全部</button>
+    <button @click="changeType">修改品类</button>
+    <button @click="changeC">修改C</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref, watch} from "vue" 
+let flower = ref({
+  type:"牡丹",
+  num: 10,
+  aaa:{
+    b:12,
+    c: 90
+  }
+});
+function changeFlower() {
+    Object.assign(flower.value,{
+      type:'康乃馨',
+      num: 20
+    })
+}
+const changeNum = () => {
+  flower.value.num--;
+}
+const changeC = () => {
+  flower.value.aaa.c--;
+}
+const changeType = () => {
+  flower.value.type = '丁香'
+}
+watch(()=>flower.value.num,(newValue,oldValue)=>{
+    console.log(newValue,oldValue)
+},{
+  deep: true,
+  immediate: true
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

20.vue3/project1/src/components/Demo14.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <h1>watch:ref/reactive引用数据类型中的属性</h1>
+    <h2>我有{{ flower.num }}朵{{flower.type}}花--新的:{{ flower.aaa.b }}-- {{ flower.aaa.c }}</h2>
+    <button @click="changeNum">减少数量</button>
+    <button @click="changeFlower">修改全部</button>
+    <button @click="changeType">修改品类</button>
+    <button @click="changeC">修改C</button>
+    <button @click="changeA">修改AAA</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref, watch} from "vue" 
+let flower = ref({
+  type:"牡丹",
+  num: 10,
+  aaa:{
+    b:12,
+    c: 90
+  }
+});
+function changeA() {
+  flower.value.aaa = {
+    b: 1,
+    c: 2
+  }
+}
+function changeFlower() {
+    Object.assign(flower.value,{
+      type:'康乃馨',
+      num: 20,
+      aaa:{
+        b:3,
+        c:4
+      }
+    })
+}
+const changeNum = () => {
+  flower.value.num--;
+}
+const changeC = () => {
+  flower.value.aaa.c--;
+}
+const changeType = () => {
+  flower.value.type = '丁香'
+}
+watch(()=>flower.value.aaa,(newValue)=>{
+    console.log(newValue)
+},{
+  deep: true,
+  immediate: true
+})
+</script>
+
+<style lang="scss" scoped>
+</style>