1. 監聽屬性 watch

watch 是一個對象，鍵是需要觀察的表達式，用于觀察 Vue 實例上的一個表達式或者一個函數計算結果的變化。回調函數的參數是新值和舊值。值也可以是方法名，或者包含選項的對象。Vue 實例將會在實例化時調用 $watch()，遍歷 watch 對象的每一個 property。

2. 常規用法

watch 監聽有兩個形參，第一個是新值，第二個是舊值。如下例子：使用 watch 監聽了 total 的值，當 total 的值改變時，控制臺會打印出舊值和新值。

<template><div class="home_box"><h1>{{ total }}</h1><button @click="handleAddTotal">增加</button></div>
</template><script>
export default {name: 'Home',watch: {total(newValue, oldValue) {console.log('舊值：', oldValue)console.log('新值：', newValue)}},data() {return {total: 0}},methods: {handleAddTotal() {this.total++}}
}
</script>

3. 監聽對象和route變化

watch監聽的目標，可以是基本類型，也可以是對象，也可以是對象里的一個值。而監聽目標的屬性，可以是一個函數，也可以是一個包含handler（回調函數），immediate（是否初始化后立即執行一次）和deep（是否開啟深度監聽）的對象。

<script>
export default {name: 'Home',watch: {// 監聽基本類型aaa(newValue, oldValue) {console.log('舊值：', oldValue)console.log('新值：', newValue)},// 監聽基本類型，并且回調函數寫在methods里，且初始化加載立即執行一次bbb: {handler: 'handleBBB',immediate: true},// 監聽對象類型，需要開啟深度監聽ccc: {handler: (newValue, oldValue) {console.log('舊值：', oldValue)console.log('新值：', newValue)},deep: true},// 監聽對象里的某個值'ddd.d2.d21': {handler: (newValue, oldValue) {console.log('舊值：', oldValue)console.log('新值：', newValue)}},// 監聽route變化'$route': {handler: (newValue, oldValue) {console.log('舊值：', oldValue)console.log('新值：', newValue)}}},data() {return {aaa: 0,bbb: 0,ccc: {c1: 0,c2: 0},ddd: {d1: 0,d2: {d21: 0}}}},methods: {handleBBB() {this.bbb++}}
}
</script>

4. 使用場景

watch監聽屬性使用場景很多。比如：

1. 即時表單驗證
2. 搜索
3. 監聽數據變化，做出相應改變
4. …

如下例子，監聽 keyword 的值，實時打印出來。

<template><div class="home_box"><input type="text" v-model="keyword"></div>
</template><script>
export default {name: 'Home',watch: {keyword: {handler: 'handleKeywordChange'}},data() {return {keyword: '',}},methods: {handleKeywordChange(newValue, oldValue) {console.log(newValue, oldValue)}}
}
</script>

---

本次分享就到這兒啦，我是鵬多多，如果您看了覺得有幫助，歡迎評論，關注，點贊，轉發，我們下次見~

往期文章

• css使用aspect-ratio制作4:3和9:16和1:1等等比例布局
• Web前端頁面開發阿拉伯語種適配指南
• flutter-使用extended_image操作圖片的加載和狀態處理以及緩存和下載
• flutter-制作可縮放底部彈出抽屜評論區效果
• flutter-實現Tabs吸頂的PageView效果
• Vue2全家桶+Element搭建的PC端在線音樂網站
• 助你上手Vue3全家桶之Vue3教程
• 超詳細！Vue的九種通信方式
• 超詳細！Vuex手把手教程
• 使用nvm管理node.js版本以及更換npm淘寶鏡像源
• vue中利用.env文件存儲全局環境變量，以及配置vue啟動和打包命令

個人主頁

• CSDN
• GitHub
• 掘金