Vue 'watch' 选项
示例
在 watch 选项中使用监听器，使用 <input type="range"> 使得无法选择 20 到 70 之间的数值。
export default {
data() {
return {
rangeVal: 4
};
},
watch: {
rangeVal(val) {
if( val>20 && val<70) {
if(val<40){
this.rangeVal = 20;
}
else {
this.rangeVal = 70;
}
}
}
}
};
定义和用法
watch 选项是一个对象，包含在 Vue 实例上声明的所有监听器。
监听器是一个函数，其名称与数据属性或计算属性相同。监听器会在具有相同名称的属性更改时自动调用。
当调用监听器时，新值和旧值将作为参数提供给监听器函数。
监听器也可以是点分隔路径，例如 tiger.weight，这样监听器只会在 tiger 对象的 weight 属性更改时调用。
注意: 在声明监听器时应避免使用箭头函数，因为 Vue 实例无法从这种函数内部使用 this 关键字访问。
当使用对象语法编写监听器时（参见下面的示例），以下选项可用
| 选项 | 描述 |
|---|---|
| handler | 在这里编写监听器函数。 |
| '方法名称' | 可以通过提供方法名称作为字符串来设置监听器以调用方法。 |
| deep | 默认值为 'false'。如果监听器是深层次的，它还会对监听器设置的属性中更深层的更改做出反应。 |
| immediate | 默认值为 'false'。在监听器创建后立即触发监听器。当 'immediate' 设置为 'true' 时，监听器第一次触发时，旧值为 'undefined'。 |
| flush | 默认值为 'pre'。指定相对于组件渲染时间运行回调函数的时间。可能的值为 'pre'、'post' 和 'sync'。谨慎使用此 flush 选项。 |
| onTrigger/onTrack | 用于调试。仅在开发模式下有效。 |
注意: 也可以使用 $watch() 方法 创建监听器。
更多示例
示例
使用对象语法使用监听器。
<template>
<h2>Example watch Option</h2>
<p>The 'rangeVal' watcher is written with the object syntax, with immediate: true, so that rangeVal is moved to '70' when the page first loads:</p>
<input type="range" v-model="rangeVal">
<p>rangeVal: <span>{{ rangeVal }}</span></p>
</template>
<script>
export default {
data() {
return {
rangeVal: 40
};
},
watch: {
rangeVal: {
handler(val) {
if (val > 20 && val < 70) {
if (val < 40) {
this.rangeVal = 20;
}
else {
this.rangeVal = 70;
}
}
},
immediate: true
}
}
};
</script>
<style>
span {
padding: 3px;
font-weight: bold;
font-family: 'Courier New', Courier, monospace;
background-color: lightgreen;
}
</style>
相关页面
Vue 教程: Vue 监听器
Vue 教程: Vue v-model 指令
Vue 参考: Vue $watch() 方法
