vue前台緩存組件

① 前端培訓丁鹿學堂：vue組件之緩存組件，ref屬性

前端培訓丁鹿學堂關於Vue組件中的緩存組件與ref屬性的內容如下：

1. 緩存組件：

   • 功能：在Vue中，組件緩存功能的實現藉助於keepalive。
   • 作用：當動態組件切換時，如果希望組件不重新渲染，可以將需要緩存的組件包裹在keepalive中。
   • 優點：通過keepalive包裹的組件，在切換時不會重新渲染，其輸入內容得以保留，從而提高性能和用戶體驗。

2. ref屬性：

   • 功能：Vue通過ref屬性為組件賦予了一個標識。
   • 作用：通過ref屬性，我們可以獲取到組件的實例，進而訪問組件的屬性和方法。
   • 用途：實現對組件的更精細化操作，如直接調用組件的方法、訪問組件的數據等。
   • 注意事項：ref不是響應式的，這意味著它不會觸發視圖更新。它主要用於在JavaScript代碼中直接訪問DOM元素或組件實例。

總結：在Vue中，keepalive用於實現組件的緩存功能，以提高性能和用戶體驗；而ref屬性則提供了一種直接訪問組件實例的方式，便於實現更精細化的操作。

② 前端開發必備技能知識筆記-keep-alive（路由緩存）

前端開發必備技能知識筆記keepalive：

• keepalive的基本概念：

  • 定義：Vue中的keepalive是一個抽象組件，用於緩存組件實例，避免不必要的渲染。
  • 主要作用：提升應用性能，特別是在路由切換時，能保留組件狀態，而不是銷毀它們。

• keepalive的主要功能：

  • 緩存組件實例：keepalive會保留不活動的組件實例，避免每次切換路由時都重新創建組件。
  • 管理生命周期：雖然keepalive不會渲染DOM或影響父組件結構，但它能管理其內部所有組件的生命周期，如activated和deactivated鉤子函數。

• 在路由緩存中的應用：

  • 設置多個路由出口：在Vue應用中，若要使用keepalive進行路由緩存，通常需要在routerview中設置多個出口。
  • 控制緩存組件：通過路由配置中的include參數，可以按需控制哪些組件需要被keepalive緩存。
  • 動態調整緩存策略：對於復雜的路由場景，如從首頁進入列表頁不應被緩存的情況，可以在路由的meta信息中添加額外欄位，並在app.vue中添加事件監聽，根據路由層級動態調整緩存策略。

• 深入學習建議：

  • 參考文檔：為了更深入地了解keepalive的使用方法和最佳實踐，建議參考Vue官方文檔或相關教程。
  • 實踐經驗：通過在實際項目中應用keepalive，不斷積累經驗，優化性能策略。

③ vue3開發前端表單緩存自定義指令，移動端h5必備插件

公司開發一款移動端應用，使用vue，用戶錄入表單需本地緩存。為解決此問題，我們考慮兩種方案。第一種方案為實時保存暫存文件到後端，間隔1-2秒調一次介面，此方案成本較高，開發困難。第二種方案為前端開發緩存插件，暫存數據於前端。

採用vue自定義指令結合localstorage進行本地緩存策略的開發。首先在項目中創建directive文件夾。在index.ts文件中編寫指令事件函數。主要函數方法包含如下步驟：先獲取localStorage中對應key的值，若無值則存入緩存並設置有效期；若存在值，則覆蓋到原有對象欄位上。主方法內有if else結構，用於判斷是否有第四個參數，即外層for循環序號。對於for循環數組，需要加上第四個參數；單個form表單則不需額外參數。

在directive文件夾下新增index.ts文件。在main.ts文件中注冊指令。使用示例展示如何僅對一個大對象的表單進行緩存。

至此，vue3前端表單緩存自定義指令開發完成，操作簡單。然而，程序員需跳出技術圈，拓展視野，了解前沿知識。在開發內部工具時，發現大量頁面、場景、組件等重復工作，浪費工程師時間。推薦使用JNPF快速開發平台，它是功能集大成者，支持快速開發任何信息化系統。JNPF基於Java Boot/.Net Core構建，提供上千常用類，方便擴展。集成代碼生成器，支持前後端業務代碼生成，實現快速開發。框架內置表單、報表、圖表、大屏等Demo，方便直接使用。後端支持Vue2、Vue3。推薦學習以拓展知識。

④ vue前端離開頁面前 防止表單數據丟失

要防止用戶在Vue前端離開頁面前表單數據丟失，可以利用Vue的keepalive組件進行表單內容的緩存。

具體實現方法如下：

1. 利用keepalive組件：

   • keepalive是Vue的內置組件，用於緩存不活躍的組件實例，而不是銷毀它們。這樣，當用戶返回頁面時，表單數據仍然保留在內存中。

2. 在App.vue中添加keepalive標簽：

   • 將需要緩存的表單頁面組件包裹在keepalive標簽內。可以通過include屬性指定需要緩存的組件名稱，或者通過exclude屬性排除不需要緩存的組件。

3. 在路由文件中添加meta屬性：

   • 可以在路由配置中為需要緩存的頁面添加meta屬性，例如meta: { keepAlive: true }，以便在編程時動態控制keepalive的行為。

4. 在跳轉的新頁面中添加beforeRouteLeave生命周期鉤子：

   • 在用戶離開當前表單頁面時，可以在beforeRouteLeave鉤子中執行一些操作，例如提示用戶保存表單數據，或者自動保存表單數據到localStorage等持久化存儲中。但請注意，這里主要討論的是利用keepalive緩存表單數據，因此通常不需要在beforeRouteLeave中保存數據到持久化存儲，除非有額外需求。

注意事項：

• keepalive只會緩存其直接子組件，而不會遞歸地緩存所有後代組件。因此，如果表單頁面組件嵌套在其他組件內部，需要確保keepalive直接包裹表單頁面組件。
• 使用keepalive時，需要注意組件的生命周期函數。特別是activated和deactivated這兩個生命周期函數，它們會在組件被激活和停用時調用。這可以用於在組件重新激活時執行一些初始化操作，或者在組件停用時執行一些清理操作。

通過上述方法，可以有效地防止用戶在Vue前端離開頁面前表單數據丟失的問題，提升用戶體驗。