vue侦听器 - watch

使用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>