什么是侦听器呢?
侦听器的用法如下:
选项:watch
类型:{ [key: string]: string | Function | Object | Array}
例子
<body>
<div id="app">div>
script>
<script>
Vue.createApp({
template:`
{{counter}}
`,
data:function(){
return{
counter:0,
}
},
watch:{
counter:function(newValue,old){
console.log(newValue,old)
}
},
methods:{
incerment(){
this.counter++;
},
decrement(){
this.counter--;
}
}
}).mount('#app')
script>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="https://unpkg.com/vue@next">script>
head>
<body>
<div id="app">
div>
<template id="tem">
<div>{{counter}}div>
<div>{{info.name}}div>
<div>{{info.abc.age}}div>
<button @click='infoname'>改变info.namebutton>
<button @click='b'>改变info.a.agebutton>
<button @click='incerment'>+1button>
<button @click='decrement'>-1button>
template>
script>
<script>
Vue.createApp({
template:'#tem',
data:function(){
return{
counter:0,
info:{name:"kabe",abc:{age:"18"}}
}
},
watch:{
// 普通侦听
info(newInfo, oldInfo) {
console.log("newValue:", newInfo, "oldValue:", oldInfo);
}
// 为了发现对象内部值的变化,可以在选项参数中指定 deep: true (深度监听)
//deep: true
//在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调(一开始就监听)
// immediate:true
},
methods:{
incerment(){
this.counter++;
},
decrement(){
this.counter--;
},
infoname(){
this.info.name="bbbb"
},
b(){
this.info.abc.age="20"
},
}
,
created(){
//使用watch API进行侦听
// const unwatch =this.$watch("info",(newInfo, oldInfo)=>{
// console.log(newInfo, oldInfo);
// },
// {
// deep:true,
// immediate: true
// })
//取消侦听unwatch()
//unwatch()
},
}).mount('#app')
script>
body>
html>
我们可以在created的生命周期(后续会讲到)中,使用 this.$watchs 来侦听;
vm.$watch( expOrFn, callback, [options] )
参数:
{string | Function} expOrFn
{Function | Object} callback
{Object} [options]
{boolean} deep
{boolean} immediate
返回值:{Function} unwatch
第一个参数是要侦听的源;
第二个参数是侦听的回调函数callback;
第三个参数是额外的其他选项,比如deep、immediate;
// 键路径
vm.$watch('a.b.c', function (newVal, oldVal) {
// 做点什么
})
// 函数
vm.$watch(
function () {
// 表达式 `this.a + this.b` 每次得出一个不同的结果时
// 处理函数都会被调用。
// 这就像监听一个未被定义的计算属性
return this.a + this.b
},
function (newVal, oldVal) {
// 做点什么
}
)
vm.$watch 返回一个取消观察函数,用来停止触发回调:
var unwatch = vm.$watch('a', cb)
// 之后取消观察
unwatch()
选项:deep
为了发现对象内部值的变化,可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做。
vm.$watch('someObject', callback, {
deep: true
})
vm.someObject.nestedValue = 123
// callback is fired
选项:immediate
在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调:
vm.$watch('a', callback, {
immediate: true
})
// 立即以 `a` 的当前值触发回调
注意在带有 immediate 选项时,你不能在第一次回调时取消侦听给定的 property。
// 这会导致报错
var unwatch = vm.$watch(
'value',
function () {
doSomething()
unwatch()
},
{ immediate: true }
)
如果你仍然希望在回调内部调用一个取消侦听的函数,你应该先检查其函数的可用性:
var unwatch = vm.$watch(
'value',
function () {
doSomething()
if (unwatch) {
unwatch()
}
},
{ immediate: true }
)