vue3

15.vue3/vue_project1/src/App.vue

@@ -1,12 +1,14 @@
 <template>
   <div>
-    <Demo1 />
+    <!-- <Demo1 />
     <Demo2 />
     <Demo32 />
     <Demo4 />
     <Demo5 />
     <Demo6 />
     <Demo7 />
+    <Demo8/> -->
+    <Demo9/>
   </div>
 </template>
 
@@ -18,6 +20,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></style>
 

15.vue3/vue_project1/src/components/Demo8.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <div>Watch1.0</div>
+    <!-- watch监听ref基本数据类型 -->
+    <h3>我送了{{ flower }}花</h3>
+    <button @click="sendFlower">再送一朵</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { watch, ref } from "vue";
+let flower = ref(10);
+function sendFlower() {
+    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>

15.vue3/vue_project1/src/components/Demo9.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <h2>watch2.0=>ref引用数据类型</h2>
+    <h3>我在{{ obj.city }},现在是{{ obj.month }}</h3>
+    <button @click="changeCity">修改城市</button>
+    <button @click="changeMonth">修改月份</button>
+    <button @click="changeMsg">修改信息</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,watch} from 'vue';
+let obj = ref({
+    city:"哈尔滨",
+    month:"五月"
+})
+function changeCity(){
+    obj.value.city = '北京'
+}
+function changeMonth(){
+    obj.value.month = '六月'
+    
+}
+function changeMsg(){
+    obj.value = {
+        city:"天津",
+        month:"七月"
+    }
+}
+watch(obj,(newValue,oldValue)=>{
+    console.log(newValue,oldValue)
+},{
+    deep: true,
+    immediate: true
+})
+
+</script>
+
+<style lang="scss" scoped>
+</style>