vue3

12.vue3/project1/src/App.vue

@@ -1,6 +1,10 @@
 <template>
   <div>
-    <Demo7></Demo7>
+    <Demo9></Demo9>
+    <hr><hr><hr>
+    <Demo8></Demo8>
+    <hr><hr><hr>
+    <!-- <Demo7></Demo7>
     <hr><hr><hr>
     <Demo6></Demo6>
     <hr><hr><hr>
@@ -12,7 +16,7 @@
     <hr><hr><hr>
     <Demo4></Demo4>
     <hr><hr><hr>
-    <Demo5></Demo5>
+    <Demo5></Demo5> -->
   </div>
 </template>
 
@@ -24,6 +28,8 @@ 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';
 </script>
 
 <style>

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

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <h1>Demo8:watch监听ref基本数据类型</h1>
+    <h3>我有{{ flower }}朵花</h3>
+    <button @click="changeFlower">减少</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,watch} from "vue" 
+let flower = ref(20);
+function changeFlower() {
+    flower.value--;
+}
+// 监听的是基本数据类型的值
+watch(flower,(newValue,oldValue) => {
+    console.log(newValue,oldValue)
+},{
+  deep: true, //开启深度监听
+  immediate: true //立即监听
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

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

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