Vue 侦听器
侦听器是一种方法，它会侦听同名的数据属性。
每当数据属性值发生变化时，侦听器就会运行。
如果某个数据属性值需要采取行动，请使用侦听器。
侦听器概念
侦听器是我们将要学习的 Vue 实例中的第四个配置选项。我们已经看过的三个配置选项是 'data'、'methods' 和 'computed'。
与 'data'、'methods' 和 'computed' 一样，侦听器在 Vue 实例中也有一个保留名称：'watch'。
语法
const app = Vue.createApp({
data() {
...
},
手表: {
...
},
computed: {
...
},
methods: {
...
}
})
如顶部绿色区域所述，侦听器监控同名的数据属性。
我们从不调用侦听器方法。它只在属性值改变时自动调用。
新的属性值始终作为输入参数提供给侦听器方法，旧值也是如此。
示例
一个 <input type="range"> 元素用于改变值 'rangeVal'。一个侦听器用于阻止用户选择被认为是无效的 20 到 60 之间的值。
<input type="range" v-model="rangeVal">
<p>{{ rangeVal }}</p>
const app = Vue.createApp({
data() {
rangeVal: 70
},
watch: {
rangeVal(val){
if( val>20 && val<60) {
if(val<40){
this.rangeVal = 20;
}
else {
this.rangeVal = 60;
}
}
}
}
})
自己动手试一试 »
带有新旧值的侦听器
除了新的属性值，前一个属性值也会自动作为输入参数提供给侦听器方法。
示例
我们设置了一个 <div> 元素的点击事件，用方法 'updatePos' 记录鼠标指针的 x 坐标 'xPos'。侦听器利用侦听器方法的新旧输入参数计算新 x 坐标和前一个 x 坐标之间的像素差。
<div v-on:click="updatePos"></div>
<p>{{ xDiff }}</p>
const app = Vue.createApp({
data() {
xPos: 0,
xDiff: 0
},
watch: {
xPos(newVal,oldVal){
this.xDiff = newVal-oldVal
}
},
methods: {
updatePos(evt) {
this.xPos = evt.offsetX
}
}
})
自己动手试一试 »
我们还可以使用新旧值，在输入从无效变为有效的那一刻向用户提供反馈。
示例
一个 <input> 元素的值连接到一个侦听器。如果该值包含 '@' 符号，则被认为是有效的电子邮件地址。用户会收到一个反馈文本，告知输入是否有效、无效，或者是否在上次按键后刚刚变为有效。
<input v-type="email" v-model="inpAddress">
<p v-bind:class="myClass">{{ feedbackText }}</p>
const app = Vue.createApp({
data() {
inpAddress: '',
feedbackText: '',
myClass: 'invalid'
},
watch: {
inpAddress(newVal,oldVal) {
if( !newVal.includes('@') ) {
this.feedbackText = '电子邮件地址无效';
this.myClass = 'invalid';
}
else if( !oldVal.includes('@') && newVal.includes('@') ) {
this.feedbackText = '太棒了！你把它修正了！';
this.myClass = 'valid';
}
else {
this.feedbackText = '电子邮件地址有效 :)';
}
}
}
})
自己动手试一试 »
侦听器 vs. 方法
侦听器和方法都写成函数，但它们之间存在许多差异
- 方法从 HTML 中调用。
- 方法通常在事件发生时调用。
- 方法自动接收事件对象作为输入。
- 我们还可以选择将其他值作为输入发送给方法。
- 侦听器只在被侦听的数据属性值改变时自动调用。
- 侦听器自动接收被侦听属性的新旧值。
- 我们不能选择将任何其他值作为输入发送给侦听器。
侦听器 vs. 计算属性
侦听器和计算属性都写成函数。
当依赖项改变时，侦听器和计算属性都会自动调用，并且从不从 HTML 调用。
以下是计算属性和侦听器之间的一些区别
- 侦听器只依赖于一个属性，即它们被设置为侦听的属性。
- 计算属性可以依赖于许多属性。
- 计算属性像数据属性一样使用，只是它们是动态的。
- 侦听器不会从 HTML 中引用。
