一、Vue2笔记--基础篇--09-监视属性
（1）普通监视
监视属性watch： 1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作 2.监视的属性必须存在，才能进行监视！！ 3.监视的两种写法： (1).new Vue时传入watch配置 (2).通过vm.$watch监视 （全局）
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el: '#root',
data: {
isHot: true,
},
methods: {
changeWeather() {
this.isHot = !this.isHot
}
},
computed: {
info() {
return this.isHot ? '炎热' : '凉爽'
}
},
// 监视属性
watch:{
监视的对象{监视的人}
isHot:{
// 没加，刚刚打开不执行，加了，初始化时让handler调用一下，就执行了
immediate:true,
// handler什么时候调用？ 【当isHot发生改变时。】
handler(newValue, oldValue){
console.log('isHot被修改了', newValue, oldValue)
}
}
}
})
</script>==================== 监视属性的属性方法 ======================
1、immediate: true, 没加，刚刚打开不执行，加了，初始化时让 handler方法 调用一下，就执行了
2、handler(newValue, oldValue) { }方法 ：handler什么时候调用？ 【当监视对象（人）发生改变时。】
handler(newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue)
}- newValue -- 现在所在的状态 oldValue -- 前一个状态
（2）深度监视
深度监视： (1).Vue中的watch默认不监测对象内部值的改变（一层）。 (2).配置deep:true可以监测对象内部值改变（多层）。 备注： (1).Vue自身可以监测对象内部值的改变，但Vue提供的 watch 默认不可以！ (2).使用 watch 时根据数据的具体结构，决定是否采用深度监视。
- data下面的numbers有多个属性
- watch监视多级结构中【 某个 】属性的变化
【注意：多个单词和多层结果，需要加 引号 ，上面不加是简写，实际上，这个是键值，需要加上去】
watch: {
//监视多级结构中【 某个 】属性的变化
'numbers.a':{
handler(){
console.log('a被改变了')
}
}
}- 监视多级结构中【 所有 】属性的变化
deep: true, deep 的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器
【注意】但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。
watch: {
// 监视多级结构中【 所有 】属性的变化
numbers: {
deep: true,
handler() {
console.log('numbers改变了')
}
}
}（3）监视属性的全局写法和简写
- 全局写法
需要给Vue实例对象赋值给一个变量vm， 全局配置下，用该实例变量调用，还需要加一个 $ ， 注意：全局监视下，监视的对象需要加引号，不加就是监视变量了 , this指向还是Vue实例
- 简写
条件：只用了 handle()方法，且不用其他属性
- 写在实例里面
watch: {
// （1）正常写法
small:{
// immediate:true, //初始化时让handler调用一下
// deep:true,//深度监视
handler(newValue,oldValue){
console.log('small被修改了',newValue,oldValue)
}
},
// （2）简写【注意：需要配置项（例如deep深度监视）时，就不能使用简写形式】
isHot(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue,this)
}
}- 写在实例外面
// （1）正常写法
vm.$watch('small',{
immediate:true, //初始化时让handler调用一下
deep:true, //深度监视
handler(newValue,oldValue){
console.log('small被修改了',newValue,oldValue)
}
})
// （2）简写（箭头函数Vue 指向window）
vm.$watch('isHot', function(newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue, this)
})（4）对比计算属性
computed和watch之间的区别： 1. computed能完成的功能，watch都可以完成。 2. watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作，当面临异步的时候，用watch更好，因为computed 是靠返回值return 两个重要的小原则： 1. 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。 2. 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。 备注： 1. 使用普通函数，因为定时器是window下的，this直接指向window 2. 使用箭头函数，就可以找到，箭头函数本身没有this指向，会向上查找，找到监视的对象，他是Vue管理的函数，所以this指向vm
- 定时器案例 -- 用监视属性
<body>
<!-- 准备好一个容器-->
<div id="root">
姓：<input type="text" v-model="firstName"> <br /><br /> 名：
<input type="text" v-model="lastName"> <br /><br /> 全名：
<span>{{fullName}}</span> <br /><br />
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el: '#root',
data: {
firstName: '张',
lastName: '三',
fullName: '张-三'
},
// 当面临异步的时候，用watch更好，因为computed 是靠返回值return
watch: {
// 不需要配置项，可以简写
firstName(val) {
// 当需要异步任务时候，用不了计算属性，只能用监视属性
setTimeout(() => {
console.log(this)
this.fullName = val + '-' + this.lastName
}, 1000);
},
lastName(val) {
this.fullName = this.firstName + '-' + val
}
}
})
</script>腾讯云开发者
