基本概念:
观察 Vue 实例上的一个表达式或者一个计算属性的变化。回调函数得到的参数为新值和旧值,在回调函数中可以进行一些异步操作或开销较大的操作。表达式只接受简单的键路径。对于更复杂的表达式,可以用一个函数取代。
简单理解就是通过Vue实例上的数据变化去进行相应的操作,以满足需求。
基本数据类型的监听
<div id="app">
<input type="text" v-model="text1">
<p>{{text2}}</p>
<button @click="change">普通按钮</button>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.2/vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
text1:'',
text2: ''
},
watch:{
text1(newV,oldV){
console.log(newV,oldV);
this.text2 = newV;
}
},
methods:{
change(){
this.text1 += 1;
}
}
})
</script>
对象的监听
对象的监听需要使用handler函数进行监听
注意:在变更 (不是替换) 对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。Vue 并不会保留变更之前值的副本。
可以添加两个选项:
deep 值为一个布尔值,添加该选项为true才能发现对象内部键值的变化
immediate 值为一个布尔值, 添加该选项为true表示立即以当前表达式触发一次回调
添加immediate为true时:只会在初始化时触发一次,之后改变都不会触发
<script>
var vm = new Vue({
el:'#app',
data:{
object:{
a : 12,
b : 13
}
},
watch:{
object : {
handler(newV , oldV) {
console.log(newV)
if(newV.a >= 15) {
console.log(123)
}
},
// deep: true,
immediate: true
}
},
methods:{
change(){
this.object.a++
}
}
})
</script>
添加deep:true 同时,在一定条件下执行某些操作:
<script>
var vm = new Vue({
el:'#app',
data:{
object:{
a : 12,
b : 13
}
},
watch:{
object : {
handler(newV , oldV) {
console.log(newV)
if(newV.a >= 15) {
console.log(123)
}
},
deep: true,
immediate: true
}
},
methods:{
change(){
this.object.a++
}
}
})
</script>
为什么图中的object.a是16呢,因为对象保存的是引用值,又点击了一次按钮,此时object已经变成了{ a: 16 , b : 13}
监听对象中的某个值:
<div id="app">
<button @click="change">普通按钮</button>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.2/vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
object:{
a : 12,
b : 13
}
},
watch:{
'object.a': {
handler(newV){
console.log(newV);
},
immediate : true
}
},
methods:{
change(){
this.object.a++
}
}
})
</script>
当然了,在一个需求中发现路由对象也可以进行监听,分享代码给大家
watch : {
$route: { //监视路由
handler(newV , oldV) {
const path = newV.path; //当路由发生变化时,是可以监听到变化的,然后进行相应的操作就好了
let idx = this.timeLineList.findIndex(item => {
return item.path == path
});
this.timeIndex = idx;
},
immediate: true,
deep: true
}
},