Vue
v-show和v-if有什麼區別
v-show通過CSSdisplay控制顯示和隱藏v-if組件真正的渲染和銷燬，而不是顯示和隱藏
爲何在v-for使用key
- 必須用
key， 且不能是index和random diff算法中通過tag和key來判斷，是否是sameNode- 減少渲染次數，提升渲染性能
Vue 組件生命週期（包括父子組件）
Vue 組件如何通信（常見）
- 父子組件
props和this.$emit - 自定義事件
event.$noevent.$offevent.$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
- 用法：
<User v-bind="$props"/>
如何自己實現 v-model
多個組件有相同的邏輯，如何抽離
- mixin
何時要使用異步組件
- 加載大文件
- 路由異步加載
- 優化性能
何時使用 keep-alive
- 緩存組件，不需要重複渲染
- 如多個靜態
tab頁的切換 - 優化性能
何時需要使用 beforeDestory
- 解綁自定義事件
event.$off - 清除定時器
- 解綁自定義的
DOM事件，如window scroll等
什麼是作用域插槽
Vuex 中 action 和 mutation 有何區別
- action 中處理異步，mutation 不可以
- mutation 做原子操作（每次就做一個操作）
- action 可以整個多個 mutation
Vue-router 常用的路由模式
- hash 默認
- H5 history（需要服務端支持）
如何配置 Vue-router 異步加載
請用 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
彩蛋
之前一直折騰美團那個項目，在視頻介紹有說過，做完項目就繼續整理我的筆記倉庫。如下圖所示，自己還是覺得有不錯的迴應吧，建立倉庫之初還沒有想過會有人給我 star，更別說 fork 之後 pull request 了。誒，沒想到還真有，✿✿ヽ(°▽°)ノ✿
如果您覺得不錯，那麼請毫不留情地給個 star 吧，您的支持是我繼續創作的動力！star 數越多，就會有更多的小夥伴能夠看到，或許更多的人在前端有了方向不是。
目前，可以說前端知識梳理篇正式出爐啦，請讀者跟上俺的步伐，一起學習前端知識吧，不妨關注一波不迷路~
此外，我的微信公衆號：小獅子前端Vue 也運作啦，目前已經開設前端每日一題專欄，每天會發布一篇文章，具體如下圖所示，僅需幾分鐘，就能獲得知識，豈不是白嫖的感覺~
此次靈感也是來自於在微信 看一看 ，我看到了考研大軍的激情，有着每日一句的專欄，每天可能就只需要那麼幾分鐘的時間，就能學習英語。我覺得是挺不錯的，那我也想嘗試這樣做，一方面，我能每天整理一點學習筆記來，另一方面，也算是自己每天學習打卡。一小步或許就是未來一大步，要來一起打卡嗎✿✿ヽ(°▽°)ノ✿
最後，沒啥要總結的了，小獅子筆記倉庫會一直更新下去，每日一題專欄我也會堅持記錄。我想，能影響一些人就已經不錯啦，曾經也是受過很多dalao影響，目前也是在回饋開源。好啦，下期再見，一個不是隻會寫業務代碼的前端攻城獅在下一期又會寫什麼呢？
點贊收藏評論，三連支持，下期早點見哈哈哈哈哈~
學如逆水行舟，不進則退