目录
- 1. 监视属性
- 2. 监视属性的简写
- 3. computed和watch之间的区别
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或组件实例对象
![[upload]-[GXYCTF2019]BabyUpload1-笔记](https://i-blog.csdnimg.cn/direct/7fb53f7dc67a44a495ebff43d6488819.png)
