vue3

12.vue3/project1/src/App.vue

@@ -1,9 +1,15 @@
 <template>
   <div>
-    <Demo9></Demo9>
+    <Demo12></Demo12>
     <hr><hr><hr>
-    <Demo8></Demo8>
+    <!-- <Demo11></Demo11>
+    <hr><hr><hr> -->
+    <!-- <Demo10></Demo10>
+    <hr><hr><hr> -->
+    <!-- <Demo9></Demo9>
     <hr><hr><hr>
+    <Demo8></Demo8>
+    <hr><hr><hr> -->
     <!-- <Demo7></Demo7>
     <hr><hr><hr>
     <Demo6></Demo6>
@@ -30,6 +36,9 @@ 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 Demo12 from './components/Demo12.vue';
 </script>
 
 <style>

12.vue3/project1/src/components/Demo10.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <h1>Demo10:watch监听reactive引用数据类型</h1>
+    <h3>我有{{ flower.type }}花,是{{ flower.color }}</h3>
+    <button @click="changeFlowerColor">颜色</button>
+    <button @click="changeFlower">整体</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {reactive,watch} from "vue" 
+let flower = reactive({
+  color:"红色",
+  type:"牡丹"
+});
+function changeFlowerColor() {
+  flower.color = '粉色'
+}
+function changeFlower() {
+  Object.assign(flower, {type:"丁香花",color:"紫色"})
+}
+// 监听的是基本数据类型的值
+watch(flower,(newValue,oldValue) => {
+    console.log(newValue,oldValue)
+},{
+    deep:true,
+    immediate: true
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

12.vue3/project1/src/components/Demo11.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <h1>Demo10:watch监听rref/reactive引用数据类型中的某个属性</h1>
+    <h3>我有{{ flower.type }}花,是{{ flower.color }}</h3>
+    <button @click="changeFlowerColor">颜色</button>
+    <button @click="changeFlower">整体</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {reactive,watch} from "vue" 
+let flower = reactive({
+  color:"红色",
+  type:"牡丹"
+});
+function changeFlowerColor() {
+  flower.color = '粉色'
+}
+function changeFlower() {
+  Object.assign(flower, {type:"丁香花",color:"紫色"})
+}
+// 监听的是基本数据类型的值
+watch([() =>flower.type,()=>flower.color],(newValue,oldValue) => {
+    console.log(newValue,oldValue)
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <h1>watch与watchEffect</h1>
+    <h3>今天还{{ weather }},温度是{{ temp }}</h3>
+    <button @click="changeWeather">修改天气</button>
+    <button @click="changeTemp">修改温度</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,watch, watchEffect} from "vue" 
+let weather = ref("雪天");
+let temp = ref(-10);
+function changeWeather() {
+    weather.value = '晴天';
+}
+function changeTemp() {
+    temp.value = 20;
+}
+// watch([weather,temp],(value) => {
+//     console.log(value)
+// },{
+//     deep: true,
+//     immediate: true
+// })
+// 立即执行函数 同时 响应式地追踪其依赖 依赖改变自动更新
+watchEffect(()=>{
+    console.log(weather.value,temp.value,'watchEffect')
+    if(temp.value > 0) {
+        alert("天气晴朗")
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+</style>