1夫植、什么是watch偵聽器？
watch偵聽器允許開發(fā)者監(jiān)視數(shù)據(jù)的變化，從而針對(duì)數(shù)據(jù)的變化做特定的操作田盈。
語法格式如下：
<body>
<div id="app">
<input type="text" v-model="username">
</div>
<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
username:''
},
// 所有的偵聽器缴阎，都應(yīng)該被定義到watch節(jié)點(diǎn)下
// 偵聽器本質(zhì)上是一個(gè)函數(shù)，要監(jiān)視那個(gè)數(shù)據(jù)的變化简软，就把那個(gè)數(shù)據(jù)名作為方法名即可
watch:{
// 監(jiān)聽username值的變化
// newVal是“變化后的新值”蛮拔，oldVal是“變化之前的舊值”
// 新值在前，舊值在后
username(newVal,oldVal){
console.log('監(jiān)聽到了username值的變化',newVal,oldVal);
}
}
})
</script>
</body>
2痹升、使用watch檢測用戶名是否可用
監(jiān)聽username值的變化建炫，并使用axios發(fā)起Ajax請(qǐng)求，檢測當(dāng)前輸入的用戶名是否可用疼蛾。
watch: {
// 監(jiān)聽username值的變化
async username(newVal) {
if (newVal === '') return
const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
console.log(res);
}
}
3肛跌、定義對(duì)象格式的偵聽器
<script>
const vm = new Vue({
el:'#app',
data:{
username:''
},
watch:{
// 定義對(duì)象格式的偵聽器
username:{
// 偵聽器的處理函數(shù)
handler(newVal,oldVal){
console.log(newVal,oldVal);
},
// immediate選項(xiàng)的默認(rèn)值是false
// immediate的作用是：控制偵聽器是否自動(dòng)觸發(fā)一次
immediate:true
}
}
})
