vue深入挖掘日記

2022-05-08 07:54:11 字數 2329 閱讀 9628

在用了vue快一年後,已經有了專案經驗的基礎上,再回頭看vue官網,會發現很多以前遺漏的或者用不到但實際上必須要了解的知識。
重新學習!!深入了解vue原理!!q0: vue元件通訊props須知

props不建議使用陣列,

props:

//物件

props:

}}

props的值一般無法修改,但如果是基本資料型別的話,還是可以的。可以用計算屬性 return一下

props: 

},computed:

}

如果是引用資料型別,props傳遞的是乙個指向,不可以修改。

props父傳子,emit子傳父。

q1:vue 為什麼採用 virtual dom 機制?

虛擬節點對應的就是真實節點

建立真實節點使用document.createelement和document.createtextnode

可以建立乙個真實的節點,然後列印試試

可知,如果資料每改變一次,都真實的進行整個dom樹的重繪和重排,那麼效能是很低的。

(如下圖)

因此,虛擬節點解決了這個問題。

——用乙個簡單的物件去代替複雜的dom物件。

先判斷資料是否有改變,如果有改變則更新到真實的dom。

——同時,他可以減少瀏覽器的重繪和回流

由於本質是乙個js物件,具有跨平台功能,

總結:事實上,有的時候手動優化節點反而比虛擬節點更快速便捷,尤其是在節點比較少的情況下;但是當頁面結構比較龐大複雜的時候,虛擬節點更便捷,以及可維護性更高。

因此,相對來說,虛擬節點在效能和可維護性方面達到了平衡,更具有應用性。

q2:關於vue的diff演算法了解多少?

了解diff演算法,需要知道vue的虛擬節點和真實節點的區別在哪。

結合上乙個問題可以知道,虛擬節點就是資料改變時,會生成乙個新的vnode,與舊的oldnode比較,發現有不一樣的就直接修改真實的dom

diff的過程就是呼叫名為patch的函式,比較新舊節點,一邊比較一邊給真實的dom打補丁。
virtual dom和真實節點的區別,就是將真實的節點關係用物件關係模擬出來。

1、

test

2、var dom1 =]

}

當資料發生改變時,set方法會讓呼叫dep.notify通知所有訂閱者watcher,訂閱者就會呼叫patch給真實的dom打補丁,更新相應的檢視。

q3:virtual dom 中的列表渲染為什麼要用 key?

為了能更高效的更新virtual dom

q4:vue中資料響應原理

——變化偵測

如何偵測乙個物件的變化,有兩種方法

1、使用object.defineproperty

2、使用es6的proxy

關於收集依賴詳細解析看這裡:

q5:使用vue 這類框架開發的 spa 為什麼會出現頁面白屏的問題,又該如何解決

npm run build打包頁面空白,有可能是config檔案配置路徑出錯

assetspublicpath: '/'改為assetspublicpath: './'

在遊覽器中 / 代表網域名稱的根目錄,./代表當前路徑
更多:

q6:如何讓基於 vue.js 的應用支援 seo 優化?

vue spa單頁面應用對seo不友好;

1.ssr伺服器渲染;

2.靜態化;

q7:使用 vue 這類框架實現乙個無限滾動的長列表常用分頁來解決資料量過多的問題,但是有時候不可以用分頁。

解決思路,1、下拉重新整理獲取新資料,但問題是隨著資料逐漸增多,頁面節點也越來越多,會變卡頓。

2、懶載入,只渲染頁面可視區域。

詳見:

QThread訊號深入挖掘

qthread訊號深入挖掘 lin guoqian qthread 似乎是很難的乙個東西,特別是訊號和槽,有非常多的人 儘管使用者本人往往不知道 在用不恰當 甚至錯誤 的方式在使用 qthread,隨便用google一搜,就能搜出大量結果出來。無怪乎qt的開發人員 bradley t.hughes ...

深入挖掘Windows指令碼技術

參考資料 1 windows指令碼技術 介紹windows指令碼的基礎知識 2 wmitools 學習指令碼必備,包括cim studio event registration event viewer和object browser四個工具 4 system administration scrip...

vue學習日記 vue路由搭建

vue路由搭建參考了iview admin的路由搭建風格。在router資料夾下新建router.js檔案,如下 import login from components login import main from components main 不作為main元件的子頁面展示的頁面單獨寫,如下 ...