vue3

vue3/project3/src/App.vue

@@ -1,15 +1,18 @@
 <template>
   <div>
     <!-- <Demo1></Demo1> -->
-     <Demo3></Demo3>
+     <!-- <Demo3></Demo3> -->
     <!-- 
     <Demo2></Demo2>
     <Demo3></Demo3> -->
-    <Demo4></Demo4>
+    <!-- <Demo4></Demo4>
     <Demo5></Demo5>
     <Demo6></Demo6>
     <Demo7></Demo7>
     <Demo8></Demo8>
+    <Demo9></Demo9> -->
+    
+    <Demo10></Demo10>
   </div>
 </template>
 
@@ -39,6 +42,8 @@ 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';
 </script>
 <style>
 </style>

vue3/project3/src/components/Demo10.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <h1>Watch:监听ref引用数据类型</h1>
+    <p>我在{{ obj.city }},现在是{{ obj.month }}</p>
+    <button @click="changeCity">修改城市</button>
+    <button @click="changeObj">修改整体</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,watch} from "vue" 
+let obj = ref({
+    city:'哈尔滨',
+    month:"8月"
+})
+function changeCity() {
+    obj.value.city = '北京'
+}
+function changeObj() {
+    obj.value = {
+        city:"天津",
+        month:'9月'
+    }
+}
+// 1.watch监听ref引用数据类型 监听的是整体 而不是单独的
+// 2.若监听ref引用数据类型中的属性 需要开启深度监听
+watch(obj,(newValue,oldValue)=>{
+    console.log(newValue,oldValue)
+},{
+    deep:true,
+    immediate: true
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

vue3/project3/src/components/Demo9.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <h1>第九个</h1>
+    <h2>Watch:监听ref定义的基本数据类型</h2>
+    <p>我有{{ flower }}朵花</p>
+    <button @click="changeReduce">减少</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,watch} from "vue" 
+let flower = ref(10);
+function changeReduce() {
+    flower.value -= 1;
+}
+/**
+ * watch 
+ * 1.监听对象
+ * 2.回调方法
+ * 3.开启深度监听
+ */
+watch(flower,(newValue,oldValue)=>{
+    console.log(newValue,oldValue)
+},{
+    deep: true, //深度监听
+    immediate: true //立即执行
+})
+</script>
+
+<style lang="scss" scoped>
+</style>