watch
在 Vue.js 中，watch 是一个用于监听 Vue 实例数据变化的选项，它允许你在数据变化时执行自定义的回调函数。
特点：
- 监听数据的变化：
watch允许你监视特定数据的变化，当数据发生变化时，可以执行相应的操作。 - 更灵活的监听方式： 与
computed不同，watch提供了更灵活的监听方式，你可以对数据的变化进行更细粒度的控制。
如何使用 watch：
在 Vue 实例中的 watch 对象中，你可以为特定的数据属性设置监听器。示例代码如下：
new Vue({
data: {
aValue: 1,
bValue: 2
},
watch: {
// 监听 aValue 变化
aValue: function (newValue, oldValue) {
// 做一些操作，比如调用函数或者触发其他的数据改变
console.log('aValue 变化了：', newValue, oldValue);
},
// 监听 bValue 变化
bValue: function (newValue, oldValue) {
// 做一些操作
console.log('bValue 变化了：', newValue, oldValue);
}
}
});
示例说明：
在上述示例中，watch 对象中定义了对 aValue 和 bValue 数据的监听器。每当这些数据发生变化时，相应的函数会被调用，并且会传入新值 newValue 和旧值 oldValue。
应用场景：
watch 在处理需要对数据变化做特殊处理或者进行异步操作时非常有用。例如，当需要监听某个数据变化后发送网络请求、执行复杂计算或者触发其他的数据变更时，watch 提供了一个便捷的方式。
实战演练
和第四关的代码使用有一点点区别
<body>
<div id="app"></div>
<template id="my-app">
<h2>当前温度：{{temp}}</h2>
<h3>建议穿：{{cloth}}</h3>
<button @click="minus">-5</button>
<button @click="add">+5</button>
</template>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.js"></script>
<script>
const app = Vue.createApp({
template:'#my-app',
data(){
return{
temp:20,
cloth:'夹克'
}
},
watch:{ //监视temp，能用computed实现的他也能使用，但是computed有缓存
// temp(newVal,oldVal){ //新的值和旧的值
// // console.log(newVal,oldVal);
// }
temp:{
handler:function(newVal,oldVal){
if (newVal <= 10) {
this.cloth = '棉袄'
} else if (newVal <= 20) {
this.cloth = '夹克'
} else {
this.cloth = '短袖'
}
},
immediate:true //立即执行
}
},
methods:{
minus(){
this.temp-=5
},
add(){
this.temp+=5
}
}
}).mount('#app')
</script>
</body>
computed和watch的区别
区别总结：
computed是计算属性，用于派生出新的属性值，基于依赖的响应式数据进行计算，具有缓存机制。watch是监听器，用于监听特定数据的变化，并在数据变化时执行自定义的操作，更加灵活，可以执行异步操作和更细致的控制。
选择使用时的考量：
- 如果需要根据其他属性计算出新值，并且希望在模板中使用，可以使用
computed。 - 如果需要在特定数据变化时执行异步操作、触发其他操作或者需要更精细的控制，可以使用
watch。
总结：
watch 是 Vue.js 中用于监听数据变化的功能，它提供了一种便捷的方式来监视特定数据的变化，并在数据变化时执行自定义的操作。与 computed 相比，watch 更加灵活，适用于需要更多控制的场景。
原文链接：https://juejin.cn/post/7312413730932604937 作者：挖稀泥的工人
