站長(zhǎng)資訊網(wǎng)
在vue中，watch用于監(jiān)聽data里面的數(shù)據(jù)是否被修改，一旦修改就可以執(zhí)行一些其他的操作。watch是vue內(nèi)部提供的一個(gè)用于偵聽功能的通用的方法，可響應(yīng)數(shù)據(jù)的變化，通過特定的數(shù)據(jù)變化驅(qū)動(dòng)一些操作。
前端（vue）入門到精通課程，老師在線輔導(dǎo)：聯(lián)系老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用
本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。
watch是用來做什么的？
Vue 通過 watch 選項(xiàng)提供了一個(gè)更通用的方法，來響應(yīng)數(shù)據(jù)的變化。當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)，這個(gè)方式是最有用的。
watch是什么？
一個(gè)對(duì)象，鍵是需要觀察的表達(dá)式，值是對(duì)應(yīng)回調(diào)函數(shù)。值也可以是方法名，或者包含選項(xiàng)的對(duì)象。Vue 實(shí)例將會(huì)在實(shí)例化時(shí)調(diào)用 $watch()，遍歷 watch 對(duì)象的每一個(gè) property。文檔傳送
示例：
<template> <el-card class="box-card"><el-input v-model="name" style="width: 30%;"></el-input></el-card> </template> <script> export default { data() { return { name: '123' }; } }; </script> <style></style>
watch的使用方法
第一種：常規(guī)用法
（1）把要監(jiān)聽的name值看作方法名，來進(jìn)行監(jiān)聽?！镜谝环N寫法】
<template> <el-card class="box-card"><el-input v-model="name" style="width: 30%;"></el-input></el-card> </template> <script> export default { data() { return { name: '123' }; }, watch: { name(newVal, oldVal) { console.log('newVal', newVal);// 1234 console.log('oldVal', oldVal);// 123 } } }; </script> <style></style>
（2）把要監(jiān)聽的name值看作對(duì)象，利用hanler方法來進(jìn)行監(jiān)聽。【第二種寫法】
<template> <el-card class="box-card"><el-input v-model="name" style="width: 30%;"></el-input></el-card> </template> <script> export default { data() { return { name: '123' }; }, watch: { name:{ handler(newVal,oldVal){ console.log('newVal',newVal); // 1234 console.log('oldVal',oldVal); // 123 } } } }; </script> <style></style>
以上兩種寫法是watch監(jiān)聽器的普通用法，這種用法有一個(gè)特點(diǎn)，就是當(dāng)值第一次綁定的時(shí)候，不會(huì)執(zhí)行監(jiān)聽函數(shù)，只有當(dāng)值發(fā)生改變時(shí)才會(huì)執(zhí)行。如果我們需要在最初綁定值的時(shí)侯，也執(zhí)行監(jiān)聽函數(shù)，則就需要用到immediate屬性。
下面，我們就往高級(jí)一點(diǎn)的用法上講。
第二種：高級(jí)用法
比如，當(dāng)父組件向子組件動(dòng)態(tài)傳值時(shí)，子組件props首次獲取到父組件傳來的默認(rèn)值時(shí)，也需要執(zhí)行函數(shù)，此時(shí)就需要將immediate屬性設(shè)置為true，結(jié)合handler方法使用。
當(dāng)設(shè)置immediate屬性為true時(shí)，無論值是否發(fā)生改變，時(shí)刻都會(huì)監(jiān)聽；
當(dāng)設(shè)置immediate屬性為false時(shí)，常規(guī)用法，只有值發(fā)生改變才會(huì)監(jiān)聽。
<template> <el-card class="box-card"><el-input v-model="name" style="width: 30%;"></el-input></el-card> </template> <script> export default { data() { return { name: '123' }; }, watch: { name: { handler(newVal, oldVal) { console.log('newVal', newVal); console.log('oldVal', oldVal); }, immediate: true } } }; </script> <style></style>
立即執(zhí)行：
值改變時(shí)：
第三種：超高級(jí)用法（deep 深度監(jiān)聽）
（1）監(jiān)聽普通變量的變化可以使用以上兩種方法，但是要監(jiān)聽變量值是某對(duì)象的時(shí)候，則不起作用。
例如，我們監(jiān)聽form對(duì)象內(nèi)部屬性的變化，是監(jiān)聽不到的。
<template> <el-card class="box-card"><el-input v-model="form.name" style="width: 30%;"></el-input></el-card> </template> <script> export default { data() { return { form: { name: '123' } }; }, watch: { form: { handler(newVal, oldVal) { console.log('newVal', newVal); console.log('oldVal', oldVal); } } } }; </script> <style></style>
則，從結(jié)果來看，我們沒有看到任何的輸出打印，所以普通的watch方法無法監(jiān)聽到對(duì)象內(nèi)部屬性的變化。
那么，我們?cè)撛趺崔k才能監(jiān)聽到對(duì)象內(nèi)部屬性的變化呢？
watch方法提供了一個(gè)deep屬性（深度監(jiān)聽），該屬性可以監(jiān)聽到對(duì)象內(nèi)部屬性的改變。
<template> <el-card class="box-card"><el-input v-model="form.name" style="width: 30%;"></el-input></el-card> </template> <script> export default { data() { return { form: { name: '123' } }; }, watch: { form: { handler(newVal, oldVal) { console.log('newVal', newVal); console.log('oldVal', oldVal); }, deep: true } } }; </script> <style></style>
設(shè)置deep: true 則可以監(jiān)聽到form的變化，如果form有較多屬性的話，此時(shí)會(huì)給form的所有屬性都會(huì)加上這個(gè)監(jiān)聽器，每個(gè)屬性值的變化都會(huì)執(zhí)行handler。
當(dāng)deep屬性值為true時(shí)，就可以監(jiān)聽到對(duì)象屬性內(nèi)部的改變；
當(dāng)deep屬性值為false時(shí)，則監(jiān)聽不到。
（2）如果只需要監(jiān)聽對(duì)象中的某一個(gè)屬性值時(shí)，我們可以使用：字符串的形式監(jiān)聽對(duì)象屬性，
這個(gè)監(jiān)聽過程，不需要使用deep去深度監(jiān)聽，就可以監(jiān)聽對(duì)象中某個(gè)屬性的變化。
<template> <el-card class="box-card"><el-input v-model="form.name" style="width: 30%;"></el-input></el-card> </template> <script> export default { data() { return { form: { name: '123' } }; }, watch: { 'form.name': { handler(newVal, oldVal) { console.log('newVal', newVal); console.log('oldVal', oldVal); } } } }; </script> <style></style>
第四種：擴(kuò)展（監(jiān)聽數(shù)組）
（1）（一維、多維）數(shù)組的變化不需要深度監(jiān)聽
<template> <el-card class="box-card"><el-input v-model="name" @input="inputFn" style="width: 30%;"></el-input></el-card> </template> <script> export default { data() { return { name: '123', arr1: [1, 2, 3], arr2: [1, 2, 3, [4, 5]] }; }, watch: { arr1(newVal, oldVal) { console.log('newVal1', newVal); console.log('oldVal1', oldVal); }, arr2(newVal, oldVal) { console.log('newVal2', newVal); console.log('oldVal2', oldVal); } }, methods: { inputFn(e) { this.arr1.push(e); this.arr2.push(e); } } }; </script> <style></style>
（2）數(shù)組對(duì)象中對(duì)象屬性變化監(jiān)測(cè)需要使用deep:true深度監(jiān)聽，多少層內(nèi)產(chǎn)生變化都可以監(jiān)測(cè)到。
<template> <el-card class="box-card"><el-input v-model="name" @input="inputFn" style="width: 30%;"></el-input></el-card> </template> <script> export default { data() { return { name: '123', arr1: [ { id: 1, sex: 11 } ], arr2: [ { id: 2, sex: 22, list: [ { id: 3, sex: 33 } ] } ] }; }, watch: { arr1: { handler(newVal, oldVal) { console.log('newVal1', newVal); console.log('oldVal1', oldVal); }, deep: true }, arr2: { handler(newVal, oldVal) { console.log('newVal2', newVal); console.log('oldVal2', oldVal); }, deep: true } }, methods: { inputFn(e) { this.arr1[0].sex = e; this.arr2[0].list[0].sex = e; } } }; </script> <style></style>
（學(xué)習(xí)視頻分享：web前端開發(fā)、編程基礎(chǔ)視頻）
