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 关键字从此类函数内部访问 Vue 实例。
使用对象语法编写观察程序时（请参见下面的示例），这些选项可用:
| 选项 | 描述 |
|---|---|
| handler | 这是编写watch函数的地方。 |
| 'method name' | 可以通过提供字符串形式的方法名称来设置观察程序来调用方法。 |
| deep | 默认值为"false"。 如果观察者为 deep，它也会对观察者设置要观察的属性中进一步的变化做出反应。 |
| immediate | 默认值为"false"。 创建后立即触发观察者。 当"immediate"设置为"true"时，第一次触发观察者时，旧值将为"undefined"。 |
| flush | 默认值为"pre"。 指定相对于组件渲染时间运行回调函数的时间。 可能的值为"pre"、"post"和"sync"。 请谨慎使用此 flush 刷新选项。 |
| onTrigger/onTrack | 用于调试。 仅适用于开发模式。 |
注意:观察者也可以使用$watch()方法创建。
更多示例
示例
通过对象语法使用观察器。
<template>
<h2>示例 watch 选项</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() 方法
