watch监听属性的两种方法
一、什么是watch监听
- watch也就是可以监听到一个值的发生变化的过程,里边分别会有(新值与旧值)两种,它自身的话也会有 (immediate 立刻监听 (读法:in美达 )) 、(deep 深度监听(读法:迪谱)),当监听复杂数据类型的时候需要开启深度监听才可以监听到值的变化。
2、深度监听
(1)Vue中的watch默认不监听对象内部值的改变(一层)
(2)配置deep:true可以监听到对象数组内部值的改变(多层)
备注:
(1)使用watch时根据数据的具体结构,决定是否采用深度监听
二、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./JS/vue.js"></script>
<style>
div{
margin-top: 20px;
}
</style>
</head>
<body>
<div id="root">
<div>今天天气很{{info ? '炎热' : '凉爽'}}</div>
<button @click="info = !info">切换</button>
<div>a的值:{{objs.a}}</div>
<button @click="objs.a++">点击</button>
<div>b的值:{{objs.b}}</div>
<button @click="objs.b++">点击</button>
</div>
<script>
const vm = new Vue({
el:'#root',
data:{
info:true,
objs:{
a:1,
b:1,
}
},
watch:{ //第一种监听方法
//监听单个(简单数据类型)
info:{
// immediate:true, //立即监听
handler(newvalue,odlvalue){
console.log(newvalue,odlvalue,'1111');
}
},
//监听(复杂数据类型(对象、数组))中的单个数据 监听多级结果单个数据变化
'objs.a':{
handler(newvalue,odlvalue){
console.log(newvalue,odlvalue,'1111');
}
},
//监听(复杂数据类型所有数据) 监听多级结果所有数据变化
objs:{
deep:true, //deep深度监听(只有再监听复杂数据类型才需要开启深度监听)
handler(newvalue,odlvalue){
console.log(newvalue,odlvalue,'1111');
}
}
}
})
//第二中监听方法(一般第一种用到的会多一点) //这种用的是Vue实例上面的监听
vm.$watch('info',{
handler(newvalue,odlvalue){
console.log(newvalue,odlvalue);
}
})
</script>
</body>
</html>
三、watch监听属性的两种简写方法
使用watch
简写方法
的话就不能配置立刻监听
与深度监听
了
`完整写法`
//第一中监听方法
//监听(复杂数据类型所有数据) 监听多级结果所有数据变化
objs:{
deep:true, //deep深度监听(只有再监听复杂数据类型才需要开启深度监听)
handler(newvalue,odlvalue){
console.log(newvalue,odlvalue,'1111');
}
}
}
})
`第一种简写方法`
objs(newvalue,odlvalue){
console.log(newvalue,odlvalue,'1111');
}
`完整写法`
//第二中监听方法(一般第一种用到的会多一点) //这种用的是Vue实例上面的监听
vm.$watch('info',{
handler(newvalue,odlvalue){
console.log(newvalue,odlvalue);
}
})
`第二中简写方法`
vm.$watch('info',function(newvalue,odlvalue){
console.log(newvalue,odlvalue);
})