先写一个这样的界面
注意: 要读取和操作numbers里面的a或者b 要写成numbers.a 的形式
<h3>a的值是:{{numbers.a}}</h3>
<button @click="numbers.a++">点我让a+1</button>
<h3>b的值是:{{numbers.b}}</h3>
<button @click="numbers.b++">点我让b+1</button>data:{
isHot:true,
numbers:{
a:1,
b:1
}
},监视多级结构中某个属性的变化
使用watch
注意 监视多级结构中某个属性的变化的时候, 需要用引号将属性引起来
watch:{
//监视多级结构中某个属性的变化
'numbers.a':{
handler(){
console.log('a被更改了')
}
},监视多级结构中所有属性的变化
因为numbers中存在多级结构, 要监视所有属性的变化情况, 属于深度监测 使用deep:true 开启深度监测
watch:{
//监视多级结构中所有属性的变化
numbers:{
deep:true,
handler(){
console.log("numbers改变了")
}
}}如果不开启deep:true 那么只有在numbers本身发生变化的时候才会被监测到 例如:
<button @click="numbers={a:666,b:333}">彻底替换掉numbers</button>总结
深度监测:
(1)Vue中的watch默认不监测对象内部值的改变(一层)
(2)配置deep:true可以监测对象内部值改变(多层)
备注:
(1)Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以
(2)使用watch时根据数据的具体结构,决定是否采用深度监测
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>深度监视</title>
<script type="text/javascript" src="../js/vue.js"> </script><!-- 引入Vue-->
</head>
<!--
深度监测:
(1)Vue中的watch默认不监测对象内部值的改变(一层)
(2)配置deep:true可以监测对象内部值改变(多层)
备注:
(1)Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以
(2)使用watch时根据数据的具体结构,决定是否采用深度监测
-->
<body>
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="change">切换天气</button>
<hr>
<h3>a的值是:{{numbers.a}}</h3>
<button @click="numbers.a++">点我让a+1</button>
<h3>b的值是:{{numbers.b}}</h3>
<button @click="numbers.b++">点我让b+1</button>
<button @click="numbers={a:666,b:333}">彻底替换掉numbers</button>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:"#root",
data:{
isHot:true,
numbers:{
a:1,
b:1
}
},
computed:{
info(){
return this.isHot? '炎热' : '凉爽'
}
},
methods: {
change(){
this.isHot = !this.isHot
}
},
watch:{
isHot:{ //这里也可以监视computed里面的
// immediate:true, //初始化时让handler调用一下
//handler什么时候调用? 当isHot发生改变时.
handler(newValue,oldValue){
console.log("isHot被修改了",newValue,oldValue)
}
},
//监视多级结构中某个属性的变化
// 'numbers.a':{
// handler(){
// console.log('a被更改了')
// }
// },
//监视多级结构中所有属性的变化
numbers:{
deep:true,
handler(){
console.log("numbers改变了")
}
}
}
})
</script>
</html>