Vue
v-show和v-if有什麼差別
- v-show 通過 CSS display 控制顯示和隐藏
- v-if 元件真正的渲染和銷毀，而不是顯示和隐藏
為何在v-for使用key
- 必須用 key ， 且不能是 index 和 random
- diff 算法中通過 tag 和 key 來判斷，是否是 sameNode
- 減少渲染次數，提升渲染性能
Vue 元件生命周期(包括父子元件)
參考：Vue生命周期
Vue 元件如何通信(常見)
- 父子元件 props 和 this.$emit
- 自定義事件 event.$no event.$off event.$emit
- vuex
描述元件渲染和更新的過程
如上圖所示，vue原理三大子產品：響應式、模闆渲染、vdom
初次渲染過程
- 解析模闆為 render 函數 (或在開發環境已完成，vue-loader)
- 觸發響應式，監聽 data 屬性 getter、 setter
- 執行 render 函數，生成 vnode ，patch(elem,vnode)
更新過程
- 修改 data，觸發 setter(此前在 getter 中已被監聽)
- 重新執行 render 函數，生成 newVnode
- patch(vnode,newVnode)
with 文法
改變 { } 内自由變量的查找規則，當做 obj 屬性來查找如果找不到比對的 obj 屬性，就會報錯with 要慎用，它打破了作用域規則，易讀性變差
vue為何是異步渲染
- 減少 DOM 操作次數，提高性能
$nextTick 待 DOM 渲染完後再回調，頁面渲染時會将 data 的修改做整合，多次 data 修改隻會渲染一次。
雙向資料綁定 v-model 的實作原理
- input 元素的 value = this.name
- 綁定 input 事件 this.name = $event.target.value
- data 更新觸發 re-render
對 MVVM 的了解
computed 有何特點
- 緩存，data 不變不會重新計算
- 提高性能
為何元件 data 必須是一個函數
如上圖所示，這個不是 vue 相關問題，而是關于 js 方面問題。vue 檔案編譯之後實際上是 class ，是一個類。而對元件使用的時候，相當于對元件進行了執行個體化。如果 data 不是一個函數的話，那每一個元件執行個體就共享了，就會造成資料污染問題。而函數的話，就會形成閉包，保護變量，不會造成影響。
ajax 請求應該放在哪個生命周期
- mounted
- JS 是單線程的，ajax 異步擷取資料
- 放在 mounted 之前沒有用，隻會讓邏輯更加混亂
如何将元件所有 props 傳遞給子元件
- $pros
- 用法：
如何自己實作 v-model
如何自己實作 v-model
多個元件有相同的邏輯，如何抽離
- mixin
何時要使用異步元件
- 加載大檔案
- 路由異步加載
- 優化性能
何時使用 keep-alive
- 緩存元件，不需要重複渲染
- 如多個靜态 tab 頁的切換
- 優化性能
何時需要使用 beforeDestory
- 解綁自定義事件 event.$off
- 清除定時器
- 解綁自定義的 DOM 事件，如window scroll 等
什麼是作用域插槽
請用 vnode 描述一個 DOM 結構
場景：
vnode:
diff 算法的時間複雜度
- O(n)
- 在O(n^3)上做了優化
簡述 diff 算法過程
- patch ( elem , vnode ) 和 patch ( vnode , newVnode )
- patchVnode 和 addVnodes 和 removeVnodes
- updateChildren (key的重要性)
vue 常見性能優化方式
- 合理使用 v-show 和 v-if
- 合理使用 computed
- v-for 時加 key，以及避免和 v-if 同時使用
- 自定義事件、DOM事件及時銷毀
- 合理使用異步元件
- 合理使用 keep-alive
- data 層級不要太深
- 使用 vue-loader 在開發環境做模闆編譯(預編譯)
- webpack層面的優化(傳送門)
- 使用SSR