文章目录
监听器 watch
官方文档：https://cn.vuejs.org/v2/api/#watch
官方文档：https://cn.vuejs.org/v2/api/#vm-watch
实例：监听器 watch
Watch 用法1：常见用法
<body>
<div id="root">
<h3>Watch 用法1：常见用法</h3>
<input v-model="message">
<span>{{copyMessage}}</span>
</div>
<script>
new Vue({
el: '#root',
watch: {
message(value) {
this.copyMessage = value
}
},
data() {
return {
message: 'Hello Vue',
copyMessage: ''
}
}
})
</script>
</body>
键值一体，键为message，值为message()方法
message(value) {
this.copyMessage = value
}
监听器的一些默认值：
Watch 用法2：绑定方法
<body>
<div id="root2">
<h3>Watch 用法2：绑定方法</h3>
<input v-model="message">
<span>{{copyMessage}}</span>
</div>
<script>
new Vue({
el: '#root2',
watch: {
message: 'handleMessage'
},
data() {
return {
message: 'Hello Vue',
copyMessage: ''
}
},
methods: {
handleMessage(value) {
this.copyMessage = value
}
}
})
</script>
</body>
键为message，值为’handleMessage()方法，每次监听到message变化，'handleMessage()方法就会执行一次
PS：双向绑定的值（
v-model="message"和data() {return {message}}）和watch监听的键要保持一致，同为message
Watch 用法3：deep + handler
<body>
<div id="root3">
<h3>Watch 用法3：deep + handler</h3>
<input v-model="deepMessage.a.b">
<span>{{copyMessage}}</span>
</div>
<script>
new Vue({
el: '#root3',
watch: {
deepMessage: {
handler: 'handleDeepMessage',
deep: true
}
},
data() {
return {
deepMessage: {
a: {
b: 'Deep Message'
}
},
copyMessage: ''
}
},
methods: {
handleDeepMessage(value) {
this.copyMessage = value.a.b
}
}
})
</script>
</body>
默认情况下 watch方法只监听data中的对象，而无法监听到对象内部属性的改变，此时就需要deep属性对对象进行深度监听。（默认：deep:false）
这个案例可以看出：双向绑定的值（v-model="deepMessage.a.b"和deepMessage:{a: {b:'Deep Message'}},）保持一致；watch不能直接监听deepMessage.a.b，而是需要通过handler和deep属性来完成监听
Watch 用法4：immediate
<body>
<div id="root">
<div id="root4">
<h3>Watch 用法4：immediate</h3>
<input v-model="message">
<span>{{copyMessage}}</span>
</div>
<script>
new Vue({
el: '#root4',
watch: {
message: {
handler: 'handleMessage',
immediate: true,
}
},
data() {
return {
message: 'Hello Vue',
copyMessage: ''
}
},
methods: {
handleMessage(value) {
this.copyMessage = value
}
}
})
</script>
</body>
watch默认情况下在页面首次渲染时，即使监听的值有初始值，也不会直接执行，这种情况下想要第一次渲染后直接监听就需要添加属性：immediate: true
initWatch
createWatch
Watch 用法5：绑定多个 handler
<body>
<div id="root5">
<h3>Watch 用法5：绑定多个 handler</h3>
<input v-model="message">
<span>{{copyMessage}}</span>
</div>
<script>
new Vue({
el: '#root5',
watch: {
message: [{
handler: 'handleMessage',
},
'handleMessage2',
function(value) {
this.copyMessage = this.copyMessage + '...'
}]
},
data() {
return {
message: 'Hello Vue',
copyMessage: ''
}
},
methods: {
handleMessage(value) {
this.copyMessage = value
},
handleMessage2(value) {
this.copyMessage = this.copyMessage + '*'
}
}
})
</script>
</body>
监听值为多个，需要用数组形式：
- 值为对象：执行对象的handler属性值对应方法handleMessage
- 值为字符串：执行字符串对应方法handleMessage2
- 值为方法：直接执行方法
先监听的先执行，各自独立，每个都是独立的监听器
本示例中value都是一致的，只有handleMessage获取了这个value，其他监听器处理的都是上一步处理过的copyMessage
若多个监听器监听同一个对象，那么只会渲染最后一次处理结果
Watch 用法6：监听对象属性
<body>
<div id="root6">
<h3>Watch 用法6：监听对象属性</h3>
<input v-model="deepMessage.a.b">
<span>{{copyMessage}}</span>
</div>
<script>
new Vue({
el: '#root6',
watch: {
'deepMessage.a.b': 'handleMessage'
},
data() {
return {
deepMessage: { a: { b: 'Hello Vue' } },
copyMessage: ''
}
},
methods: {
handleMessage(value) {
this.copyMessage = value
}
}
})
</script>
</body>
只监听对象的某少数个属性值时，可以用对象.属性字符串形式进行监听
