侦听器的基本使用
*官方文档:https://v3.cn.vuejs.org/api/instance-methods.html#watch
-
什么是侦听器?
- 开发中我们data返回的对象中定义了数据,这个数据通过插值语法等方式绑定到template中。
- 当数据变化时,template会自动进行更新来显示最新的数据。
- 但是在某些情况下,我们希望代码逻辑中监听某个数据的变化,这个时候就需要侦听器watch来完成。
-
侦听器的用法:
- 选项 : watch
- 类型 :{[key:string]:string | Function | Object | Array}
-
watch的基本使用:
<template id="my-app">
您的问题:<input type="text" v-model="question">
<button @click="queryAnswer">查找答案</button>
</template>
<SCript src="../js/vue.js"></SCript>
<SCript>
const App = {
template:'#my-app',
data() {
return {
// 侦听question的变化,去进行一些逻辑的处理
question: 'hello Vue3'
}
},
watch: {
// question侦听data中的属性名称
// 第一个参数,newValue,变化后的新值
// 第二个参数,oldValue,变化前的旧值
question(newValue, oldValue) {
console.log("新值:" + newValue, ",旧值:" + oldValue)
this.queryAnswer()
}
},
methods: {
queryAnswer() {
console.log(`你的问题${this.question}的答案是哈哈哈`);
}
},
}
Vue.createApp(App).mount('#app')
</SCript>
-
输入框中的内容每次变化都被侦听到去调用watch的question函数
-
一般watch用来侦听data中的数据变化时,需要的逻辑处理(界面变化可以使用v-model)
侦听器的配置选项
<template id="my-app">
<h2>{{info.name}}</h2>
<button @click="changeInfo">改变info</button>
<button @click="changeInfoName">改变info.name</button>
<button @click="changeInfoNbaName">改变info.nba.name</button>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
info: { name: "why", age: 18, nba: {name: 'kobe'} }
}
},
watch: {
// 默认情况下我们的侦听器只会针对监听的数据本身的改变(内部发生的改变是不能侦听)
// info(newInfo, oldInfo) {
// console.log("newValue:", newInfo, "oldValue:", oldInfo);
// }
// 深度侦听/立即执行(一定会执行一次)
info: {
handler: function(newInfo, oldInfo) {
console.log("newValue:", newInfo.nba.name, "oldValue:", oldInfo.nba.name);
},
deep: true, // 深度侦听
// immediate: true // 立即执行
}
},
methods: {
changeInfo() {
this.info = {name: "kobe"};
},
changeInfoName() {
this.info.name = "kobe";
},
changeInfoNbaName() {
this.info.nba.name = "james";
}
}
}
Vue.createApp(App).mount('#app');
</script>
- 默认情况下我们的侦听器只会针对监听的数据本身的改变(内部发生的改变是不能侦听)
- deep: 设置为true,开始深度侦听
- 设置为深度侦听后,就可以侦听到info内部数据的变化了
- immediate:设置为true后,被侦听的对象在渲染完后,一定会立即执行一次
侦听器的其他方式
- "info.name"这种方式可以单独只监听的info的name属性的变化
- 这种方式Vue3文档中没有提到,但是Vue2文档中有提到的是侦听对象的属性
- 当侦听对象嵌套多层时:
friends: [
{name: "why"},
{name: "kobe"}
]
- 如果监听对象有多层嵌套关系,可以通过v-for遍历该对象后,将每一个值通过prop传递给子组件,再进行监听