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 属性更改时，才会调用监视器。
注意：声明监视器时应避免使用箭头函数，因为通过 this 关键字无法从 such function 内部访问 Vue 实例。
当使用对象语法编写监视器时（参见下面的示例），可以使用以下选项：
| 选项 | 描述 |
|---|---|
| handler | 这里编写 watch 函数。 |
| 'method name' | 可以通过提供方法名作为字符串来设置一个监视器，以便调用一个方法。 |
| 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 Watchers
Vue 教程：Vue v-model 指令
Vue 参考：Vue $watch() 方法
