Vue 程式札記 : watch 監聽器

閱讀時間約 9 分鐘

在 Vue 中,watch是用於進行數據監聽的,可以用來響應式的監聽資料的變化並執行相應的操作。本文將介紹watch的功能,並透過實際範例讓你更好的理解。

watch 基本用法

watch是一種用於觀察和響應 Vue 組件中數據變化的功能,當你需要在某個數據變化時執行特定的操作時,就可以使用watch,它可以監聽 Vue 組件的數據變化,並在數據發生變化時執行相應的操作。

<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
setup() {
const count = ref(0);

watch(count, (newValue, oldValue) => {
console.log(`count變更了,新的值為: ${newValue}, 舊的值為: ${oldValue}`);
});

function increment() {
count.value++;
}

return { count, increment };
},
};
</script>

在這個範例中,我們創建一個按鈕來讓用戶增加count的值,然後使用watch監聽count的變化。當count的值發生變化時,我們在控制台打印出新值和舊值。

監聽多個源

watch還可以同時監聽多個源,這在需要根據多個數據源的變化來執行操作的場景中非常有用。

<template>
<div>
<h1>Vue Watch Example</h1>
<input v-model="firstName" placeholder="First Name">
<input v-model="lastName" placeholder="Last Name">
<p>Full Name: {{ fullName }}</p>
</div>
</template>

<script>
import { ref, watch, computed } from 'vue';

export default {
setup() {
const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed(() => `${firstName.value} ${lastName.value}`);

watch([firstName, lastName], ([newFirstName, newLastName], [oldFirstName, oldLastName]) => {
console.log(`名字變更了,新的名字為: ${newFirstName} ${newLastName}, 舊的名字為: ${oldFirstName} ${oldLastName}`);
});

return { firstName, lastName, fullName };
},
};
</script>

在這個範例中,我們使用了兩個input元素來讓用戶輸入名字和姓氏,並且使用了computed來實時顯示全名,當用戶修改輸入框中的值時,watch將會觸發並在控制台中打印出變化。

watch 深度監聽

有時候會需要監聽一個物件的深層變化,這時可以使用watchdeep

<template>
<div>
<h1>Vue Deep Watch Example</h1>
<input v-model="user.name" placeholder="Name">
<input v-model="user.age" placeholder="Age" type="number">
<input v-model="user.address.city" placeholder="City">
<input v-model="user.address.country" placeholder="Country">
<p>User Info: {{ user }}</p>
</div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
setup() {
const user = ref({
name: 'John',
age: 30,
address: {
city: 'New York',
country: 'USA',
},
});

watch(user, (newUser, oldUser) => {
console.log('用戶資訊變更了', newUser);
}, {
deep: true,
});

return { user };
},
};
</script>

在這個範例中,我們替user物件中的每個屬性都提供了一個輸入框,讓用戶可以修改它們的值,由於我們在watch中設置了deep: true,所以即使是user.address中的屬性發生變化,我們也能夠在控制台中看到相應的日誌訊息。

停止監聽

有時候也會需要在某些條件下停止監聽,watch提供了一個停止監聽的函數,我們可以在需要的時候調用它。

<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">增加count值</button>
<p v-if="watchStopped">停止監聽Count</p>
</div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
setup() {
const count = ref(0);
const watchStopped = ref(false);

const stopWatch = watch(count, (newValue, oldValue) => {
console.log(`count變更了,新的值為: ${newValue}, 舊的值為: ${oldValue}`);
});

// 在某個條件下停止監聽
setTimeout(() => {
stopWatch();
watchStopped.value = true;
}, 5000);

const increment = () => {
count.value++;
};

return { count, increment, watchStopped };
},
};
</script>
chStopped };
},
};
</script>

在這個範例中,我們使用了一個watchStopped變量來記錄是否已經停止了監聽,然後設定在5秒後停止了對count的監聽,當監聽被停止時,我們將watchStopped設置為true,並在頁面上顯示一條消息提示用戶監聽已經停止。


😊 感謝你的耐心閱讀,若是你喜歡這篇內容,可以透過以下方式表達你的喜歡 😊

❤️按個愛心|💬留言互動|🔗分享此文|📌追蹤阿梧|☕請喝咖啡

avatar-img
60會員
91內容數
「梧笙」即「吾生」,意即我的生命,朋友都叫我「阿梧(Awu)」,高雄人。我喜歡學習新技能,從程式設計到網路工具,再到社群經營和影片剪輯。日常興趣是打遊戲、看動漫、讀小說和聽音樂。我會把這些興趣寫成文章,如果你有任何想法或問題,歡迎來信到我的郵箱 aowulife109@gmail.com
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
梧笙の領域展開 的其他內容
在 Vue 中,methods和computed是用於定義元件的行為和計算屬性。本文將介紹methods和computed屬性的使用方法和區別,並通過實際範例來幫助你理解。
Vue 提供了兩種不同的 API 來建立和管理組件:Option API 和 Composition API。本文將介紹這兩種 API 的特點和差異,並透過實際範例來理解它們的使用方式。
Vue 的單文件組件(Single File Components,SFC)是一種特殊的文件格式,讓我們可以將Vue 組件的模板、邏輯和樣式都寫在單一個文件當中。本文將介紹 Vue SFC,幫助開發者理解和使用 Vue SFC。
Vue 是尤雨溪所開發的一個前端框架,Vue 提供了響應式數據綁定和組件化的開發模式,能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具,用途是提供更快的開發體驗。然後,本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境,這是你學習 Vue 的第一步。
在 Vue 中,methods和computed是用於定義元件的行為和計算屬性。本文將介紹methods和computed屬性的使用方法和區別,並通過實際範例來幫助你理解。
Vue 提供了兩種不同的 API 來建立和管理組件:Option API 和 Composition API。本文將介紹這兩種 API 的特點和差異,並透過實際範例來理解它們的使用方式。
Vue 的單文件組件(Single File Components,SFC)是一種特殊的文件格式,讓我們可以將Vue 組件的模板、邏輯和樣式都寫在單一個文件當中。本文將介紹 Vue SFC,幫助開發者理解和使用 Vue SFC。
Vue 是尤雨溪所開發的一個前端框架,Vue 提供了響應式數據綁定和組件化的開發模式,能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具,用途是提供更快的開發體驗。然後,本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境,這是你學習 Vue 的第一步。
你可能也想看
Google News 追蹤
Thumbnail
我很鼓勵投資人不要只投資台股,對股市有一點熟悉度後,建議範圍擴況大到美股,甚至是投資全球。因為台股僅是單一國家/市場,如果能將資產投資到其他國家,風險會更分散,機會也更多,特別是美國股市。 美股會很難懂嗎?我相信你認識的美國企業可能會比台灣企業多,我從標普500成分股前15大企業裡隨便抓十
Thumbnail
美股因多家熱門話題與龍頭企業市值快速增長受到關注,本文介紹如何透過國泰世華CUBE App 開設台股及美股複委託帳戶、定期理財的便利性。 定期投資適合單筆資金有限、經驗不多的理財小白、上班族,或者忙碌、沒時間研究基本面的朋友,國泰世華CUBE App美股定額投資功能,操作便利性幾乎完勝海外券商。
Thumbnail
這是張老師的第三本書,我想前二本應該也有很多朋友們都有讀過,我想絕對是受益良多,而這次在書名上就直接點出,著重在從投資的角度來切入
Thumbnail
如果前人已經走出一條最佳路徑,我們只顧著欣賞也會到山頂 關注點的改變 一個好的架構都會希望讓開發者能專注在”業務邏輯”的實現,可以提高專案的開發效率、減少開發者非關業務邏輯的事情而煩惱。例如: 開發者A: 請問元件的對話窗如何在確認時控制關閉或開啟狀態? 這個實際案例是架構師認為對話窗的動作
我在學習vue的過程中,一開始是先從輕前端(用CDN引入)開始學。這時候看Vue的官方文件會有些困惑,原因是有沒有用vite建構,在元件寫法上會有些差異。所以我寫下這篇筆記來整理這兩者寫法上的差異。 起手式 1.非建構:使用cdn 在html的header中插入以下script標籤 <s
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
Thumbnail
前言介紹 在 golang 1.16之後官方提供的工具包裡面有個 `embed` 可以使用,這使得把檔案嵌入 golang 的二進制編譯更為容易,以至於方便我們部署一些並非 .go 的副檔名檔案。 這裡要介紹的是如何把 vue 作為前端,編譯至我們的 golang 專案內,起一個網頁服務。 在開始
Thumbnail
為什麼會參加這個課程 2022年是個不一樣的年,因為當初自學由設計轉前端工程師、一路上跌跌撞撞因為想要把基底打穩所以今年下定了決心從2022切版班、Js直播班、一路跟到目前2022秋季Vue直播班。 Vue直播班的心得 前兩週其實都還跟得上,但到了第三週對我而言確實感覺有些難了啊~正在心裡徬徨第三週
父元件 傳遞變數時須加上冒號 子元件 接收props用法如下 本筆記參考: 1. https://www.netlify.com/blog/understanding-defineprops-and-defineemits-in-vue-3.2 2. https://juejin.cn/post/7
慢慢學習前端的知識,學著學著也學到框架了。現在是做UIUX,為了和前端溝通更方便才踏入這個領域,學習一點後還真的更方便了,聽他們講同步非同步或是router,大概懂在說什麼,也開始知道寫判斷式的麻煩XD 原本以為上完課就能直接轉職試試別條路,不料學習的路程不算順遂,動不動就卡關,知道的越多就越明白自
最近在把 Tailwind CSS 加入我的技能樹中,其實像這種 Bootstrap, Tailwind CSS 都是很基本前端需要掌握的 CSS 相關工具 但是我其實對美工比較沒那麼大的興趣,我對功能、效能、安全比較感興趣,所以後端、架站、DevOps、一些安全防護玩了一圈,現在來加強我的排版功力
Thumbnail
我很鼓勵投資人不要只投資台股,對股市有一點熟悉度後,建議範圍擴況大到美股,甚至是投資全球。因為台股僅是單一國家/市場,如果能將資產投資到其他國家,風險會更分散,機會也更多,特別是美國股市。 美股會很難懂嗎?我相信你認識的美國企業可能會比台灣企業多,我從標普500成分股前15大企業裡隨便抓十
Thumbnail
美股因多家熱門話題與龍頭企業市值快速增長受到關注,本文介紹如何透過國泰世華CUBE App 開設台股及美股複委託帳戶、定期理財的便利性。 定期投資適合單筆資金有限、經驗不多的理財小白、上班族,或者忙碌、沒時間研究基本面的朋友,國泰世華CUBE App美股定額投資功能,操作便利性幾乎完勝海外券商。
Thumbnail
這是張老師的第三本書,我想前二本應該也有很多朋友們都有讀過,我想絕對是受益良多,而這次在書名上就直接點出,著重在從投資的角度來切入
Thumbnail
如果前人已經走出一條最佳路徑,我們只顧著欣賞也會到山頂 關注點的改變 一個好的架構都會希望讓開發者能專注在”業務邏輯”的實現,可以提高專案的開發效率、減少開發者非關業務邏輯的事情而煩惱。例如: 開發者A: 請問元件的對話窗如何在確認時控制關閉或開啟狀態? 這個實際案例是架構師認為對話窗的動作
我在學習vue的過程中,一開始是先從輕前端(用CDN引入)開始學。這時候看Vue的官方文件會有些困惑,原因是有沒有用vite建構,在元件寫法上會有些差異。所以我寫下這篇筆記來整理這兩者寫法上的差異。 起手式 1.非建構:使用cdn 在html的header中插入以下script標籤 <s
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
Thumbnail
前言介紹 在 golang 1.16之後官方提供的工具包裡面有個 `embed` 可以使用,這使得把檔案嵌入 golang 的二進制編譯更為容易,以至於方便我們部署一些並非 .go 的副檔名檔案。 這裡要介紹的是如何把 vue 作為前端,編譯至我們的 golang 專案內,起一個網頁服務。 在開始
Thumbnail
為什麼會參加這個課程 2022年是個不一樣的年,因為當初自學由設計轉前端工程師、一路上跌跌撞撞因為想要把基底打穩所以今年下定了決心從2022切版班、Js直播班、一路跟到目前2022秋季Vue直播班。 Vue直播班的心得 前兩週其實都還跟得上,但到了第三週對我而言確實感覺有些難了啊~正在心裡徬徨第三週
父元件 傳遞變數時須加上冒號 子元件 接收props用法如下 本筆記參考: 1. https://www.netlify.com/blog/understanding-defineprops-and-defineemits-in-vue-3.2 2. https://juejin.cn/post/7
慢慢學習前端的知識,學著學著也學到框架了。現在是做UIUX,為了和前端溝通更方便才踏入這個領域,學習一點後還真的更方便了,聽他們講同步非同步或是router,大概懂在說什麼,也開始知道寫判斷式的麻煩XD 原本以為上完課就能直接轉職試試別條路,不料學習的路程不算順遂,動不動就卡關,知道的越多就越明白自
最近在把 Tailwind CSS 加入我的技能樹中,其實像這種 Bootstrap, Tailwind CSS 都是很基本前端需要掌握的 CSS 相關工具 但是我其實對美工比較沒那麼大的興趣,我對功能、效能、安全比較感興趣,所以後端、架站、DevOps、一些安全防護玩了一圈,現在來加強我的排版功力