这是我参与「第四届青训营 」笔记创作活动的第11天
监视属性
监视属性watch:
1.当被监视的属性变化时，回调函数自动调用， 进行相关操作
2.监视的属性必须存在，才能进行监视！！ 3.监视的两种写法：
(1).new Vuel时传入watch配置
(2).通过vm.$watch监视
<body>
<!--准备的容器，id选择器-->
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="change()">切换天气</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:{
change(){
this.isHot = !this.isHot
}
},
/*watch:{
isHot:{
immediate:true,//立即执行，false为默认，true为开启，初始化时让handle调用一下
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
}
}*/
})
vm.$watch('isHot',{
immediate:true,//立即执行，false为默认，true为开启，初始化时让handle调用一下
handler(newValue,oldValue) {
console.log('isHot被修改了', newValue, oldValue)
}
})
</script>
</html>
深度监视
<body>
<!--准备的容器，id选择器-->
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="change()">切换天气</button>
<hr>
<h2>a的值是{{numbers.a}}</h2>
<button @click="numbers.a++">a加1</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;//组织Vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
isHot:true,
numbers:{
a:1,
b:2
}
},
computed:{
info(){
return this.isHot ? '炎热' : '凉爽'
}
},
methods:{
change(){
this.isHot = !this.isHot
}
},
watch:{
isHot:{
immediate:true,//立即执行，false为默认，true为开启，初始化时让handle调用一下
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
},
//监视多级结构中谋个属性的变化
/* 'numbers.a': {
handler(){
console.log('变换了')
}
},*/
//监视多级结构中所有属性的变化
numbers: {
deep:true,
handler(){
console.log('深度监视')
}
}
}
})
/* vm.$watch('isHot',{
immediate:true,//立即执行，false为默认，true为开启，初始化时让handle调用一下
handler(newValue,oldValue) {
console.log('isHot被修改了', newValue, oldValue)
},
})*/
</script>
</html>
深度监视：
(1).Vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变（多层）
备注：
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2),使用watch时根据数据的具体结构，决定是否采用深度监视。
简写：使用函数
watch对比computed
computed.和watch之间的区别：
1.computed能完成的j能watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
1,所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
2,所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数、Promise的回调函数等），最好写成箭头函数， 这样this的指向才是vm或组件实例对象。
