VUE知識體系、VUE面試題

Sir奔發表於2024-04-27

1. computed(計算屬性)和方法有什麼區別?

計算屬性本質上是包含 getter 和 setter 的方法

當獲取計算屬性時,實際上是在呼叫計算屬性的 getter 方法。vue 會收集計算屬性的依賴,並快取計算屬性的返回結果。只有當依賴變化後才會重新進行計算。

方法沒有快取,每次呼叫方法都會導致重新執行。

計算屬性的 getter 和 setter 引數固定,getter 沒有引數,setter 只有一個引數。而方法的引數不限。

由於有以上的這些區別,因此計算屬性通常是根據已有資料得到其它資料,並在得到資料的過程中不建議使用非同步、當前時間、隨機數等副作用操作。

實際上,它們最重要的區別是含義上的區別。計算屬性含義上也是一個屬性(data 屬性),可以讀取也可以賦值;方法含義上是一個操作,用於處理一些事情。

2. v-if和v-show有什麼區別?

v-if 能夠控制是否生成 vnode(虛擬dom樹),也就間接控制了是否生成對應dom。當 v-if 為 true 時,會生成對應 vnode,並生成對應的 dom 元素;當其為 false 時,不會生成對應 vnode,自然不會生成任何 dom 元素。v-if 是元件真正的渲染和銷燬,而不是顯示和隱藏

v-show 始終會生成 vnode,也就間接導致了始終生成 dom。它只是控制 dom 的 display 屬性,當 v-show為 true 時,不做任何處理;當其為 false 時,生成的 dom 的 dispaly 屬性為 none。v-show 是 CSS display 控制顯示和隱藏

使用 v-if 可以有效的減少樹的節點和渲染量,但也會導致樹的不穩定;而使用 v-show 可以保持樹的穩定,但不能減少樹的節點和渲染量。

vue渲染節點越少效率越高,樹越穩定效率越高。v-if節點少但樹不穩定,v-show節點多但樹穩定。

因此,在實際開發中,顯示狀態變化頻繁的情況下應使用 v-show,以保持樹的穩定;顯示狀態變化少時應該使用 v-if,以減少樹的節點和渲染量。

3. 為何 v-for 要用 key

必須要用 key, 而且不能用 index 和 random,

key 是 vue 中 vnode 的唯一標記,透過這個 key,我們的 diff 操作可以更準確,更快速

在 diff 演算法中用 tag 和 key 來判斷,是否是 sameNode

可以減少渲染次數,提高渲染效能

相關文章