计算属性与监视属性的区别
计算属性：computed
需要通过已有属性计算得来，不考虑修改最好，不然要调用set方法简写修改
监视属性：watch
前提条件是监视的属性必须存在，
既可以监视data，
又可以监视计算属性/配置项属性：immediate：flase，
改为true，则初始化时调用一次handler（newValue，oldValue）
写法有两种：
- a.创建vue时传入watch：{}配置
- b.通过vm.$watch（）监视
案例：
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data: {
isHot: true,
numbers:{
a:1,
b:1
}
},
computed: {
info() {
return this.isHot ? '炎热' : '凉爽'
}
},
methods: {
changeWeather() {
this.isHot = !this.isHot
}
},
// 方式一
/* watch:{
isHot:{ //还可以监视computed中的info
immediate:true,
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
//输出了新的值，旧的值
}
}
} */
})
// 方式二 // 在vm创建好了的外面 //应用场景后续添加监视
vm.$watch('isHot', {
immediate: true, // 初始化时让handler调用一下
//handler什么时候调用？当isHot发生改变时
handler(newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue)
}
})
</script>
深度监视：在watch中配置deep：true
可以检测对象内部的改变，默认不可以检测对象内部的值，所以在使用数据监视时要考虑是否深度监视。
watch:{
//检测某个属性的变化
'numbers.a':{
handler(){
console.log("a被改变了")
}
}
//检测所有属性的变化
numbers:{
deep:true;
handler(){
console.log("改变了")
}
}
}
简写
watch: {
// 正常写法
// isHot: {
// // immediate:true, //初始化时让handler调用一下
// // deep:true, //深度监视
// handler(newValue, oldValue) {
// console.log('isHot被修改了', newValue, oldValue)
// }
// },
//简写
isHot(newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue, this)
}//不用箭头函数，指向windows
}
})
//正常写法
// vm.$watch('isHot', {
// immediate: true, //初始化时让handler调用一下
// deep: true,//深度监视
// handler(newValue, oldValue) {
// console.log('isHot被修改了', newValue, oldValue)
// }
// })l
//简写
// vm.$watch('isHot', (newValue, oldValue) => {
// console.log('isHot被修改了', newValue, oldValue, this)
// })//不用箭头函数，指向windows
</script>
总结
- 计算属性里面不能开启异步任务的，主要是靠返回值进行输出，即过多少秒执行之类的是不行的，我们可以采用监听属性。、
- 监听属性里面可以开启异步任务，主要是靠自己写输出比如this.xxx，即在过多少秒数执行是可以的。
