vue提供了一个侦听数据变化的功能，watch，可以理解为一直观察着某一个数据，这个数据如果一变化，就会调用相应的方法，
据一个列子，我们有个msg，初始化为“页面初始化”，等mounted以后，把它改为“页面加载完成”
<template>
<div>{{ msg }}</div>
</template>
<script>
// 侦听器
export default {
name: 'App',
data() {
return {
msg: '页面初始化',
}
},
mounted() {
setTimeout(() => {
this.msg = '页面加载完成'
}, 1000)
},
}
</script>
<style></style>
下面我们就用watch来侦听这个变化，watch和computed类似，也是一个对象，里面写方法，不同的是，watch的方法名必须和要侦听的值一致，我们这里要侦听msg，所以方法名叫做msg
watch: {
msg() {
console.log('msg的值改变了')
},
},
页面加载完1秒后，打开控制台，我们发现控制台输出了“msg的值改变了”，说明msg方法已经被调用了
在侦听时，回调函数还可以加两个参数，第一个参数侦听的这个值，改变以后的值，第二个是改变之前的
watch: {
msg(newVal, oldVal) {
console.log('msg的值改变了')
console.log('msg改变以后的值是：' + newVal)
console.log('msg改变之前的值是：' + oldVal)
},
},
我们可以看到控制台输出了
msg的值改变了
改变以后的值是：页面加载完成
改变之前的值是：页面初始化
完整代码：
<template>
<div>{{ msg }}</div>
</template>
<script>
// 侦听器
export default {
name: 'App',
data() {
return {
msg: '页面初始化',
}
},
watch: {
msg(newVal, oldVal) {
console.log('msg的值改变了')
console.log('msg改变以后的值是：' + newVal)
console.log('msg改变之前的值是：' + oldVal)
},
},
mounted() {
setTimeout(() => {
this.msg = '页面加载完成'
}, 1000)
},
}
</script>
<style></style>
关于watch的内容就先讲这么多，
大家可以思考一个问题，watch是不是能代替computed实现一些功能，用哪种方式更好？
