Vue 程式札記 : methods 和 computed

閱讀時間約 3 分鐘

在 Vue 中,methodscomputed是用於定義元件的行為和計算屬性。本文將介紹methodscomputed屬性的使用方法和區別,並通過實際範例來幫助你理解。

methods 屬性

methods是定義在 Vue 元件中的函數,主要用於執行邏輯運算、事件處理等。methods可以直接定義為普通的 JavaScript 函數,並在 setup 函數中返回,使其在模板中可用。

<template>
<div>
<p>{{ message }}</p>
<button @click="reverseMessage">反轉消息</button>
</div>
</template>

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

export default {
setup() {
const message = ref('Hello Vue!');

function reverseMessage() {
message.value = message.value.split('').reverse().join('');
}

return {
message,
reverseMessage
};
}
};
</script>

在這個範例中,我們定義了一個 reverseMessage 方法來反轉 message 的內容,並且在模板中通過點擊按鈕來觸發這個方法。

computed 屬性

Computed 是 Vue 中的用於定義計算屬性的選項,它們根據其他數據動態計算值。計算屬性基於它們的依賴進行緩存,只有當相關依賴發生變化時才會重新計算。

<template>
<p>原價:{{ price }}</p>
<p>折扣後價格:{{ discountedPrice }}</p>
</template>

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

export default {
setup() {
const price = ref(100);
const discount = ref(0.2);

const discountedPrice = computed(() => {
return price.value * (1 - discount.value);
});

return {
price,
discountedPrice,
};
},
};
</script>

在這個範例中,我們創建了一個 discountedPrice 的計算屬性,它根據 pricediscount 的值動態計算折扣後的價格。

methods 與 computed 的區別

雖然 methods 和 computed 都可以用於處理數據,但它們之間存在一些關鍵差異:

  • 計算緩存: Computed 屬性會根據它們的依賴進行緩存,只有當依賴發生變化時才會重新計算。而 Methods 每次調用時都會執行。
  • 適用場景: Methods 適合用於執行事件處理或者不需要緩存的運算。Computed 屬性適合用於需要緩存的成本較高的計算。

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

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

avatar-img
60會員
91內容數
「梧笙」即「吾生」,意即我的生命,朋友都叫我「阿梧(Awu)」,高雄人。我喜歡學習新技能,從程式設計到網路工具,再到社群經營和影片剪輯。日常興趣是打遊戲、看動漫、讀小說和聽音樂。我會把這些興趣寫成文章,如果你有任何想法或問題,歡迎來信到我的郵箱 aowulife109@gmail.com
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
梧笙の領域展開 的其他內容
Vue 提供了兩種不同的 API 來建立和管理組件:Option API 和 Composition API。本文將介紹這兩種 API 的特點和差異,並透過實際範例來理解它們的使用方式。
Vue 的單文件組件(Single File Components,SFC)是一種特殊的文件格式,讓我們可以將Vue 組件的模板、邏輯和樣式都寫在單一個文件當中。本文將介紹 Vue SFC,幫助開發者理解和使用 Vue SFC。
Vue 是尤雨溪所開發的一個前端框架,Vue 提供了響應式數據綁定和組件化的開發模式,能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具,用途是提供更快的開發體驗。然後,本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境,這是你學習 Vue 的第一步。
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
Hi 我是 VK~ 在 8 月底寫完〈探索 AI 時代的知識革命:NotebookLM 如何顛覆學習和創作流程?〉後,有機會在 INSIDE POSSIBE 分享兩次「和 NotebookLM 協作如何改變我學習和創作」的主題,剛好最近也有在許多地方聊到關於 NotebookLM 等 AI 工具
Thumbnail
國泰CUBE App 整合外幣換匯、基金、證券等服務,提供簡便、低成本的美股定期定額投資解決方案。 5分鐘開戶、低投資門檻,幫助新手輕鬆進軍國際股市;提供人氣排行榜,讓投資人能夠掌握市場趨勢。
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
Hi 我是 VK~ 在 8 月底寫完〈探索 AI 時代的知識革命:NotebookLM 如何顛覆學習和創作流程?〉後,有機會在 INSIDE POSSIBE 分享兩次「和 NotebookLM 協作如何改變我學習和創作」的主題,剛好最近也有在許多地方聊到關於 NotebookLM 等 AI 工具
Thumbnail
國泰CUBE App 整合外幣換匯、基金、證券等服務,提供簡便、低成本的美股定期定額投資解決方案。 5分鐘開戶、低投資門檻,幫助新手輕鬆進軍國際股市;提供人氣排行榜,讓投資人能夠掌握市場趨勢。
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、一些安全防護玩了一圈,現在來加強我的排版功力