vue3

17.Vue3/project/src/App.vue

@@ -28,6 +28,21 @@ export default {
 <template>
   <div>
     <h1>首页</h1>
+    <Demo10></Demo10>
+    <hr>
+    <hr>
+    <Demo9></Demo9>
+    <hr>
+    <hr>
+    <Demo8></Demo8>
+    <hr>
+    <hr>
+    <Demo7></Demo7>
+    <hr>
+    <hr>
+    <Demo6></Demo6>
+    <hr>
+    <hr>
     <Demo5></Demo5>
     <hr>
     <hr>
@@ -50,6 +65,11 @@ 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';
 // export default {
 //   // components:{
 //   //   Demo1

17.Vue3/project/src/components/Demo10.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <h2>Demo10</h2>
+    <p>watch:监听多个</p>
+    <p>
+      我叫{{ obj.name }},今年{{ obj.age }}岁,我有一个{{ obj.car.c1 }}和一个{{
+        obj.car.c2
+      }}
+    </p>
+    <button @click="changePerson">修改整体</button>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeCar1">修改第一辆车</button>
+    <button @click="changeCar">修改整体车</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, watch } from "vue";
+let obj = reactive({
+  name: "小明",
+  age: 10,
+  car: {
+    c1: "摩托车",
+    c2: "自行车",
+  },
+});
+console.log(obj, "obj");
+function changeName() {
+  obj.name = "小红";
+}
+function changePerson() {
+  // obj = {
+  //     name:'天天',
+  //     age: 7
+  // }
+  // obj.name = '天天';
+  // obj.age = 7;
+  Object.assign(obj, {
+    name: "天天",
+    age: 7,
+    car: {
+      c1: 1,
+      c2: 2,
+    },
+  });
+}
+function changeCar1() {
+  obj.car.c1 = "摩托车1";
+}
+function changeCar() {
+  obj.car = {
+    c1: "花花",
+    c2: "图图",
+  };
+}
+watch(
+  [() => obj.car, () => obj.name],
+  (newValue, oldValue) => {
+    console.log(newValue, oldValue, "第五种1");
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+// watch(()=>obj.name,(newValue,oldValue)=>{
+//   console.log(newValue,oldValue,'第五种2')
+// },{
+//   deep: true,
+//   immediate: true
+// })
+</script>
+
+<style lang="scss" scoped>
+</style>

17.Vue3/project/src/components/Demo6.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <h2>Demo6</h2>
+    <p>watch:ref定义的基本数据类型</p>
+    <p>这是{{ flower }}只玫瑰</p>
+    <button @click="addFlower">添加</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,watch} from "vue" 
+let flower = ref(5);
+function addFlower() {
+    flower.value += 1;
+}
+watch(flower,(newValue,oldValue)=>{
+    console.log(newValue,oldValue,'打印')
+    if(newValue == 10) {
+        alert("已经可以包装成一束花")
+    }
+},{
+    deep: true,
+    immediate: true
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

17.Vue3/project/src/components/Demo7.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <h2>Demo7</h2>
+    <p>watch:ref定义引用数据类型</p>
+    <p>
+      我叫{{ obj.name }},今年{{ obj.age }}岁,我有一个{{ obj.car.c1 }}和一个{{
+        obj.car.c2
+      }}
+    </p>
+    <button @click="changePerson">修改整体</button>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeCar1">修改第一辆车</button>
+    <button @click="changeCar">修改整体车</button>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, watch } from "vue";
+// ref可以定义引用数据类型
+let obj = ref({
+  name: "111",
+  age: 10,
+  car: {
+    c1: "摩托车",
+    c2: "自行车",
+  },
+});
+
+watch(obj, (newValue, oldValue) => {
+  console.log(newValue, oldValue, "新的");
+},{
+  deep: true,
+  immediate:true
+});
+console.log(obj, "3232");
+function changeName() {
+  obj.value.name = "哈哈";
+  //   obj.value
+}
+function changePerson() {
+  obj.value = {
+    name: "12",
+    age: 20,
+    car: {
+      c1: "11",
+      c2: "22",
+    },
+  };
+}
+function changeCar1() {
+  obj.value.car.c1 = "哈哈哈";
+}
+function changeCar() {
+  obj.value.car = {
+    c1: "1",
+    c2: "2",
+  };
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

17.Vue3/project/src/components/Demo8.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <h2>Demo8</h2>
+    <p>watch:监听reactive定义的引用数据类型</p>
+    <p>我叫{{ obj.name }},今年{{ obj.age }}岁,我有一个{{ obj.car.c1 }}和一个{{ obj.car.c2 }}</p>
+    <button @click="changePerson">修改整体</button>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeCar1">修改第一辆车</button>
+    <button @click="changeCar">修改整体车</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive,watch} from "vue" 
+let obj = reactive({
+    name:'小明',
+    age:10,
+    car:{
+        c1:'摩托车',
+        c2:"自行车"
+    }
+})
+console.log(obj,'obj')
+function changeName() {
+    obj.name = '小红';
+}
+function changePerson() {
+    // obj = {
+    //     name:'天天',
+    //     age: 7
+    // }
+    // obj.name = '天天';
+    // obj.age = 7;
+    Object.assign(obj,{
+        name:'天天',
+        age: 7,
+        car:{
+            c1:1,
+            c2:2
+        }
+    })
+}
+function changeCar1() {
+    obj.car.c1 = '摩托车1'
+}
+function changeCar() {
+    obj.car = {
+        c1:"花花",
+        c2:'图图'
+    }
+}
+watch(obj,(newValue,oldValue)=>{
+  console.log(newValue,oldValue,'第三种')
+},{
+  deep: true,
+  immediate: true
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

17.Vue3/project/src/components/Demo9.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <h2>Demo9</h2>
+    <p>watch:监听reactive/ref定义的引用数据类型中的某个属性</p>
+    <p>我叫{{ obj.name }},今年{{ obj.age }}岁,我有一个{{ obj.car.c1 }}和一个{{ obj.car.c2 }}</p>
+    <button @click="changePerson">修改整体</button>
+    <button @click="changeName">修改名字</button>
+    <button @click="changeCar1">修改第一辆车</button>
+    <button @click="changeCar">修改整体车</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive,watch} from "vue" 
+let obj = reactive({
+    name:'小明',
+    age:10,
+    car:{
+        c1:'摩托车',
+        c2:"自行车"
+    }
+})
+console.log(obj,'obj')
+function changeName() {
+    obj.name = '小红';
+}
+function changePerson() {
+    // obj = {
+    //     name:'天天',
+    //     age: 7
+    // }
+    // obj.name = '天天';
+    // obj.age = 7;
+    Object.assign(obj,{
+        name:'天天',
+        age: 7,
+        car:{
+            c1:1,
+            c2:2
+        }
+    })
+}
+function changeCar1() {
+    obj.car.c1 = '摩托车1'
+}
+function changeCar() {
+    obj.car = {
+        c1:"花花",
+        c2:'图图'
+    }
+}
+watch(()=>obj.car,(newValue,oldValue)=>{
+  console.log(newValue,oldValue,'第四种')
+},{
+  deep: true,
+  immediate: true
+})
+// watch(()=>obj.name,(newValue,oldValue)=>{
+//   console.log(newValue,oldValue,'第四种')
+// },{
+//   deep: true,
+//   immediate: true
+// })
+</script>
+
+<style lang="scss" scoped>
+</style>