vue面試知識點總結

指令、插值

• 插值、表達式
• 指令、動態屬性
• v-html:會有xss風險、會覆蓋子組件

computed和watch

• computed有緩存，data不變則不會重新計算
• watch如何深度監聽
• watch監聽引用類型，拿不到oldval

v-if和v-show

v-if如果沒有達到條件則不會有這個元素而v-show只會用display:none隱藏

循環（列表）渲染

• 如何遍歷對象？—也可以用v-for
• key的重要性。key不能亂寫（如random或者index）
• v-for和v-if不能一起使用

事件

• event參數，自定義參數
• 事件修飾符，按鍵修飾符
• [觀察]事件被綁定到哪裏
  
  如果沒有傳參數就可以直接獲取event如果傳的話就需要在參數中寫出$event

1.event是原生的
2.事件是被掛載到當前元素

事件修飾符

按鍵修飾符

表單

• v-model
• 常見表單項tetxarea checkbox raido select
• 修飾符lazy(輸入之後變化) number(轉數字) trim(去空格)

Vue組件使用

• props和$emit
• 組件間通訊-自定義事件
• 組件生命週期

兄弟組件通訊

創建Vue實例

綁定自定義事件

調用自定義事件

及時解綁自定義事件，否則可能造成內存泄漏

生命週期（單個組件）

參考Vue官網

• 掛載階段
• 更新階段
• 銷燬階段
  
  

總結

• props和$emit
• 組件間通訊-自定義事件
• 組件生命週期

Vue高級特性

• 自定義V-model
• $nextTick
• slot
• 動態、異步組件
• keep_alive
• mixin

自定義V-model

組件


1.上面的input使用了 :value 而不是v-model
2.上面的chage和 model.event要對應起來
3.text屬性對應起來

$nextTick

• Vue是異步渲染
• data改變之後，DOM不會立刻渲染
• $nextTick會在DOM渲染之後觸發，以獲取最新的DOM節點