使用watch来侦听data中数据的变化,watch中的属性一定是data 中已经存在的数据。
当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。
<div id="app">
<input type="text" v-model="username">
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
username: 'aaaa'
},
watch: {
username(newVal, oldVal) {
console.log(newVal, oldVal)
}
}
})
</script>
-----------------------------------------------------------
# 对象侦听
<div id="app">
<input type="text" v-model="obj.username">
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data: {
obj: {
username: '张三'
}
},
watch: {
obj: {
handler(newVal, oldVal) {
console.log(newVal, oldVal)
},
// 深度侦听
deep: true
}
}
})
</script>
