这是我参与8月更文挑战的第21天，活动详情查看：8月更文挑战
什么是Watch
watch 是 Vue.js 最强大的功能之一。
当关注的某个变量的值变化时，watch监听到并且执行，注册监听该变量的函数（比如更根据变化执行一些数据，消息更新等）
我们直接敲代码吧：
<!DOCTYPE html>
<html lang="en">
<head>
<title>vue3青铜到黄金-丸子酱-vue-0n</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/vue3.1.5_vue.global.js"></script>
</head>
<body>
<div id="wzApp">
<h3><a v-bind:href="url">点击访问->子酱@CSDN博客</a></h3>
<input v-model="num1" /><br/>
<input v-model="num2" /><br/>
<div>{{num1 + num2}}</div>
</div>
</body>
<script>
const { createApp,ref,watch } = Vue
const url = 'https://blog.csdn.net/qq_28008615'
const num1 = ref("Hello")
const num2 = ref("Vue3")
const app = {
setup() {
watch(num1, (newVal, oldVal)=>{
console.log('change from ' + oldVal + ' to ' + newVal)
})
return {
url, num1, num2
}
}
}
createApp(app).mount('#wzApp')
</script>
</html>
重点说明
监听多个参数执行不同的方法
不过以上只是一些简单的例子，对于vue3中，watch可以监听多个源，并且执行不同的函数。
在vue3中同理也能实现相同的情景，通过多个watch来实现，但在vue2中，只能存在一个watch。
比如再添加多一个监听
watch(num2, (newVal, oldVal)=>{
console.log('change from ' + oldVal + ' to ' + newVal)
})
其他更多读者可以试试编写一些watch监听，vue3还是增强了不少。
总结
watch 可以监控跟踪到不同变量值的变化来触发其他操作。
比如在做游戏网站装备售卖的时候，可以根据页面的一些状态变化。更换皮肤，提示各种消息。这样比较友好。
当然还能根据一个固定时间来提示活动信息（这个可以用定时器来修改一些变量，watch级联更新）
就写到这里
我是丸子，每天学会一个小知识。
一个前端开发
希望多多支持鼓励，感谢
