vue的keep alive非常實用,為什麼angular和react都不跟進呢?

時間 2021-10-28 14:16:09

1樓:Tianfan

實際上 vue 因為這個功能引起過很多次 bug 。

vue router 結合時候,經常出 bug,感覺官方都有點無法解決。可以看vue router 的 issue 列表。

2樓:

佔記憶體吧...現在的頁面是越來越複雜了...快取快取...

還能存哪肯定存到記憶體裡去了...來上幾個大資料頁面瞬間崩塌...尤其是那種重型後台....

見過10幾萬條資料塞到頁面裡面加上keep-alive,cache瀏覽器直接快崩了...對於記憶體小的使用者增加的問題反而很多...

3樓:

這個問題很好,keep-alive 實際上就是 vnode 快取

即,render -> 生成 vnode,在 v-if 或者其它導致元件銷毀的生命週期發生時 ——

這其實是乙個相當危險的操作,因為快取有一些內涵的業務存在,比如何時開始快取,何時真正銷毀,何時執行 render 重新重新整理,開發者沒有 vnode 的直接控制能力,就會導致配合 keep-alive 的時候,出現一些神奇的 bug

所以會有一些更加精確的配置,比如 exclude include max 等

可能出現的一致性問題,在 React 這個把不變性,排程一致性當成最高追求的庫來說,是非常嚴重的(當然對於可變,物件封裝的 Vue 來說並不是什麼嚴重問題,這屬於架構思想不同)

比如:function

Parent()}

function Child()

onChange=

/>}當我們寫出 show ? : null 的時候,翻譯過來就是,show 為 truthy 時,渲染元件,否則,銷毀元件

字面意思如此,這個與 Vue 不同,因為Vue 是 v-if 指令,並非純粹的 js 語句

怎麼解決?

你可以用依賴注入,即當你需要快取元件的時候,快取元件依賴的資料:

function

useSomeCompo()}

// createService 很好封裝,主要為了寫起來乾淨

const

Service

=createService

(useSomeCompo

)function

SomeCompo()=

Service

.useInject

()return

value

=onChange

=/>}function

()

}這樣也能完成快取,可能性能上有些小區別,但是無關痛癢

但是,這並不徹底解決問題

因為,當在路由或者一大堆元件樹上新增狀態檢視快取的時候,你就必須將其下的服務全部提公升到元件樹之上,雖然在 SOA 架構中很好做,但是大部分開發還是在 UI元件架構下搞的

那怎麼辦?

很簡單,因為 jsx element,也就是 createElement 也可以快取,那麼給 createElement 傳入某些引數,然後不採用 if else 來進行切換,而是採用新的 api

// 官方還在設計階段,可能為 visible, hidden 或者用 動態修改

反正不能用邏輯判定或者三目運算了,這就是 React Offscreen api

你肯定要說,這不是跟 vue 差不多麼?

額,確實是跟 vue 差不多,但是還是有區別的

或者換句話說,vue 的 v-if 上做 keep-alive 是有些小問題的,應該有個新的 api,不然建立銷毀和離屏(vm 不 patch)兩個邏輯耦合在一起了

4樓:Burry

keep-alive並不是乙個很完善很好用的元件,問題其實有很多。而且react不是有react-router-cache-route嗎,不了解angular

5樓:sunwang

我覺得應用比較少,如果你使用了 keep-alive 就要留心快取更新問題。angular 我不熟,react 的話社群是有相關的庫實現的,例如 react-keep-alive, 至於官方推出就不要想了,redux,router 這種庫都是社群維護在..

Vue面試題精選 Vue與React的區別,分別在哪些場景下使用更合適?

甲午馬 紅樓夢 裡展示的多是小姐公子的享樂生活,她們無所事事,只是吃喝玩樂。一般人家誰有那樣的家底呢?少年看了,容易羨慕人家的日子,會埋怨自己的家庭為何沒有那樣的富足。再者過早的卿卿我我,也許會對少年產生影響。老不看三國 對比人家,會覺得自己老了,依然沒有三立,會很懊悔的。 明心 個人理解,僅供參考...

Vue元件建立的export default 和 Vue extend寫法區別,以及優劣?

第一點,Vue.component component name 等同於 Vue.component component name Vue.extend 也就是說,在使用Vue.component時候,使用不使用Vue.extend都可以。參見官方文件 Vue.js 第二點,Vue.componen...

Vue 的 props 的 validator 函式怎麼不起作用呢?

玖五 validator只是驗證,這個函式返回值是布林值,用這個布林值來判斷是否通過 它的返回值是驗證作用,而不是修改props 按我的理解,這個就是只是用來校驗的,不涉及修改原始資料,如果想要修改原始資料,那麼可以採用其他的方式,比如computed等方式修改,你的需求如果是改了子元件父元件也要知...