Vue3-Demo实例

watch（监听器）

定义一个方法接收一个监听器，方法中第一个参数是需要监听的数据，可以是一个ref定义的数据、reactive定义的数据，函数返回一个值，一个包含上述内容的数组。第二个参数是一个箭头函数，箭头函数内部可以写具体执行的方法。后面还有很多参数，比如：immediate（初始化调用一次）、deep（深度监听）。
解除监视：在方法中调用监听器既可，如下代码所示。
情况一：监视ref定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。

<template>
  <div class="person">
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
let person = ref({
  name: "张三",
  age: 8,
});

function changeName() {
  person.value.name += "~";
}
function changeAge() {
  person.value.age += 1;
}
function changePerson() {
  person.value = { name: "李四", age: 60 };
}

const uu = watch(
  person,
  (value, old) => {
    console.log(value, old);
    if (value.age > 63) {
      console.log(11);
      uu();
    }
  },
  { deep: true }
);
</script>
</script>

情况二：监视ref或reactive定义的【对象类型】数据中的某个属性，注意点如下：1.若该属性值不是【对象类型】，需要写成函数形式。2.若该属性值是依然是【对象类型】，可直接编，也可写成函数，建议写成函数。

<template>
  <div class="person">
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeC1">修改第一辆车</button>
    <button @click="changeC2">修改第二辆车</button>
    <button @click="changeCar">修改整个车</button>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch } from "vue";
let person = reactive({
  name: "张三",
  age: 8,
  car: {
    c1: "奔驰",
    c2: "宝马",
  },
});

function changeName() {
  person.name += "~";
}
function changeAge() {
  person.age += 1;
}
function changeC1() {
  person.car.c1 = "奥迪";
}
function changeC2() {
  person.car.c2 = "凯美瑞";
}
function changeCar() {
  person.car = { c1: "爱玛", c2: "雅迪" };
}
// 监视reactive对象中某个属性，且该属性是基本类型。写成getter函数式。否则无效监视元。
watch(() => person.name,(value, old) => {
    console.log(value, old);
  }
);

// 监视reactive对象中某个对象，写成getter函数式,这样可以监听整个对象改变。
// 注意：如果对象中某个属性改变时也需要监听，需要加上 {deep：true} 深度监听。
watch(() => person.car,(value, old) => {
    console.log(value, old);
  },{ deep: true }
);
</script>

watchEffect（监听器）

官网：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。
watche对比wacthEffect

 - 都能监听响应式数据的变化，不同的是监听数据变化的方式不同。
 - watche：要明确指出监视的数据。
 - watchEffect：不需要明确指出监视的数据（函数中用到什么响应式属性就监视那些属性）

<template>
  <div class="person">
    <h2>需求：当水温达到60℃，或作水位达到80cm时，给服务器发送请求。</h2>
    <h2>当前水温：{{ temp }}℃</h2>
    <h2>当前水位：{{ height }}cm</h2>
    <button @click="changeTemp">点击水温+10</button>
    <button @click="changeHeight">点击水位+10</button>
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
let temp = ref(10);
let height = ref(0);
function changeTemp() {
  temp.value += 10;
}
function changeHeight() {
  height.value += 10;
}
watchEffect(() => {
  if (temp.value > 60 || height.value > 70) {
    console.log("向服务器发送请求！");
  }
});
</script>