#### 1. 偵聽器 watch --- Vue 提供了一種更通用的方式來(lái)觀察和響應(yīng) Vue 實(shí)例上的數(shù)據(jù)變動(dòng)：偵聽屬性 當(dāng)屬性發(fā)生改變時(shí)，自動(dòng)觸發(fā)屬性對(duì)應(yīng)的偵聽器。 當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)，這個(gè)方式是最有用的。 #### 2. 基礎(chǔ)用法 --- **當(dāng) msg 屬性的值發(fā)生改變時(shí)，就會(huì)觸發(fā)偵聽器的執(zhí)行** ```html <div id="app"> <input type="text" v-model="msg"> </div> <script> let vm = new Vue({ el: '#app', data: { msg: 'Hello' }, watch: { msg: function(){ console.log(this.msg) } } }) </script> ``` #### 3. 應(yīng)用場(chǎng)景：用戶注冊(cè)時(shí)，驗(yàn)證用戶名是否存在 --- ```html <div id="app"> 用戶名: <input type="text" name="name" v-model.lazy="username"> <span :style="msgStyle">{{ msg }}</span> <br> 密碼: <input type="password" name="pass"> </div> <script> let vm = new Vue({ el: '#app', data: { msg: '', username: '', msgStyle: '' }, watch: { username: function(){ // 發(fā)送ajax請(qǐng)求 驗(yàn)證用戶名 if (this.username == 'liang') { this.msg = '該用戶名已存在' this.msgStyle = { color: 'red', fontWeight: 'bold' } } else { this.msg = '用戶名可以注冊(cè)' this.msgStyle = { color: 'green', fontWeight: 'bold', } } } } }) </script> ```