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>