在最新的vue文档中 监视属性更名为侦听属性
侦听属性watch：
1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2.监视的属性必须存在，才能进行监视！
3.监视的两种写法：
(1).new Vue时传入watch配置
(2).通过vm.$watch监视
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>监视属性</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>当前数值为：{{number}}</h2>
<button @click="changeNumber">number++</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
number: 1
},
methods: {
changeNumber(){
this.number++
}
},
// 第一种写法 new Vue时传入watch配置
// watch:{
// number:{
// //handler什么时候调用？当number发生改变时。
// handler(newValue,oldValue){
// console.log('number被修改了',newValue,oldValue)
// }
// }
// }
})
// 第二种写法 通过vm.$watch监视
vm.$watch('number', {
immediate:true, //初始化时让handler调用一下
function (newValue,oldValue) {
console.log('number被修改了', newValue,oldValue)
}
})
</script>
</html>在配置对象的方法里面有两个参数 newValue, oldValue
newValue 属性被修改之后的值
oldValue 属性被修改之前的值
在配置对象中还有一个配置项：immediate:true
初始化时让handler调用一下
深度监视
深度监视：
(1).Vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变（多层）。
备注：
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>天气案例_深度监视</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h3>a的值是:{{numbers.a}}</h3>
<button @click="numbers.a++">点我让a+1</button>
<h3>b的值是:{{numbers.b}}</h3>
<button @click="numbers.b++">点我让b+1</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root',
data:{
isHot:true,
numbers:{
a:1,
b:1,
c:{
d:{
e:100
}
}
}
},
watch:{
isHot:{
//监视多级结构中某个属性的变化
/* 'numbers.a':{
handler(){
console.log('a被改变了')
}
} */
//监视多级结构中所有属性的变化
numbers:{
deep:true,
handler(){
console.log('numbers改变了' + this.numbers)
}
}
}
})
</script>
</html>只要监听的对象内部的值发生了改变都会触发watch种监视当当前属性的函数
监视属性简写
watch属性监听配置项在不考虑 deep:true 和 immediate:true 配置项的时候可以使用简写的形式
在vm.watch对象中的写法
// new Vue时传入watch配置对象中的简写形式
watch:{
number (newValue,oldValue) {
console.log('number被修改了',newValue,oldValue)
}
}在vm.$watch方法中的写法
// 第二种写法 通过vm.$watch监视
vm.$watch('number', function (newValue, oldValue) {
console.log('number被修改了', newValue, oldValue)
})通过函数的方式实现简写
注意：函数不要写成箭头函数（箭头函数内的this会指向window）代码会报错
computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
这样this的指向才是vm 或 组件实例对象。
