① vue計算屬性定義兩個屬性,依賴內容一樣,會走兩遍嗎
不會。Vue計算屬性有一種緩存機制首逗鄭，依賴不發生改變，就不會再次計算，當依賴發生改變時，計算屬性將重新計算，以提供最新的結者頌果。Vue提供了watchAPI，可指遲以監控依賴的變化，並在依賴發生變化時執行特定的任務。
② vue 緩存組件keep-alive
kee-alive 是 Vue 內置的一個組件， 可以使被包含的組件保留狀態，或避免重新渲染 。也就是所謂的組件緩存
keep-alive是一個抽象的組件，緩存的組件不會被mounted,為此提供activated和deactivated鉤子函數
在2.1.0 版本後keep-alive新加入了兩個屬性: include(包含的組件緩存生效) 與 exclude(排除的組件不緩存，優先順序大於include) 。
keep-alive可以接收3個屬性做為參數進行匹配對應的組件進行緩存:
include 包含的組件(可以為字元串，數組，以及正則表達式,只有匹配的組件會被緩存)
exclude 排除的組件(以為字元串，數組，以及正則表達式,任何匹配的組件都不會被緩存)
max 緩存組件的最大值(類型為字元或者數字,可以控制緩存組件的個數)
配合router使用
1.keep-alive 先匹配被包含組件的 name 欄位，如果 name 不可用，則匹配當前組件 components 配置中的注冊名稱。
2.keep-alive 不會在函數式組件中正常工作，因為它們沒有緩存實例。
3.當匹配條件同時在 include 與 exclude 存在時，以 exclude 優先順序最高(當前vue 2.4.2 version)。比如：包含於排除同時匹配到了組件A，那組件A不會被緩存。
4.包含在 keep-alive 中，但符合 exclude ，不會調用activated和 deactivated。
參考 https://juejin.cn/post/6844903918313406472
參考 https://www.imooc.com/article/302879
③ vue 不是路由跳轉的頁面怎麼緩存
vue緩存主要四種方式:
使用vuex
存放在cookie中
存放在localStorage或者sessionStorage中
存放在路由集合中
④ 移動端Vue界面緩存處理
大家可以看到當重新進入列表頁數據進行了刷新這明顯不符合需求
查網路問同事知道了一個東西叫keep-alive於是決定使用這個內置組件試試.
然後吧發現問題確實能夠得到結局但是出了個新問題如圖:
問題1:界面雖然被緩存但是當退出到前一個頁面再進入的時候界面還是被緩存狀態,我覺得這是不合理的.
問題2:被緩存的界面從上個頁面再次進入時動畫效果不對.
基於這兩個問題我也查了一些資料和博客,也總結了第二套方案
這個rank是用來判斷當前組件所在的級別.
比如A組件->B組件 ->C組件,那麼A的rank為1,B的rank為2,C的rank為3,
在beforeRouteLeave中
這個貌似能解決問題,但是!!!
問題1: 這個返回動畫就是不對...(圖片在瀏覽器可能看不出啥問題,在真機很明顯)因為這個框架是前端給的動畫我也不會弄...如果能解決跳轉動畫問題,我覺得這個方案基本可以符合要求..如果有大佬可以解決,方便的話指導下小弟.而且能解決這個動畫問題後面也不用看了...
問題二:有的時候會出現緩存了上一次的bug(也不知道咋回事...出現的還挺頻繁..).
在這里就是我自己總結的一個方案..雖然能完美解決這些問題不過對開發不友好,維護成本太高..不建議使用(如果實在沒辦法的話)
首先在vuex中定義需要緩存的界面的數據(先測試的滑動,所以分開寫的可以只寫一個data)
先說下高度的滑動吧這個滑動的高度也是需要保存的.界面中沃使用cube-ui的scroll組件
給data增加一個scrollHeight屬性緩存界面高度.還有需要緩存的數據model
當界面滑動停止調用scrollend方法對scrollHeight進行賦值
每次進入界面即在created 函數中取出緩存的高度,如果有高度那麼讓它自動滑動.並重新給scrollHeight進行賦值.
這邊是我封裝的一個js..實現是這樣的
這樣就可以保證滑動的緩存(data與高度類似).
這是data的js
當界面進行跳轉對組件的rank進行判斷如下:
而在進入的時候
⑤ Vue 怎麼緩存當前的組件緩存後怎麼更新說說你對keep-alive的理解是什麼
keep-alive 是 vue 中的內置組件，能在組件切換過程中將狀態保留在內存中，防止重復渲染 DOM
keep-alive 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們
keep-alive 可以設置以下 props 屬性：
關於 keep-alive 的基本用法：
使用 includes 和 exclude ：
匹配首先檢查組件自身的 name 選項，如果 name 選項不可用，則匹配它的局部注冊名稱 (父組件 components 選項的鍵值)，匿名組件不能被匹配
設置了 keep-alive 緩存的組件，會多出兩個生命周期鉤子（ activated 與 deactivated ）：
使用原則：當我們在某些場景下不需要讓頁面重新載入時我們可以使用 keepalive
舉個栗子:
當我們從 首頁 –> 列表頁 –> 商詳頁 –> 再返回 ，這時候列表頁應該是需要 keep-alive
從 首頁 –> 列表頁 –> 商詳頁 –> 返回到列表頁(需要緩存) –> 返回到首頁(需要緩存) –> 再次進入列表頁(不需要緩存) ，這時候可以按需來控制頁面的 keep-alive
在路由中設置 keepAlive 屬性判斷是否需要緩存
使用 <keep-alive>
keep-alive 是 vue 中內置的一個組件
源碼位置：src/core/components/keep-alive.js
可以看到該組件沒有 template ，而是用了 render ，在組件渲染的時候會自動執行 render 函數
this.cache 是一個對象，用來存儲需要緩存的組件，它將以如下形式存儲：
在組件銷毀的時候執行 pruneCacheEntry 函數
在 mounted 鉤子函數中觀測 include 和 exclude 的變化，如下：
如果 include 或 exclude 發生了變化，即表示定義需要緩存的組件的規則或者不需要緩存的組件的規則發生了變化，那麼就執行 pruneCache 函數，函數如下：
在該函數內對 this.cache 對象進行遍歷，取出每一項的 name 值，用其與新的緩存規則進行匹配，如果匹配不上，則表示在新的緩存規則下該組件已經不需要被緩存，則調用 pruneCacheEntry 函數將其從 this.cache 對象剔除即可
關於 keep-alive 的最強大緩存功能是在 render 函數中實現
首先獲取組件的 key 值：
拿到 key 值後去 this.cache 對象中去尋找是否有該值，如果有則表示該組件有緩存，即命中緩存，如下：
直接從緩存中拿 vnode 的組件實例，此時重新調整該組件 key 的順序，將其從原來的地方刪掉並重新放在 this.keys 中最後一個
this.cache 對象中沒有該 key 值的情況，如下：
表明該組件還沒有被緩存過，則以該組件的 key 為鍵，組件 vnode 為值，將其存入 this.cache 中，並且把 key 存入 this.keys 中
此時再判斷 this.keys 中緩存組件的數量是否超過了設置的最大緩存數量值 this.max ，如果超過了，則把第一個緩存組件刪掉
解決方案可以有以下兩種：
每次組件渲染的時候，都會執行 beforeRouteEnter
在 keep-alive 緩存的組件被激活的時候，都會執行 actived 鉤子
注意：伺服器端渲染期間 avtived 不被調用
⑥ vue 路由緩存
在寫一個移動端項目時遇到了一個問題，每一個tab欄所對應的頁面被封裝成一個組件進行
復用，結果會導致他們共用一個滾動條。解決辦法是給這個子組件加固定的高度（例如
height:100vh），同時加一個屬性overflow-y:auto，這樣就可以解決這個問題。之後發現每當進
入主頁中任意一篇文章再退出時，頁面重新載入渲染了，之前的文章消失了，所有在這里想到
了路由緩存。
先說一下keep-alive的屬性和用法。
Props ：
用法 ：
<keep-alive> 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。
<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現在組件的父組件鏈中。
當組件在 <keep-alive> 內被切換，它的 activated 和 deactivated 這兩個生命周期鉤子函數將會被對應執行。
（只有被<keep-alive>包裹的組件才具有這兩個鉤子函數）
其實不太建議使用include的，因為如果多個組件中都包括include中匹配到的組件，想單獨
的讓其中某個組件緩存是不太方便的。所以可以在分發路由時，在需要緩存的路由中把額外標
記的屬性寫在meta中，如圖1。
使用的時候可以在根組件中通過$route.meta.keepAlive取到該值，然後進行v-if判斷即可，如圖
2，這樣使用起來相對靈活一點。
使用keep-alive緩存路由後，已經解決了主要問題，但是有新的問題出現。緩存過的組件重
新被激活時不會記錄滾動條的狀態，默認置頂，所以應該監聽這個被復用的組件的onscroll事
件，動態記錄滾動條的位置狀態，然後重新賦值給scrollTop（如果還想優化最好給滾動事件來
一個防抖處理）。那麼問題來了，應該在何時重新賦值呢？上面用法中提到了當組件在<keep-
alive> 內被切換時會觸發activated這個鉤子函數，所以應在這里賦值。
⑦ vue中動態路由組件緩存及生命周期函數
<keep-alive>是Vue的內置組件，能在組件切換過程中將狀態保留在內存中，防止重復渲染DOM。<keep-alive> 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。和 <transition> 相似，<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現在父組件鏈中。prop :
有兩個生命周期函數：
activated ：激活
deactivated ：失活
利用keep-alive實現滾動條保存：
思路 ： 在路由頁面離開 beforeRouterEnter 中保存當前滾動條距離頂部的位置，再用 activated 鉤子函數 當他再次被激活時，讓他的滾動條等於離開時保存的那個值。
beforeCreate ：組件實例剛被創建，組件屬性計算之前，如data屬性等
created ：組件實例創建完成，屬性已綁定，但DOM還未生成，$el屬性還不存在
beforeMount ：模板編譯 / 掛載之前
mounted ：模板編譯 / 掛載之後
beforeUpdate ：組件更新之前
updated ：組件更新之後
activated ：組件被激活時調用
deactivated ：組件被移除時調用
beforeDestory ：組件銷毀前調用
destoryed ：組件銷毀後調用
(1) 創建階段
創建的標志點是New vue()，beforeCreate和created都發生在創建動作之後，但區別在於beforeCreate觸發的時候數據還沒初始化和綁定，而created的時候就生成好了。
(2) 掛載階段
beforeMount和mounted兩者主要區別在於模板是否編譯和掛載了。
(3) 更新階段
beforeUpdate 和 updated 就是當數據發生變化的時候出發的。
(4) 銷毀階段
beforeDestory 和 destoryed 的區別就是el的值data的數據依然在的。這是因為$destroy只是銷毀一個實例，清理它與其它實例的連接，解綁它的全部指令及事件監聽器，並不會清除data的數據或者清除dom。
⑧ vue的dom更新緩沖確保無論你進行了多少次聲明更改每個組件都只需要更新1次嗎
Vue 的 DOM 更新緩沖機制確保了當你進行多次聲明更改時，每個組件最多隻會更新一次局棚。它通過使亮讓用非同步隊列來緩沖更新操作，等到所有的更改都被記錄下來之後再一次性更新 DOM。這桐鍵則樣做的好處是可以減少不必要的 DOM 操作，提高性能。
Vue 是通過一種叫做臟檢查（dirty checking）的機制來實現這一點的。它會在每次更新時掃描所有的組件並檢查它們的狀態是否發生了變化，如果發現了變化就會更新對應的 DOM。這個過程被稱為臟檢查。
但是，如果每次更新都要掃描整個應用的所有組件，時間復雜度將會是 O(n) 級別的，這顯然是不可取的。因此 Vue 會對組件進行分組，只對變化了的組件進行臟檢查。
總結來說， Vue 的 DOM 更新緩沖機制確保了不管你進行了多少次聲明更改，每個組件都最多隻會更新一次。這樣做的好處是可以減少不必要的 DOM 操作，提高性能。