Vue中采用watch用于侦听数据的变化，并在数据发生变化时做出相应。
1. watch的一般用法
<html>
<head>
<meta charset="utf-8">
<title>Vue-test</title>
</head>
<!-- watch使用 -->
<body>
<div id="app">
<input v-model="a"></input>
{{a}}
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data: {
a: 1,
b: 2,
c: 3,
},
watch: {
a: function(newValue, OldValue) {
alert(this.a);
}
}
})
</script>
</body>
</html>
当a的值发生改变时，会执行alert函数。
2. handler，deep与immediate
- deep 表示深度监听，可用于监听某个对象中属性的变化；
- immediate 当其为true时，会立即先执行
handler函数，即在初始化绑定的时候就会执行。
<body>
<div id="app">
<input v-model="a"></input>
{{a}}
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data: {
a: 1,
b: 2,
c: 3,
},
watch: {
a: {
handler(newValue, oldValue) {
alert("immediate" + this.a);
},
immediate: true,
}
}
})
</script>
</body>
上述代码会在初始化页面时，就会先执行一次alert函数。
3. watch同时监听多个参数
watch无法同时监听多个参数，但是可以结合计算属性来完成这一操作：
computed: {
multiData() {
const {a,b,c} = this;
return {a,b,c};
}
},
watch: {
multiData: {
handler(newValue, oldValue) {
alert("multiData were changed");
},
deep: true,
immediate: true,
},
}
网友评论