vue computed

 computed 計算屬性是基於它們的響應式依賴進行緩存的

methods會每次都行都執行一次functions computed的function中的variable如果沒有任何改變, 就只會return cache中的值, 不會重新執行.

你可能已經註意到我們可以通過在表達式中調用方法來達到同樣的效果：

<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

我們可以將同一函數定義為一個方法而不是一個計算屬性。兩種方式的最終結果確實是完全相同的。然而，不同的是計算屬性是基於它們的響應式依賴進行緩存的。只在相關響應式依賴發生改變時它們才會重新求值。這就意味著只要 message 還沒有發生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結果，而不必再次執行函數。

留言

發佈留言

此網誌的熱門文章

《Clean Code 2: Vue 3 檔案/資料夾結構》

  目錄 (10 主題版) Part 1: 最簡目錄總覽 🚀 Vue 3 專案結構入門  🏗️ 元件與模組化組織  🧩 路由與頁面架構  🗺️ 狀態管理結構  🗄️ API 服務層設計  🌐 共享資源與工具  🛠️ 測試結構  🧪 特性導向結構  🏢 命名規範與原則  🏷️ 實戰範例與總結  ✨ Part 2: 詳細目錄內容 📖 第一部分：基礎與核心結構 (Foundations & Core Structure)  🏗️ Vue 3 專案結構入門與原則 為何需要清晰的檔案結構？🤔 Vue CLI/Vite 預設結構解析 🧐 src  目錄的組織策略 📁 核心目錄 ( components ,  views ,  assets ,  utils  等) 的職責 🗂️ 元件與模組化組織的最佳實踐 元件的職責劃分與拆分 🧩 單檔案元件 (SFC) 的結構規範 📝 組織元件目錄 ( components ,  ui ,  layout  等) 🌳 共享元件與複合元件的區分 🤝 路由與頁面架構的最佳實踐 vue-router  配置與目錄結構 🗺️ 頁面 (Views/Pages) 與佈局 (Layouts) 的組織 🏘️ 動態路由與嵌套路由的結構化 🧭 路由守衛與權限管理的結構化 🛡️ 狀態管理結構 (Vuex/Pinia) Pinia Store 的模組化結構建議 🗄️ Vuex Modules 的組織方式 📦 Actions, Mutations, Getters 的邏輯劃分 🗃️ 狀態共享與跨 Store 依賴管理 🌐 API 服務層設計與組織 建立專門的 API 服務目錄 ( services ,  api ) 📡 Axios/Fetch 的封裝與配置 🌐 錯誤處理、響應格式統一與 Mock API 結構 ⚠️🎭 第二部分：進階組織與實踐 (Advanced Organization & Practices)  🚀 共享資源與工具的結構化 utils ,...
閱讀更多

[Laravel][ATOMIC] DB::transaction, DB::beginTransaction

  DB::beginTransaction()   will only begin a transaction, while for   DB::transaction()   you must pass a Closure function that will be executed   inside   a transaction. So this: DB:: transaction ( function () { // Do something and save to the db... }); is the same as this: // Open a try/catch block try { // Begin a transaction DB:: beginTransaction (); // Do something and save to the db... // Commit the transaction DB:: commit (); } catch (\ Exception $e ) { // An error occured; cancel the transaction... DB:: rollback (); // and throw the error again. throw $e ; } As you can see,  DB::transaction()  is a "helper" function to avoid writing code to catch errors, begin a transaction, commit the transaction, and optionally rollback (cancel the transaction) if an error occured. If you have a more complex logic, or need an specific behaviour, you will manually build your transaction; if your lo...
閱讀更多

[laravel 9] rename project

  Answers Sorted by:                                                Highest score (default)                                                                     Trending (recent votes count more)                                                                     Date modified (newest first)                        ...
閱讀更多