侦听器
什么是侦听器
侦听器，也称为监听器，Vue实例中提供了一个选项watch用于声明一个监听变量的函数/方法，一旦被监听的变量中数据发生了变化，自动执行监听函数/方法中的代码。
什么时候使用监听器
项目中需要跟随数据的变化，执行后续的功能函数(尤其是异步函数或者消耗资源较大的函数)，可以通过侦听器改善页面渲染性能。
基本语法-监听普通数据
<div id="app">
<p>消息数据：{{message}}</p>
<button @click="changeMessage">修改数据</button>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:'初始消息数据',
},
methods:{
changeMessage(){
this.message="新消息"
}
}，
watch:{
"message":(newVal,oldVal)=>{
console.log("message变量中的数据发生了改变")
console.log(newVal,oldVal)
}
}
})
好了，普通变量数据的监听就是那么简单，相信聪明的你学起来一定游刃有余！
那么接下来就看看如何监听变量中的数据吧！
我们直接用代码展示
<div id="app">
<p>对象数据：{{ user }}</p>
<p>姓名：{{ user.name }}</p>
<p>年龄：{{ user.age }}</p>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
user:{
name:'tom',
age:65
}
},
watch:{
user:{
hander(newVal,oldVal){
console.log("用户修改了user属性"）
console.log(newVal,oldVal)
},
deep:true
}
}
}）
其实数组数据的监听就是添加一个deep:true选项，它的意思就是深度监听
