1.监视属性的基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>天气案例-监视属性</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>今天的天气{{weather}}</h1>
<button @click="changeWeather">改变天气</button>
</div>
</body>
<!--
监视属性watch
写法：
1.写在vm实例内部的watch配置
2.写在vm实例外部，vm.$watch
作用：被监视的属性改变时，回调函数执行，进行相关操作
注意：被监视的属性必须存在，计算属性也可以被监视
-->
<script>
const vm = new Vue({
el: "#root",
data: {
isHot: true
},
computed: {
weather() {
return this.isHot ? "炎热" : "凉爽"
}
},
methods: {
changeWeather() {
this.isHot = !this.isHot
}
},
//监视属性的第一种写法，写在实例内部
watch: {
isHot: {
//immediate默认为false，当设置为true时会在一开始就调用一次handler
immediate:true,
//handler在被监视的属性变化时调用
handler(newValue, oldValue) {
console.log("isHot变化了", oldValue, newValue)
}
}
}
})
//监视属性的第二种写法，写在vm实例外部，注意属性要加引号
vm.$watch("weather", {
handler(newValue, oldValue) {
console.log("weather变化了", oldValue, newValue)
}
})
</script>
</html>
2.深度监视
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>天气案例-深度监视</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>a的值为：{{numbers.a}}</h1>
<button @click="numbers.a++">a加一</button>
</div>
</body>
<!--
深度监视
1.作用：监视有多个层级的属性，当对象内部值发生改变时，handler被调用
2.写法：watch中加一个配置项 deep:true
-->
<script>
const vm = new Vue({
el: "#root",
data: {
numbers: {
a: 1,
b: 1,
c: {
c1: 1,
c2: 1
}
}
},
//监视a的变化
watch: {
"numbers.a": {
handler(newValue, oldValue) {
console.log("a变化了", oldValue, newValue)
}
},
//监视整个numbers的变化，numbers中任意属性发生改变，都会触发handler
numbers : {
deep: true, //开启深度监视
handler(newValue, oldValue) {
console.log("numbers变化了", oldValue, newValue)
}
}
}
})
</script>
</html>
3.监视属性简写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>天气案例-监视属性简写</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>今天的天气{{weather}}</h1>
<button @click="changeWeather">改变天气</button>
</div>
</body>
<!--
简写的前提是除了handler不需要其他的配置项
-->
<script>
const vm = new Vue({
el: "#root",
data: {
isHot: true
},
computed: {
weather() {
return this.isHot ? "炎热" : "凉爽"
}
},
methods: {
changeWeather() {
this.isHot = !this.isHot
}
},
watch: {
isHot(newValue, oldValue) {
console.log("isHot变化了", oldValue, newValue)
}
}
})
vm.$watch("weather", function(newValue, oldValue) {
console.log("weather变化了", oldValue, newValue)
})
</script>
</html>
（本文仅作个人学习记录用，如有纰漏敬请指正）
标签：Vue,watch,isHot,weather,numbers,oldValue,监视,newValue From： https://www.cnblogs.com/jmsstudy/p/17533351.html