watch可以让我们监控一个值的变化,从而做出相应的反应
监听属性 监听数据的变化触发执行函数
<div id="app">
用户名:<input type="text" v-model='person.name'>
<button @click='person.age++'>+</button>
<p>你的名字是:{{person.name}}</p>
<p>你的年龄是:{{person.age}}</p>
</div>
const app=new Vue({
el:'#app',
data:{
person:{
name:'',
age:18
}
},
watch:{ //监控name属性
person:{
deep:true, //开启深度监听
handler(v){
console.log(v.namge,v.age)
}
}
}
})
</script>
handler
里面有两个参数 第一个是新的数据,还有一个是旧的数据
deep
如果监控的是一个对象,需要进行深度监控,才能监控到对象中属性的变化
deep:代表深度监控,不仅监控person变化,也监控person中属性变化
immediate
最初绑定的时候是不会执行的,要等到数据改变时才执行监听计算
immediate:true // 把immediate设置为true
// 加上这个就能在页面加载完毕后执行