<body>
<div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="questions.question">
</p>
<p>{{ answer }}</p>
</div>
</body>
var watchExampleVM = new Vue({
el: '#watch-example',
data: {
questions: {
question: {}
},
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
// 如果 `question` 发生改变,这个函数就会运行
'questions.question': {
handler(value, oldValue) {
this.answer = 'Waiting for you to stop typing...'
this.debouncedGetAnswer()
}
},
deep: true;
},
示例:为官网示例
注意: handler 是固定函数,严禁自定义 handle (作者亲测)
使用deep
需要使用watch
的完整形式:
handler是监听回调函数,
deep: 监听其内部属性的变化
deep属性对对象进行深度监听
immediate: true 赋初值时就进行监听函数