1. 监视属性
- 监听对象: 监视属性可以监听普通属性和计算属性
- 调用时间: 当监听的属性发生改变时。handler被调用
- immediate: true: 是否初始化时让handler调用一下。此时oldVlue为undefined
- deep: false: watch默认不监测对象内部值的改变。如存在outerKey.innerKey,当监测outerKey时,innerKey改变不会调用handler
- 如存在outerKey.innerKey, 单独监测innerKey的key用: ‘outerKey.innerKey’
使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天天气很{{info}}</h2>
<!-- 绑定事件的时候:@xxx="yyy"时yyy可以写一些简单的语句,如@click="isHot = !isHot" -->
<button @click="changeWeather">切换天气</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
isHot: true
},
computed: {
info() {
return this.isHot ? '炎热' : '凉爽'
}
},
methods: {
changeWeather() {
this.isHot = !this.isHot
}
},
watch: {
isHot: {
deep: false,
immediate: true,
// 可以只需要newValue参数
handler(newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue)
}
}
}
})
vm.$watch('info', {
immediate: true,
handler(newValue, oldValue) {
console.log('info被修改了', newValue, oldValue)
}
})
</script>
</body>
</html>
显示效果如下
2. 监视属性的简写
当监测的属性,只有handler时,可以简写
isHot(newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue)
}
vm.$watch('info', (newValue, oldValue) => {
console.log('info被修改了', newValue, oldValue)
})
3. computed和watch之间的区别
区别:
- computed能完成的功能,watch都可以完成
- watch能完成的功能,computed不一定能完成,例如:watch可以用setTimeout进行异步操作。但computed用setTimeout进行异步操作return值时,计算属性接收不到
两个重要的小原则:
- 所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm或组件实例对象
- 所有不被Vue所管理的函数(setTimeout的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数,
因为箭头函数没有this,就向外层找,最后找到的this指向还是vm或组件实例对象