其实watch它是对data中的数据监听回调，当data中的数据发生变化的时候。监听就会被回调函数中传入两个参数一个newVal另一个为oldVal。
watch的使用场景：当data中的某个数据发生变化时，我们需要做一些异步操作以及开销较大的操作。我们就可以是用watch进行监听。
watch监听基本数据：：
<template> <div class="contain-wrap"> <p>个人信息情况: {{ basicMsg }}</p> <p>今年的年龄: <input type="text" v-model="age" /></p> </div> </template> <script> export default { name: "about", components:{}, data() { return { basicMsg: '', age:"18", single: '单身' } }, watch:{ age:{ handler(newValue,oldValue) { console.log("我是新值",newValue) console.log("我是旧值",oldValue) this.basicMsg = '今年' + newValue + '岁' + ' ' +this.single; } } }, created() {}, methods:{}, mounted(){}, } </script> <style scoped lang="scss"> </style>现在是监听data中一个基本的数据，当我们在输入框中输入数据，那么就监听这个回调就会被触发。现在有个需求我们想要在页面首次加载的时候让它进行触发一次。我们可以在这个回调函数中添加一个immediate: true属性，就可以第一次加载的时候触发回调。
深度监听data中的数据： 需要在watch回调中设置deep属性，表示是否深度监听某个对象的值
<template> <div class="contain-wrap"> <p>个人信息情况: {{ basicMsg }}</p> <p>今年的年龄: <input type="text" v-model="obj.chidren.age" /></p> </div> </template> <script> export default { name: "about", components:{}, data() { return { obj:{ basicMsg: '', chidren:{ age:"18" }, single: '单身' }, } }, watch:{ 'obj.chidren': { handler(newVal, oldVal) { this.basicMsg = '今年' + newVal.age + '岁' + ' ' + this.obj.single; }, immediate: true, deep: true // 需要添加deep为true即可对obj进行深度监听 } }, created() {}, methods:{}, mounted(){}, } </script> <style scoped lang="scss"> </style>现在就为对象obj中的age属性进行监听，当age属性发生变化的时候就会进行触发。这也同样适用于数组
watch 和 computed的区别是：
相同点：他们两者都是观察页面数据变化的。
不同点：computed只有当依赖的数据变化时才会计算, 当数据没有变化时, 它会读取缓存数据。 watch每次都需要执行函数。watch更适用于数据变化时的异步操作。
