站長資訊網(wǎng)
在vue中，watch用于監(jiān)聽data里面的數(shù)據(jù)是否被修改，一旦修改就可以執(zhí)行一些其他的操作。watch是vue內(nèi)部提供的一個用于偵聽功能的通用的方法，可響應(yīng)數(shù)據(jù)的變化，通過特定的數(shù)據(jù)變化驅(qū)動一些操作。
前端（vue）入門到精通課程，老師在線輔導(dǎo)：聯(lián)系老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點擊使用
本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。
watch是用來做什么的？
Vue 通過 watch 選項提供了一個更通用的方法，來響應(yīng)數(shù)據(jù)的變化。當(dāng)需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，這個方式是最有用的。
watch是什么？
一個對象，鍵是需要觀察的表達式，值是對應(yīng)回調(diào)函數(shù)。值也可以是方法名，或者包含選項的對象。Vue 實例將會在實例化時調(diào)用 $watch()，遍歷 watch 對象的每一個 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值看作方法名，來進行監(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(newVal, oldVal) { console.log('newVal', newVal);// 1234 console.log('oldVal', oldVal);// 123 } } }; </script> <style></style>
（2）把要監(jiān)聽的name值看作對象，利用hanler方法來進行監(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)聽器的普通用法，這種用法有一個特點，就是當(dāng)值第一次綁定的時候，不會執(zhí)行監(jiān)聽函數(shù)，只有當(dāng)值發(fā)生改變時才會執(zhí)行。如果我們需要在最初綁定值的時侯，也執(zhí)行監(jiān)聽函數(shù)，則就需要用到immediate屬性。
下面，我們就往高級一點的用法上講。
第二種：高級用法
比如，當(dāng)父組件向子組件動態(tài)傳值時，子組件props首次獲取到父組件傳來的默認值時，也需要執(zhí)行函數(shù)，此時就需要將immediate屬性設(shè)置為true，結(jié)合handler方法使用。
當(dāng)設(shè)置immediate屬性為true時，無論值是否發(fā)生改變，時刻都會監(jiān)聽；
當(dāng)設(shè)置immediate屬性為false時，常規(guī)用法，只有值發(fā)生改變才會監(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í)行：
值改變時：
第三種：超高級用法（deep 深度監(jiān)聽）
（1）監(jiān)聽普通變量的變化可以使用以上兩種方法，但是要監(jiān)聽變量值是某對象的時候，則不起作用。
例如，我們監(jiān)聽form對象內(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)聽到對象內(nèi)部屬性的變化。
那么，我們該怎么辦才能監(jiān)聽到對象內(nèi)部屬性的變化呢？
watch方法提供了一個deep屬性（深度監(jiān)聽），該屬性可以監(jiān)聽到對象內(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有較多屬性的話，此時會給form的所有屬性都會加上這個監(jiān)聽器，每個屬性值的變化都會執(zhí)行handler。
當(dāng)deep屬性值為true時，就可以監(jiān)聽到對象屬性內(nèi)部的改變；
當(dāng)deep屬性值為false時，則監(jiān)聽不到。
（2）如果只需要監(jiān)聽對象中的某一個屬性值時，我們可以使用：字符串的形式監(jiān)聽對象屬性，
這個監(jiān)聽過程，不需要使用deep去深度監(jiān)聽，就可以監(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.name': { handler(newVal, oldVal) { console.log('newVal', newVal); console.log('oldVal', oldVal); } } } }; </script> <style></style>
第四種：擴展（監(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ù)組對象中對象屬性變化監(jiān)測需要使用deep:true深度監(jiān)聽，多少層內(nèi)產(chǎn)生變化都可以監(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: [ { 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ǔ)視頻）
