vue3

15.vue3/project1/src/App.vue

@@ -1,21 +1,30 @@
 <template>
-  <Demo7 />
+  
+  <Demo10/>
   <br>
-  <Demo1 />
+  <!-- <Demo1 />
   <Demo2 />
   <Demo3 />
   <Demo4 />
   <Demo5 />
   <Demo6 />
+  <Demo7 />
+  <Demo8/> 
+  
+  <Demo9/>
+  -->
 </template>
 
 <script setup lang="ts" name="App">
-import Demo1 from "./components/Demo1.vue";
-import Demo2 from "./components/Demo2.vue";
-import Demo3 from "./components/Demo3.vue";
-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 Demo1 from "./components/Demo1.vue";
+// import Demo2 from "./components/Demo2.vue";
+// import Demo3 from "./components/Demo3.vue";
+// 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";
+import Demo10 from "./components/Demo10.vue";
 </script>
 <style lang="scss" scoped></style>

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

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <h3>这是第十个demo:watch:监听reactive:引用数据类型</h3>
+    <p>我叫{{person.name}},今年{{person.age}}岁</p>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeAge">修改年龄</button>
+    <button @click="changePerson">修改person</button>
+  </div>
+</template>
+
+<script setup>
+import { reactive, watch} from 'vue'
+let person = reactive({
+    name:"孙悟空",
+    age:20
+})
+function changeName() {
+    person.name = '唐僧';
+}
+function changeAge() {
+    person.age = 30;
+}
+function changePerson() {
+    Object.assign(person,{name:'哪吒',age:7})
+}
+// reactive默认开启深度监听
+watch(person,(newValue,oldValue) => {
+    console.log('改变了',newValue,oldValue)
+})
+</script>
+<style lang='scss' scoped>
+
+</style>

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

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <h3>这是第八个demo:watch:监听ref:基本数据类型</h3>
+    <p>我有{{ flower }}朵花</p>
+    <button @click="reduceFlower">减少</button>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch} from 'vue'
+    let flower = ref(30);
+    function reduceFlower() {
+        flower.value -= 1;
+    }
+    // watch: 第一个参数：监听字段
+    // 第二个参数：回调函数
+    // 第三个参数：deep immediate 开启深度监听
+   const List =  watch(flower,(newValue,oldValue) => {
+        if(newValue <= 26) {
+            List();
+            // alert("您的花越来越少了，请及时购买");
+        }
+    })
+</script>
+<style lang='scss' scoped>
+
+</style>

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

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <h3>这是第九个demo:watch:监听ref:引用数据类型</h3>
+    <p>我们假期是{{date.holiday}},上班是{{date.work}}</p>
+    <button @click="changeHoliday">修改假期</button>
+    <button @click="changeWork">修改工作日期</button>
+    <button @click="changeAll">修改全部</button>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+let date = ref({
+  holiday: "春节",
+  work: "初八",
+});
+function changeHoliday() {
+    date.value.holiday = '小年'
+}
+function changeWork() {
+    date.value.work = '元宵节'
+}
+function changeAll() {
+    date.value = {holiday:'五一',work:"everyDay"}
+    // console.log(date)
+}
+// 默认监听的是对象地址，开启深度后 监听的是对象内的属性
+watch(date,(newValue,oldValue) => {
+    console.log('改变了',newValue,oldValue)
+},{
+    deep: true,
+    immediate: true
+})
+</script>
+<style lang="scss" scoped></style>