Vue $watch() 方法
示例
使用$watch()方法创建一个观察程序，每次“值”数据属性更改时都会写入一条新消息。
mounted() {
this.$watch('value', function() {
this.results.push('$watch() method')
})
}
请参阅下面的更多示例。
定义和用法
这个$watch()方法用于创建观察者。
这个$watch()方法返回一个停止函数，我们可以用它来停止观察者。 （参见示例4）
观察者被设置为观察值的变化（第一个参数），并在变化发生时执行某些操作（第二个参数）。还可以为观察者定义其他属性（第三个参数）。
| Argument | Description |
|---|---|
| watch source | Required. The first argument is the watch source. This can be a component property name string (Example above), a simple dot-delimited path string (Example 5), or a function (Example 6). |
| callback function | Required. The second argument is a callback function that runs when there is a change in the watch source. The callback function can be set up to receive the new and old value of the watch source as arguments (See Example 1). |
| options object | Optional. Here we can specify the options deep, immediate, flush, and onTrigger/onTrack. deep: Default value is 'false'. If the watcher is deep, it also reacts to changes further down in the property the watcher is set up to watch. (See Example 2) immediate: Default value is 'false'. Triggers the watcher immediately after it is created. The old value will be 'undefined' the first time the watcher is triggered when 'immediate' is set to 'true'. (See Example 3) flush: Default value is 'pre'. Specify when to run the callback function relative to when the component is rendered. Possible values are 'pre', 'post' and 'sync'. Use this flush option with caution. onTrigger/onTrack: Used for debugging. Only works in development mode. |
笔记：观察者也可以使用创建watch选项。
更多示例
示例1
使用$watch()每次“值”数据属性更改时，都会使用旧值和新值写入新消息。
<template>
<h2>Example $watch() Method</h2>
<p>Drag the slider to change the value so that the $watch() method is triggered. The callback function writes a message with the new and old values.</p>
<div>
<p><input type="range" min="0" max="10" v-model="value"> Current value: {{ value }}</p>
<ol>
<li v-for="x in results">{{ x }}</li>
</ol>
</div>
</template>
<script>
export default {
data() {
return {
value: 4,
results: []
};
},
mounted() {
this.$watch('value', function(newVal, oldVal) {
this.results.push('Old value:'+oldVal+', new value: '+newVal)
})
}
};
</script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
}
</style>
示例2
使用$watch()方法与deep监视选项设置为“true”。观察者现在可以进一步检测“值”对象内部的变化。
<template>
<h2>Example $watch() Method</h2>
<p>Register an extra hobby for Stuart. The hobbies are stored in an array inside the 'value' object. The $watch() method
is triggered because the 'deep' option is set to 'true' so that the watcher also detects changes further inside the
object.</p>
<div>
<p>Register an extra hobby for Stuart:</p>
<p><input type="text" ref="inpText"></p>
<button v-on:click="regHobby">Register</button>
<ol>
<li v-for="x in watchMessages">{{ x }}</li>
</ol>
</div>
<p>Current 'value' object:</p>
<pre>{{ this.value }}</pre>
</template>
<script>
export default {
data() {
return {
value: {
owner: 'Stuart',
address: 'Faraway Lane',
hobbies: ['Bird watching', 'Trail running']
},
watchMessages: []
};
},
methods: {
regHobby() {
this.value.hobbies.push(this.$refs.inpText.value);
this.$refs.inpText.value = null;
this.$refs.inpText.focus();
}
},
mounted() {
this.$watch('value', function () {
this.watchMessages.push('watcher triggered')
}, {
deep: true
});
}
};
</script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
}
li {
background-color: lightgreen;
}</style>
示例3
使用$watch()方法与immediate监视选项设置为“true”。现在，观察者也会在创建后立即触发。
<template>
<h2>Example $watch() Method</h2>
<p>With the 'immediate' option set to 'true' the watcher is also triggered right after it is created.</p>
<div>
<input type="range" min="0" max="10" v-model="value"> Current value: {{ value }}
<p>Messages from the watcher:</p>
<ol>
<li v-for="x in watchMessages">{{ x }}</li>
</ol>
</div>
</template>
<script>
export default {
data() {
return {
value: 4,
watchMessages: []
};
},
mounted() {
this.$watch('value', (newVal, oldVal) => {
this.watchMessages.push('Old value: '+oldVal+' New value: '+newVal)
}, {
immediate: true
});
}
};
</script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
}
li:first-child {
background-color: lightgreen;
}</style>
示例4
使用返回的停止函数$watch()停止观察者的方法。
<template>
<h2>Example $watch() Method</h2>
<p>Drag the slider to see the watcher work, click the stop button, and drag the slider again to confirm that the watcher has now stopped.</p>
<div>
<p><input type="range" min="0" max="10" v-model="value"> Current value: {{ value }}</p>
<button v-on:click="stopFunc">Stop Watcher</button>
<ol>
<li v-for="x in results">{{ x }}</li>
</ol>
</div>
</template>
<script>
export default {
data() {
return {
value: 4,
results: [],
stopFunc: null
};
},
mounted() {
this.stopFunc = this.$watch('value', function() {
this.results.push('$watch() method')
})
}
};
</script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
}
</style>
示例5
使用点分隔的路径字符串，以便$watch()方法可以监听“value”对象内的“country”属性。
<template>
<h2>Example $watch() Method</h2>
<p>The watcher is set up to watch 'value.country' and will therefore detect when the country is changed inside the 'value' object.</p>
<div>
<p>Register a new country for Stuart to live in:</p>
<p><input type="text" v-model="inpVal"></p>
<button v-on:click="regHobby">Register</button>
<ol>
<li v-for="x in watchMessages">{{ x }}</li>
</ol>
</div>
<p>Current 'value' object:</p>
<pre>{{ this.value }}</pre>
</template>
<script>
export default {
data() {
return {
inpVal: null,
value: {
owner: 'Stuart',
address: 'Faraway Lane',
country: 'Mexico'
},
watchMessages: []
};
},
methods: {
regHobby() {
this.value.country = this.inpVal;
this.inpVal = null;
}
},
mounted() {
this.$watch('value.country', function () {
this.watchMessages.push('watcher triggered')
});
}
};
</script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
}
</style>
示例6
使用中的函数$watch()一种监听多个值变化的方法。
<template>
<h2>Example $watch() Method</h2>
<p>Using a function as the first argument in the watcher to watch for changes in the sum of value A and value B.</p>
<div>
<p>Register a new country for Stuart to live in:</p>
<p>Value A: <input type="range" min="-10" max="20" v-model="inpValA"> {{ inpValA }}</p>
<p>Value B: <input type="range" min="-10" max="20" v-model="inpValB"> {{ inpValB }}</p>
<ol>
<li v-for="x in watchMessages">{{ x }}</li>
</ol>
</div>
</template>
<script>
export default {
data() {
return {
inpValA: 2,
inpValB: 4,
watchMessages: []
};
},
mounted() {
this.$watch(
()=> Number(this.inpValA) + Number(this.inpValB),
function (newVal,oldVal) {
this.watchMessages.push('watcher triggered. A + B = ' + newVal)
}
);
}
};
</script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
}
li {
background-color: lightgreen;
}
</style>
相关页面
Vue教程：Vue 观察者
Vue教程：Vue 方法
Vue教程：Vue v-on 指令
Vue教程：Vue 模板参考
Vue参考：Vue $refs 对象
JavaScript 教程：JS 箭头函数