一.定义
&emssp;当被监视的属性变化时,回调函数自动调用进行相关操作
二.写法
- new Vue时传入watch配置
- 通过vm.$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>监视属性</title>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
isHot:true //表示天气热
},
computed:{
info(){
return this.isHot?'炎热':'凉爽'
}
},
methods:{
changeWeather(){
this.isHot = !this.isHot
}
},
watch:{
isHot:{
// handle什么时候调用? 当isHot发生改变时
handle(newValue,oldValue){
console.log(newValue,oldValue)
}
}
}
})
// 这样的监视和上面的watch是一样的效果
// vm.$watch('isHot',{
// handle(newValue,oldValue){
// console.log(newValue,oldValue)
// }
// })
</script>
</body>
</html>
四.深度监视
- Vue中的watch默认不检测对象内部值得改变(一层)
- 配置deep: true可以检测对象内部值得改变
备注:
Vue自身可以检测对象内部值得改变,但Vue提供得watch默认不允许,使用watch时根据数据得具体结构,决定是否采用深度监测
五.姓名实例(监视属性)
在前面得计算属性中用了计算属性来写得实例,这次用监视属性来改写一下吧。
computed和watch的区别:
1.computed能完成的功能,watch都可以完成
2.watch能完成的,computed不一定能完成,比如:watch可以进行异步操作
两个重要的原则:
1.所被Vue管理的函数,最好写成普通函数,这样this的指向才是VM或组件实例对象。
2.所有不被Vue所管理的函数(定时器的回调函数等),最好写成箭头函数这样this的指向才是vm 或 组件实例对象
<!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>姓名案例(监视属性)</title>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="root">
姓: <input type="text" v-model="firstName">
名: <input type="text" v-model="lastName">
姓名: <span>{{fullName}}</span>
</div>
<script>
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
firstName:'张',
lastName:'三',
fullName:'张 - 三'
},
watch:{
firstName(newValue){
this.fullName = newValue + '-' + this.lastName
},
lastName(newValue){
this.fullName = this.firstName + '-' + newValue
}
}
})
</script>
</body>
</html>