vue3

11.vue3/vue-project1/src/App.vue

@@ -3,7 +3,12 @@
 <template>
   <div>
     <h1>首页</h1>
-    <Demo7></Demo7>
+    <Demo12></Demo12>
+    <!-- <Demo11></Demo11> -->
+    <!-- <Demo10></Demo10> -->
+    <!-- <Demo9></Demo9> -->
+    <!-- <Demo8></Demo8> -->
+    <!-- <Demo7></Demo7> -->
     <!-- <Demo6></Demo6> -->
     <!-- <Demo5></Demo5> -->
     <!-- <Demo4></Demo4> -->
@@ -20,6 +25,11 @@ 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';
+import Demo11 from './components/Demo11.vue';
+import Demo12 from './components/Demo12.vue';
 </script>
 <style scoped>
 </style>

11.vue3/vue-project1/src/components/Demo10.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <h2>
+        watch:监听数据变化
+    </h2>
+    <!-- 监听reactive引用数据类型:
+            监听的是当前对象，默认深度监听
+    -->
+     <p>
+        我叫{{ obj.name }},今年{{ obj.age }}岁了
+     </p>
+     <button @click="changeAge">修改年龄</button>
+     <button @click="changePerson">修改整体</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive,watch} from "vue" 
+let obj = reactive({
+    name:"瑶一瑶",
+    age: 4
+})
+function changeAge() {
+    obj.age = 4.5;
+}
+function changePerson() {
+   let obj1 = {
+        name:"瑶一瑶小肉包",
+        age: 4.7
+    }
+    Object.assign(obj,obj1)
+}
+watch(obj,(news,olds)=>{
+    console.log(news,olds)
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

11.vue3/vue-project1/src/components/Demo11.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <h2>
+        watch:监听数据变化
+    </h2>
+    <!-- 监听reactive引用数据类型某个属性:
+            需要写出函数体
+            可以监听整体
+            但不能监听整体中的某一个 需要开启深度监听
+    -->
+     <p>
+        我叫{{ obj.name }},今年{{ obj.age }}岁了,我有{{ obj.car.c1 }}和{{ obj.car.c2 }}
+     </p>
+     <button @click="changeAge">修改年龄</button>
+     <button @click="changeCar1">修改第一辆车</button>
+     <button @click="changeCar">修改所有车</button>
+     <button @click="changePerson">修改整体</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive,watch} from "vue" 
+let obj = reactive({
+    name:"瑶一瑶",
+    age: 4,
+    car:{
+        c1:"大众",
+        c2:'奥迪'
+    }
+})
+function changeAge() {
+    obj.age = 4.5;
+}
+function changeCar1() {
+    obj.car.c1 = '迈巴赫'
+}
+function changeCar() {
+    obj.car = {
+        c1:"自行车",
+        c2:"摩托车"
+    }
+}
+function changePerson() {
+   let obj1 = {
+        name:"瑶一瑶小肉包",
+        age: 4.7,
+        car:{
+            c1:"拖拉机",
+            c2:"挖掘机"
+        }
+    }
+    Object.assign(obj,obj1)
+}
+watch(()=>obj.age,(news,olds)=>{
+    console.log(news,olds)
+})
+watch(()=>obj.car,(news,olds)=>{
+    console.log(news,olds)
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

11.vue3/vue-project1/src/components/Demo12.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <h2>
+        watch:监听数据变化
+    </h2>
+    <!-- 监听reactive引用数据类型多个个属性:
+    -->
+     <p>
+        我叫{{ obj.name }},今年{{ obj.age }}岁了,我有{{ obj.car.c1 }}和{{ obj.car.c2 }}
+     </p>
+     <button @click="changeAge">修改年龄</button>
+     <button @click="changeCar1">修改第一辆车</button>
+     <button @click="changeCar">修改所有车</button>
+     <button @click="changePerson">修改整体</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive,watch} from "vue" 
+let obj = reactive({
+    name:"瑶一瑶",
+    age: 4,
+    car:{
+        c1:"大众",
+        c2:'奥迪'
+    }
+})
+function changeAge() {
+    obj.age = 4.5;
+}
+function changeCar1() {
+    obj.car.c1 = '迈巴赫'
+}
+function changeCar() {
+    obj.car = {
+        c1:"自行车",
+        c2:"摩托车"
+    }
+}
+function changePerson() {
+   let obj1 = {
+        name:"瑶一瑶小肉包",
+        age: 4.7,
+        car:{
+            c1:"拖拉机",
+            c2:"挖掘机"
+        }
+    }
+    Object.assign(obj,obj1)
+}
+watch([()=>obj.age,()=>obj.car],(news,olds)=>{
+    console.log(news,olds)
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

11.vue3/vue-project1/src/components/Demo8.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <h2>
+        watch:监听数据变化
+    </h2>
+    <!-- 监听ref基本数据类型:监听的是ref数据的value值 -->
+     <p>
+        我有{{ flower }}朵花
+     </p>
+     <button @click="changeNum">减少</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive,watch} from "vue" 
+let flower = ref(100);
+function changeNum() {
+    flower.value -= 1;
+}
+watch(flower,(news,olds)=> {
+    console.log(news,olds)
+    if(news < 95) {
+        alert("需要补充库存");
+        // ...
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

11.vue3/vue-project1/src/components/Demo9.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <h2>
+        watch:监听数据变化
+    </h2>
+    <!-- 监听ref引用数据类型:
+            监听的是当前整体内容
+            不能监听单独属性 
+            手动开启深度监听
+    -->
+     <p>
+        我叫{{ obj.name }},今年{{ obj.age }}岁了
+     </p>
+     <button @click="changeAge">修改年龄</button>
+     <button @click="changePerson">修改整体</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive,watch} from "vue" 
+let obj = ref({
+    name:"瑶一瑶",
+    age: 4
+})
+function changeAge() {
+    obj.value.age = 4.5;
+}
+function changePerson() {
+    obj.value = {
+        name:"瑶一瑶小肉包",
+        age: 4.7
+    }
+}
+watch(obj,(news,olds)=>{
+    console.log(news,olds)
+},{
+    deep: true,
+    immediate: true
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

8.vue/初阶/17.事件绑定.html

@@ -48,8 +48,6 @@
                 触发自身    .self
                 触发一次    .once
                 .native
-
-
             
         -->
     </div>