相關(guān)文章

• 

  Vue使用keep-alive設(shè)置哪些組件可以被緩存，哪些不被緩存

  需求：當(dāng)一個(gè)項(xiàng)目中，不是所有的組件頁面都需要緩存起來，因?yàn)橛行╉撁媸遣恍枰?? ?$route.meta.keepAlive 判斷當(dāng)前組件是否有keepAlive屬性 在路由js文件中在配置路由規(guī)則的時(shí)候配置 ?

  2024年02月16日

  瀏覽(16)

• vue3，動(dòng)態(tài)引入組件，同時(shí)動(dòng)態(tài)設(shè)置組件的name，用于keep-alive緩存

  如果有兩個(gè)頁面邏輯大都相同，咱們想到的第一個(gè)肯定是寫一個(gè)組件，然后兩個(gè)路由都指向這個(gè)組件。 那如果現(xiàn)在多添加一個(gè)需求：兩個(gè)頁面在切換路由時(shí)都需要緩存數(shù)據(jù)，并且兩個(gè)頁面的緩存數(shù)據(jù)要求獨(dú)立。 這個(gè)需求很簡(jiǎn)單：在router-view外層包裹一個(gè)keep-alive組件，指定緩

  2024年02月14日

  瀏覽(22)
• 

  keep-alive組件緩存

  從 a跳b，a已經(jīng)銷毀，b重新渲染；b跳a，b銷毀a重新渲染 源組件銷毀，目標(biāo)組件渲染 組件緩存：組件實(shí)例等相關(guān)（ ?包括vnode ）存儲(chǔ)起來 重新渲染指的是：把視圖重新編譯成新的vnode-dom?diff-渲染成真實(shí)dom 真實(shí)dom被我移除了只是從頁面上移除，只是把vnode重新渲染成真實(shí)dom或者

  2024年01月21日

  瀏覽(23)

• vue3，vite開發(fā), 動(dòng)態(tài)引入組件，同時(shí)動(dòng)態(tài)設(shè)置組件的name，用于keep-alive緩存

  如果有兩個(gè)頁面邏輯大都相同，咱們想到的第一個(gè)肯定是寫一個(gè)組件，然后兩個(gè)路由都指向這個(gè)組件。 那如果現(xiàn)在多添加一個(gè)需求：兩個(gè)頁面在切換路由時(shí)都需要緩存數(shù)據(jù)，并且兩個(gè)頁面的緩存數(shù)據(jù)要求獨(dú)立。 這個(gè)需求很簡(jiǎn)單：在router-view外層包裹一個(gè)keep-alive組件，指定緩

  2024年02月07日

  瀏覽(24)

• 緩存滾動(dòng)位置：解決keep-alive組件緩存滾動(dòng)位置失敗問題

  怎樣在vue中緩存組件？大家都知道，使用keep-alive組件即可，但是使用keep-alive緩存頁面后，發(fā)現(xiàn)雖然頁面緩存成功了，但是列表的滾動(dòng)條又自動(dòng)回到了最上方。 是的， keep-alive組件是不會(huì)緩存滾動(dòng)位置的 。 怎樣緩存滾動(dòng)位置呢？這是我們這一章講的問題。 核心思想是在路由

  2024年02月16日

  瀏覽(21)
• 

  keep-alive 是 Vue 的一個(gè)內(nèi)置組件，用于緩存其他組件的實(shí)例，以避免重復(fù)渲染和銷毀，它可以在需要頻繁切換的組件之間提供性能優(yōu)化

  目錄 keep-alive? 使用 keep-alive 的示例代碼： 手動(dòng)清除組件緩存的示例代碼： keep-alive 組件有以下幾個(gè)優(yōu)點(diǎn)： keep-alive 的原理： 使用 keep-alive 組件，你可以包裹需要緩存的組件，然后這些組件在切換時(shí)將會(huì)被緩存起來，而不是每次都重新創(chuàng)建。 使用 keep-alive 的示例代碼： 我們

  2024年02月08日

  瀏覽(25)

• VUE3，自定義控制keep-alive緩存

  安裝插件 npm install vite-plugin-vue-setup-extend?--save 在vite.config.ts中 import VueSetupExtend from \\\'vite-plugin-vue-setup-extend\\\' ..... plugins：[ ? ? ? ? vue(), ????????VueSetupExtend(), ? ? ? ? ..... ] useKeepalive.ts import { ref } from \\\"vue\\\" export const includes = refstring[]([]); // 增加緩存 export function addKeepAliveC

  2024年01月19日

  瀏覽(31)

• Vue3 除了 keep-alive，還有哪些實(shí)現(xiàn)頁面緩存的方法

  有這么一個(gè)需求：列表頁進(jìn)入詳情頁后，切換回列表頁，需要對(duì)列表頁進(jìn)行緩存，如果從首頁進(jìn)入列表頁，就要重新加載列表頁。 對(duì)于這個(gè)需求，我的第一個(gè)想法就是使用keep-alive來緩存列表頁，列表和詳情頁切換時(shí)，列表頁會(huì)被緩存；從首頁進(jìn)入列表頁時(shí)，就重置列表頁數(shù)

  2024年02月06日

  瀏覽(19)
• 

  react 實(shí)現(xiàn)頁面狀態(tài)緩存（keep-alive）

  因?yàn)?react、vue都是單頁面應(yīng)用，路由跳轉(zhuǎn)時(shí)，就會(huì)銷毀上一個(gè)頁面的組件。但是有些項(xiàng)目不想被銷毀，想保存狀態(tài)。 比如：h5項(xiàng)目跳轉(zhuǎn)其他頁面返回時(shí)，頁面狀態(tài)不丟失。設(shè)想一個(gè) 頁面我滑倒了中間，然后跳轉(zhuǎn)到 詳情頁然后 返回，之前的頁面刷新了，回到頂部了肯定不行（

  2024年01月23日

  瀏覽(38)
• 

  keep-alive緩存三級(jí)及三級(jí)以上路由

  需求：需要緩存這個(gè)出入記錄，當(dāng)tab切換時(shí)不重新加載，當(dāng)刷新頁面時(shí)，或把這個(gè)關(guān)閉在重新打開時(shí)重新加載如圖： （我這里用的是芋道源碼的前端框架) 1、include 包含頁面組件name的這些組件頁面，會(huì)被緩存起來 2、exclude 除了這些name以外的頁面組件，會(huì)被緩存起來 3、沒有

  2024年02月09日

  瀏覽(20)