Vue中的监视属性
1.一个天气案例
有一个坑：
当页面中并没有用到info这个属性的时候，开发者工具不会更新变换之后的数据
<body>
<div id="root">
<h2>今天天气很一般h2>
<button @click="changeWeather">切换天气button>
div>
body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
new Vue({
el: '#root',
data: {
isHot: true
},
computed: {
info() {
return this.isHot ? '炎热' : '凉爽'
}
},
methods: {
changeWeather() {
this.isHot = !this.isHot
}
}
})
script>
一种简写：
在@click后面能够写一些简单的语句，就比如把上面的methods中的changeWeather方法中的语句直接写在@click后面。但是这种情况适用于@click后面放一句语句，但凡后面需要做两件事，这样直接写在@click后就不太合适了
<button @click="isHot=!isHot">切换天气button>
2.监视属性
监视属性watch：
1.当被监视属性变化时，回调函数（handler）自动调用，进行相关操作
2.监视的属性必须存在，才能进行监视
3.监视的两种写法：
（1）new Vue时传入watch配置
（2）通过vm.$watch监视
第一种：在创建的Vue实例中写如下语句(如果很明确要监视谁，可选择第一种方法)
watch: {
isHot: {
immediate: true, //初始化时让handler调用一下
// 这里的handler什么时候被调用？当isHot发生改变时候
handler(newValue, oldValue) {
console.log('isHot被调用了', newValue, oldValue);
}
}
}
第二种：首先保证vue实例创建完成，然后 在先写监视的对象，然后再写一个配置对象（如果创建实例的时候不知道要监视谁，后续根据用户的一些行为知道需要监视，可以调用这个API）
const vm = new Vue({....})
vm.$watch('isHot', {
immediate: true, //初始化时让handler调用一下
// 这里的handler什么时候被调用？当isHot发生改变时候
handler(newValue, oldValue) {
console.log('isHot被调用了', newValue, oldValue);
}
}
)
3.深度监视
（1）Vue中的watch默认不监测对象内部值的变化（一层）
（2）配置deep:true可以监测对象内部值的改变（多层）
备注：
（1）Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
（2）使用watch时根据数据的具体结构，决定是否采用深度监视
data: {
isHot: true, //其实isHot是简写写法，原始的写法是'isHot'
numbers: {
a: 1,
b: 1
}
},
//我要监测a的值的变化,这种形式就是监视多级结构中某个属性的变化
'numbers.a': {
handler() {
console.log('a被改变了');
}
}
//如果想要监视多级结构中所有属性的变化，并且是深入到numbers中的属性的变化，借用一个配置项deep，加上这个选项之后，不管里面的哪一个属性变化都算numbers变化了
numbers: {
deep: true, //默认的是false
handler() {
console.log('a被改变了');
}
}
4.监视属性的简写形式
简写的前提是：不需要immediate、deep，也就是配置项中**只有handler（）**时候，可以开启简写形式
备注：所有Vue管理的函数要写成普通函数，不要写成箭头函数
第一种监视方式：new Vue时传入watch配置
直接以监测的对象为函数名，监测对象名(){}，这里的这个函数就相当于handler()来用，handler中写啥就在这里写啥
isHot(newValue, oldValue) {
console.log('isHot被调用了', newValue, oldValue);
}
第二种监视方式：通过vm.$watch监视
括号中写（监测的对象，函数），这个函数中的内容，就相当于原来handler()
vm.$watch('isHot', function (newValue, oldValue) {
console.log('isHot被调用了', newValue, oldValue);
})