1、简介
监视属性watch：
1.当被监视的属性变化时，回调函数自动调用，进行相关操作
2.监视的属性必须存在，才能进行监视！！
3.监视的两种写法：
(1) new Vue时传入watch配置
(2) 通过vm.$watch监视
深度监测：
(1) Vue中的watch默认不监测对象内部值的改变（一层）
(2) 配置deep:true可以监测对象内部值改变（多层）
备注：
(1) Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
(2) 使用watch时根据数据的具体结构，决定是否采用深度监视
学习Vue之前最后会一些HTML和CSS的基础知识，HTML基础知识 传送门，CSS基础知识 传送门。
2、监视属性
1. 天气案例
在vscode中创一个新目录，叫“08_监视属性”，在下面创建一个“1_计算属性方式实现.html”文件，在里面输入以下代码：
<!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 type="text/javascript" src="../js/development/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
<script type="text/javascript">
Vue.config.douctionTip = false
new Vue({
el:'#root',
data:{
isHot:true
},
computed:{
info(){
return this.isHot ? '炎热':'凉爽'
}
},
methods:{
changeWeather(){
this.isHot = !this.isHot
}
}
})
</script>
</body>
</html>
该案例，当点击按钮时，会调用changeWeather方法，赋值isHot为isHot的取反的值
2. 监视属性
第一种写法
可以监视Vue中的属性，当发生变化时会被调用
<!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 type="text/javascript" src="../js/development/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
<script type="text/javascript">
Vue.config.douctionTip = false
new Vue({
el:'#root',
data:{
isHot:true
},
computed:{
info(){
return this.isHot ? '炎热':'凉爽'
}
},
methods:{
changeWeather(){
this.isHot = !this.isHot
}
},
watch:{
isHot:{
//初始化时立即调用一下
// immediate:true,
//handler什么时候调用？当IsHot发生改变时被调用,可以接收两个值，第一个为修改后，第二个为修改前
handler(newValue,oldValue){
console.log('isHot被修改该了',newValue,oldValue)
}
}
}
})
</script>
</body>
</html>
使用场景：比如当气温低于15度是时，提醒多穿衣服：
<!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 type="text/javascript" src="../js/development/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
<script type="text/javascript">
Vue.config.douctionTip = false
new Vue({
el:'#root',
data:{
isHot:true,
temperature:20
},
computed:{
info(){
return this.isHot ? '炎热':'凉爽'
}
},
methods:{
changeWeather(){
this.isHot = !this.isHot
this.temperature--
}
},
watch:{
temperature:{
//初始化时立即调用一下
// immediate:true,
//handler什么时候调用？当IsHot发生改变时被调用,可以接收两个值，第一个为修改后，第二个为修改前
handler(newValue,oldValue){
console.log('isHot被修改该了',newValue,oldValue)
if(newValue < 15){
alert('天冷啦，多穿衣服')
}
}
}
}
})
</script>
</body>
</html>
第二种写法
<!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 type="text/javascript" src="../js/development/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
<script type="text/javascript">
Vue.config.douctionTip = false
const vm = new Vue({
el:'#root',
data:{
isHot:true
},
computed:{
info(){
return this.isHot ? '炎热':'凉爽'
}
},
methods:{
changeWeather(){
this.isHot = !this.isHot
}
},
})
vm.$watch('isHot',{
handler(newValue,oldValue){
console.log('isHot被修改该了',newValue,oldValue)
}
})
</script>
</body>
</html>
3. 深度监视
以上监测都是针对一级属性监测，当存在多级属性时如何进行检测呢？
多级监测
比如：numbers属性下存在两个属性a和b，我们只针对a变动做检测
再使用以上方式就不可以了，这会必须使用’numbers.a’这种方式，注意这里不能直接简写为numbers.a必须用引号引起来，完整代码如下：
<!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 type="text/javascript" src="../js/development/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
<hr>
<h3>a的值是{{numbers.a}}</h3>
<button @click="numbers.a++">点我让a+1</button>
</div>
<script type="text/javascript">
Vue.config.douctionTip = false
new Vue({
el:'#root',
data:{
isHot:true,
numbers:{
a:1,
b:1
}
},
computed:{
info(){
return this.isHot ? '炎热':'凉爽'
}
},
methods:{
changeWeather(){
this.isHot = !this.isHot
}
},
watch:{
'numbers.a':{
//handler什么时候调用？当IsHot发生改变时被调用,可以接收两个值，第一个为修改后，第二个为修改前
handler(newValue,oldValue){
console.log('a被改变了',newValue,oldValue)
}
}
}
})
</script>
</body>
</html>
深度监测
以上面代码为例，如果想a或者b任意一个发生变化时都可以监测到，你可能想可以这样写：
watch:{
'numbers':{
handler(newValue,oldValue){
console.log('numbers被改变了',newValue,oldValue)
}
}
}
明确告诉大家，这样是不可以的，如下图，这样写只会监测粉色线中的部分，并不会监测绿色内的部分
像这种方式我们只需要加一个配置即可：
deep:true,
完整代码如下：
<!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 type="text/javascript" src="../js/development/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
<hr>
<h3>a的值是{{numbers.a}}</h3>
<button @click="numbers.a++">点我让a+1</button>
<hr>
<h3>b的值是{{numbers.b}}</h3>
<button @click="numbers.b++">点我让b+1</button>
<button @click="numbers={a:111,b:222}">彻底替换掉numbers</button>
</div>
<script type="text/javascript">
Vue.config.douctionTip = false
new Vue({
el:'#root',
data:{
isHot:true,
numbers:{
a:1,
b:1
}
},
computed:{
info(){
return this.isHot ? '炎热':'凉爽'
}
},
methods:{
changeWeather(){
this.isHot = !this.isHot
}
},
watch:{
'numbers':{
deep:true,
handler(newValue,oldValue){
console.log('numbers被改变了',this.numbers.a,this.numbers.b)
}
}
}
})
</script>
</body>
</html>
4. 监测属性的简写形式
Vue中简写形式
<!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 type="text/javascript" src="../js/development/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
<script type="text/javascript">
Vue.config.douctionTip = false
new Vue({
el:'#root',
data:{
isHot:true,
numbers:{
a:1,
b:1
}
},
computed:{
info(){
return this.isHot ? '炎热':'凉爽'
}
},
methods:{
changeWeather(){
this.isHot = !this.isHot
}
},
watch:{
//正常写法
// 'isHot':{
// //immediate:true, //初始化时让handler调用一下
// //deep:true, //深度监视
// handler(newValue,oldValue){
// console.log('isHot被改变了',this.numbers.a,this.numbers.b)
// }
// }
//简写形式
isHot(){
console.log('isHot被改变了',this.numbers.a,this.numbers.b)
}
}
})
</script>
</body>
</html>
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>Document</title>
<script type="text/javascript" src="../js/development/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
<script type="text/javascript">
Vue.config.douctionTip = false
const vm = new Vue({
el:'#root',
data:{
isHot:true,
numbers:{
a:1,
b:1
}
},
computed:{
info(){
return this.isHot ? '炎热':'凉爽'
}
},
methods:{
changeWeather(){
this.isHot = !this.isHot
}
},
})
//正常写法
// vm.$watch('isHot',{
// immediate:true,
// deep:true,
// handler(newValue,oldValue){
// console.log('isHot被修改了',newValue,oldValue)
// }
// })
//简写方式
vm.$watch('isHot',function(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
})
</script>
</body>
</html>
3、测试
我们来检测一个不存在的属性’123’来看看效果
<!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 type="text/javascript" src="../js/development/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
<script type="text/javascript">
Vue.config.douctionTip = false
const vm = new Vue({
el:'#root',
data:{
isHot:true
},
computed:{
info(){
return this.isHot ? '炎热':'凉爽'
}
},
methods:{
changeWeather(){
this.isHot = !this.isHot
}
},
})
vm.$watch('123',{
handler(newValue,oldValue){
console.log('isHot被修改该了',newValue,oldValue)
}
})
</script>
</body>
</html>
以上代码的效果为，正常执行，也不会报错，但不会监视到内容，所以也不会执行监视内部的代码
4、小结
如果只要要监视的属性，可以直接在new Vue中写
不确定要监视的属性，可以使用vm.$watch()方式
多级监测属性时，不能使用简写方式，必须用引号引起来
深度监测属性时，需要加一个配置：deep:true
当需要使用immediate或deep等配置是，不能使用监测属性的简写形式
标签：教程,Vue,之超,watch,isHot,numbers,Vue2,true,newValue From： https://www.cnblogs.com/lirongyang/p/17369825.html