vue中一些常見的面試題
前言
一位正在學習前端的菜鳥，雖菜，但還未放棄。
內容
1，說一下vue中的指令
答：
①，v-html：主要用來渲染html節點，其作用與原生的innerHtml基本一致
②，v-text：主要用來渲染文本，其作用與原生的innerText基本一致
③，v-on：主要用來綁定事件， 簡寫是@ 支援多個事件一起綁定 如 v-on="{click:fun,dbclick:fun1}"
④，v-bind：主要用來綁定屬性，簡寫是 :
⑤，v-model：主要是用來跟表單進行雙向數據綁定
⑥，v-for：主要用來多次渲染節點 注意：官網不推薦跟v-if一起使用，因為v-for的優先順序更高 所以v-for每次在循環的時候都會進行v-if 這樣很影響性能
⑦，v-if：主要用來判斷是否創建和刪除節點，可以搭配v-else 和v-else-if 一起使用
⑧，v-show：主要用來顯示和隱藏原理，其主要原理根據css屬性中的display為block和none來決定的
⑨，v-once：主要用來渲染元素或者組件一次的，綁定完一次後就不會再有相關聯了，所以性能更好
⑩，v-block：主要用來解決插值表達式中的閃爍問題
2，vue生命周期的的理解
答：vue的生命周期主要分為8個階段，3大狀態（其中第一個狀態一定會觸發，二三階段需要特點的條件才會觸發）
第一個狀態有四個生命周期函數
①，創建前(beforeCreate)/創建後(created) 在beforeCreate階段，vue實例的掛載元素el和數據對象data都為undefined，還未初始化。在created階段，vue實例的數據對象data有了，el和數據對象data都為undefined，還未初始化。
②，載入前(beforeMount)/載入後(mounted) 在beforeMount階段，vue實例的$el和data都初始化了，但還是掛載之前為虛擬的dom節點，data.message還未替換。在mounted階段，vue實例掛載完成，data.message成功渲染。
第二個狀態有倆個生命周期函數
①，更新前(beforeUpdate)/更新後(updated) 這個階段主要是data裡面的數據發生改變時，就會觸發這倆個方法
第三個狀態有倆個生命周期函數
①，銷毀前(beforeDestroy)/銷毀後(destroyed) 這個階段主要就是銷毀vue實例已經解除了事件監聽以及和dom的綁定才會觸發，觸發完以後該實例將不會再產生任何生命周期函數，但是dom依舊存在
3，為什麼vue組件裡面的data必須是一個函數
答：因為vue的組件化開發主要就是為了自己的程式碼自己管理，復用性高等優點，要是data裡面不是作為一個函數的話，那麼所有的數據對象都指向同一個data對象，當在一個組件中修改data時，其他重用的組件中的data會同時被修改，而使用返回對象的函數，由於每次返回的都是一個新對象（Object的實例），對象都是存在於堆記憶體裡面的，他們的記憶體地址不一樣，所以則不會出現這種問題
4，vue中的computed和watch有什麼區別？
答：
computed：①，支援快取，就是只有當依賴效果發生改變時，才會重新計算，否則就是使用快取效果，性能較好
②，不支援非同步，當computed裡面有非同步的時候操作是無效的，無法監聽數據的變化
③，如果computed寫的是一個函數的話，默認是走get方法，如果需要set方法，則這倆個都要寫
④，computed在實際開發中，更多的用於多個屬性計算一個屬性的時候使用
watch:①，不支援快取，每次data數據發生改變，都會觸發該方法
②，支援非同步，watch裡面可以寫非同步的操作
③，監聽的函數默認會傳倆個參數過來，第一個是新的數據，第二個是之前的數據
④，在實際開發中，一般用在一個數據改變多個數據的時候比較推薦使用
5，vue的雙向數據綁定原理是什麼?
答：vue的雙向數據綁定原理主要是結合了數據劫持和觀察者模式來進行互綁的，也就是數據層改變，視圖層也就跟著改變，視圖層改變，數據層也就隨著改變，他內部主要的原理是運用了Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調。
6,vuex中有幾個核心屬性，分別是什麼？
答，一共有5個核心屬性
①：state 唯一數據源,Vue 實例中的 data 遵循相同的規則
②：getters 可以認為是 store 的計算屬性,就像computed屬性一樣，getter 的返回值會根據它的依賴被快取起來，且只有當它的依賴值發生了改變才會被重新計算。getter 會暴露為 store.getters 對象，你可以以屬性的形式訪問這些值
③：mutation 更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation,非常類似於事件,通過store.commit 方法觸發
④：action action 類似於 mutation，不同在於Action 提交的是 mutation，而不是直接變更狀態，Action 可以包含任意非同步操作
⑤：module 由於使用單一狀態樹，應用的所有狀態會集中到一個比較大的對象。當應用變得非常複雜時，store 對象就有可能變得相當臃腫。為了解決以上問題，Vuex 允許我們將 store 分割成模組
