1、說(shuō)說(shuō)Vue的優(yōu)缺點(diǎn)

• 優(yōu)點(diǎn)：漸進(jìn)式，組件化，輕量級(jí)，虛擬dom，響應(yīng)式，單頁(yè)面路由，數(shù)據(jù)與視圖分開(kāi)
• 缺點(diǎn)：?jiǎn)雾?yè)面不利于seo，不支持IE8以下，首屏加載時(shí)間長(zhǎng)

2、為什么說(shuō)Vue是一個(gè)漸進(jìn)式框架

漸進(jìn)式就是你想用 vuex 就用，不用也行，你想用 component 就用，不用也可以，或者你可以選擇不用，或者只選幾樣去用

3、MVVM是什么?和MVC有何區(qū)別呢?

• MVVM
  VM: 也就是View-Model，數(shù)據(jù)的雙向綁定將【模型】轉(zhuǎn)化成【視圖】，即后端傳遞的數(shù)據(jù)轉(zhuǎn)化成所看到的頁(yè)面。實(shí)現(xiàn)的方式是：數(shù)據(jù)綁定。二是將【視圖】轉(zhuǎn)化成【模型】，即將所看到的頁(yè)面轉(zhuǎn)化成后端的數(shù)據(jù)。實(shí)現(xiàn)的方式是：DOM事件監(jiān)聽(tīng)。
• MVC
  Model(模型)：負(fù)責(zé)從數(shù)據(jù)庫(kù)中取數(shù)據(jù).
  View(視圖)：負(fù)責(zé)展示數(shù)據(jù)的地方
  Controller(控制器)：用戶交互的地方，例如點(diǎn)擊事件等等，思想：Controller 將 Model 的數(shù)據(jù)展示在 View 上
• 區(qū)別
  整體看來(lái)，MVVM 比MVC精簡(jiǎn)很多，不僅簡(jiǎn)化了業(yè)務(wù)與界面的依賴，還解決了數(shù)據(jù)頻繁更新的問(wèn)題，不用再用選擇器操作DOM元素。因?yàn)樵贛VVM 中，View不知道 Model的存在，Model和ViewModel也觀察不到View，這種低耦合模式提高代碼的可重用性。Vue是MVVM框架，但是不是嚴(yán)格符合MVVM，因?yàn)镸VVM規(guī)定Model和View不能直接通信，而Vue的ref可以做到這點(diǎn)。

4、Vue生命周期

• beforeCreate：實(shí)例話Vue，未初始化和響應(yīng)式數(shù)據(jù)
• created：已初始化和響應(yīng)式數(shù)據(jù)，可訪問(wèn)數(shù)據(jù)
• beforeMount：render調(diào)用，虛擬DOM生成，未轉(zhuǎn)真實(shí)DOM
• mounted：真實(shí)DOM掛載完成
• beforeUpdate：數(shù)據(jù)更新，新虛擬DOM生成
• updated：新舊虛擬DOM進(jìn)行對(duì)比，打補(bǔ)丁，然后進(jìn)行真實(shí)DOM更新
• beforeDestroy：實(shí)例銷(xiāo)毀前，仍可訪問(wèn)數(shù)據(jù)
• destroy：實(shí)例銷(xiāo)毀，子實(shí)例銷(xiāo)毀，指令解綁，解綁本實(shí)例的事件
• activated：keep-alive所緩存組件激活時(shí)調(diào)用
• deactivated：keep-alive所緩存組件停用時(shí)調(diào)用
• errorCaptured：子孫組件的錯(cuò)誤捕獲，此函數(shù)可返回false阻止繼續(xù)向上傳播

5、Vue修飾符

• .once：事件只觸發(fā)一次
• .number：將v-medol綁定的值轉(zhuǎn)數(shù)字
• .trim：講v-model綁定的值首位空格給去掉
• .stop：阻止事件冒泡
• .capture：事件的捕獲
• .self：點(diǎn)擊事件綁定本身才觸發(fā)
• .lazy：輸入框失焦時(shí)才會(huì)更新v-model的值
• .prevent：阻止默認(rèn)事件
• .native：綁定事件在自定義組件上時(shí)，確保能執(zhí)行
• .left、.middle、.right：鼠標(biāo)左中右鍵的觸發(fā)
• passive：相當(dāng)于給移動(dòng)端滾動(dòng)事件加一個(gè).lazy
• camel：確保變量名會(huì)被識(shí)別成駝峰命名
• .sync：簡(jiǎn)化子修改父值的步驟

6、Vue內(nèi)部指令

• v-text：元素的textContent
• v-html：元素的innerHTML
• v-show：通過(guò)樣式display改變顯隱,控制的css
• v-if：通過(guò)操作DOM改變顯隱
• v-else：配合v-if
• v-else-if：配合v-else
• v-for：循環(huán)渲染
• v-on：綁定事件，縮寫(xiě)@
• v-bind：綁定變量，縮寫(xiě):
• v-model：雙向綁定
• v-slot：插槽
• v-once：只渲染一次
• v-pre：跳過(guò)元素編譯
• v-cloak：隱藏雙括號(hào)，有值顯示

7、v-if 和 v-show 有何區(qū)別？

• v-if：通過(guò)操作DOM來(lái)控制顯隱，適用于偶爾的情況,因?yàn)槊恳淮螆?zhí)行它都要生成和銷(xiāo)毀,v-if有著更高的切換消耗
• v-show：通過(guò)改變css樣式display屬性控制顯隱，適用于頻繁顯隱的情況,不會(huì)銷(xiāo)毀,v-show在初始渲染消耗更高點(diǎn)
  頻繁或者大數(shù)量顯隱使用v-show ，否則使用v-if

8、為什么 v-if 和 v-for 不建議用在同一標(biāo)簽？

v-for 優(yōu)先級(jí)高于 v-if，每項(xiàng)都通過(guò) v-for 渲染出來(lái)后再去通過(guò) v-if 判斷顯隱,過(guò)程中會(huì)增加無(wú)用的 dom 操作,渲染了無(wú)用的節(jié)點(diǎn)

9、如何設(shè)置動(dòng)態(tài)class，動(dòng)態(tài)style？

• 動(dòng)態(tài)class對(duì)象：<div :class="{ 'is-active': true, 'red': isRed }"></div>
• 動(dòng)態(tài)class數(shù)組：<div :class="['is-active', isRed ? 'red' : '' ]"></div>
• 動(dòng)態(tài)style對(duì)象：<div :style="{ color: textColor, fontSize: '18px' }"></div>

10、為什么不建議用index做key，為什么不建議用隨機(jī)數(shù)做key？

用index和用隨機(jī)數(shù)都是同理，隨機(jī)數(shù)每次都在變，做不到專一性，也很消耗性能