1.什么是watch的侦听器
watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。例如：监视用户名的变化并发起请求，判断用户名是否可用
2.watch的基本语法
在watch节点下，定义自己的侦听器
- 监听谁的变化，就把谁作为方法名
<template>
<div>
<h3>watch监听器的基本使用</h3>
<input type="text" v-model.trim="username" />
</div>
</template>
<script>
export default {
name: "MyWatch",
data() {
return {
username: "",
};
},
watch: {
// 监听谁的变化，就把谁作为方法名
username(newVal, oldVal) {
console.log(newVal, oldVal);
},
},
};
</script>
<style lang="less" scoped>
</style>
3.应用场景
3.1 使用watch检测用户名是否可用
监听username的变化，并使用axios发起Ajax请求，检测当前输入的用户名是否可用
<template>
<div>
<h3>watch监听器的基本使用</h3>
<input type="text" v-model.trim="username" />
</div>
</template>
<script>
import axios from "axios";
export default {
name: "MyWatch",
data() {
return {
username: "",
};
},
watch: {
// 监听谁的变化，就把谁作为方法名
async username(newVal, oldVal) {
const { data: res } = await axios.get(
"https://www.escook.cn/api/finduser/" + newVal
);
console.log(res);
},
},
};
</script>
<style lang="less" scoped>
</style>
4.immediate选项
默认情况下，组件在初次加载完毕后不会调用watch侦听器。如果想让watch侦听器立即被调用，则需要使用immediate选项。
- 将侦听器变为一个对象
- handler:是处理函数
- immediate:是否立即被调用，默认为false
<template>
<div>
<h3>watch监听器的基本使用</h3>
<input type="text" v-model.trim="username" />
</div>
</template>
<script>
import axios from "axios";
export default {
name: "MyWatch",
data() {
return {
username: "admin",
};
},
watch: {
// 监听谁的变化，就把谁作为方法名
username: {
async handler(newVal, oldVal) {
const { data: res } = await axios.get(
"https://www.escook.cn/api/finduser/" + newVal
);
console.log(res);
},
immediate: true,
},
},
};
</script>
<style lang="less" scoped>
</style>
5.deep选项
当watch如果监听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用deep选项
例如：如果想要监听info.username的值是否发生变化，如果发生变化了，则做一些操作：
- 使用deep属性，设置为true
- 只要info的任何一个属性发生了变化，都会触发这个侦听器
<template>
<div>
<h3>watch监听器的基本使用</h3>
<input type="text" v-model.trim="info.username" />
</div>
</template>
<script>
import axios from "axios";
export default {
name: "MyWatch",
data() {
return {
username: "admin",
info: {
username: "zs",
},
};
},
watch: {
// 监听谁的变化，就把谁作为方法名,或者是键名
info: {
async handler(newVal, oldVal) {
const { data: res } = await axios.get(
"https://www.escook.cn/api/finduser/" + newVal
);
console.log(res);
},
immediate: true,
deep: true,
},
},
};
</script>
<style lang="less" scoped>
</style>
6.监听对象单个属性的变化
如果只想监听对象中单个属性的变化，则可以按照如下的方式：
但是其实可以改写下面这种，也可以监听到对象的某个属性的变化
"对象.属性名":{
hander(newVal,oldVal){
}
}
示例代码如下：
watch: {
"info.username": {
async handler(newVal, oldVal) {
const { data: res } = await axios.get(
"https://www.escook.cn/api/finduser/" + newVal
);
console.log(res);
},
},
},
7.计算属性VS侦听器
计算属性和侦听器应用场景不同
计算属性侧重监听多个值的变化，最终计算并返回一个新值
侦听器侧重于监听单个数据的变化，最终执行特定的业务处理，不需要有任何返回值
总结
侦听器watch.png
