Vue watch
主要用于监听属性的变化，去做一些类似发送请求这样的工作
可以拿到变化前后的属性值
可以检测对象深层次属性以及是否在初始化就触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="../lib/vue.js"></script>
<body>
<div id="root">
<span>今天天气很{{info}}</span>
<br>
<button @click="toggleWeather">切换天气</button>
<br>
{{numbers.a}}
<button @click="changeNumbers('a')">新增a</button>
</div>
<script>
const weatherToggleMap = {
hot: {
toggle: 'cold',
text: '炎热'
},
cold: {
toggle: 'hot',
text: '凉爽'
}
}
const vm = new Vue({
el: "#root",
data: {
weather: 'hot',
// 深层属性
numbers: {
a: 1,
b: 2
}
},
methods: {
toggleWeather() {
this.weather = weatherToggleMap[this.weather]?.toggle
},
changeNumbers(tag) {
++this.numbers[tag]
}
},
computed: {
info: function () {
return weatherToggleMap[this.weather]?.text
}
},
watch: {
weather: {
handler() {
console.log('weather change ...');
}
},
// 'numbers.a':{
// handler(){
// console.log('numbers change');
// }
// },
numbers: {
handler(newValue, oldValue) {
console.log('numbers change');
},
// 初始化的时候执行一下
immediate: true,
// 深度监听
deep: true
}
}
})
// vm.$watch('numbers', {
// handler(newValue, oldValue) {
// console.log('numbers change');
// },
// // 初始化的时候执行一下
// immediate: true,
// // 深度监听
// deep: true
// })
</script>
</body>
</html>
watch和computed的区别
computed有缓存
computed能基于已有属性生成新属性，watch也能实现
一般在watch中发异步请求