1=>為什麼data是一個函式 【理解】

元件的data寫成一個函式，
這樣每複用一次元件，就會返回一分新的data。
也就說:給每個元件例項建立一個私有的資料空間。
各個元件維護各自的資料。
如果單純的寫成物件形式，那麼所有元件例項共用了一份data，就會造成一個變了全都會變的結果。
data(){
    return{
        
    }
}

2=> Vue元件通訊有哪些方式？

1、props(父給子) 和 $emit (子傳遞父) 很熟悉

2、$parent 和 $children 獲取單籤元件的父元件和當前元件的子元件。

3、$attrs 和 $listeners A -> B -> C。Vue2.4開始提供了$attrs和$listeners來解決這個問題。

4、父元件中通過 provide 來提供變數，然後在子元件中通過 inject 來注入變數。（官方不推薦在實際業務中適用，但是寫元件庫時很常用。）

5、$refs 獲取元件例項。

6、envetBus 兄弟元件資料傳遞，這種情況下可以使用事件匯流排的方式。

7、vuex 狀態管理。
 

3=> vue的生命週期 8+2

我們都知道vue常用的8個生命週期，但是這幾個生命週期你熟悉嗎
activated keep-alive 專屬，元件被啟用時呼叫
deactivated keep-alive 專屬，元件被銷燬時呼叫

4=> 怎樣理解 Vue 的單項資料流

資料總是從父元件傳到子元件，
子元件沒有權利修改父元件傳過來的資料，[]
只能請求父元件對原始資料進行修改。
這樣會防止從子元件意外改變父元件的狀態，
從而導致你的應用的資料流向難以理解。

注意：在子元件直接用 v-model 繫結父元件傳過來的 props 這樣是不規範的寫法，開發環境會報警告。
如果實在要改變父元件的 props 值可以再data裡面定義一個變數，並用 prop 的值初始化它，之後用$emit 通知父元件去修改。
 

5=> v-if 和 v-for 為什麼不建議一起使用

v-for和v-if不要在同一標籤中使用，
因為解析時先解析v-for在解析v-if,[會消耗效能的哈]
如果遇到需要同時使用時可以巢狀一層元素  <template></template>

Vue 如何檢測陣列變化 [這個我不太理解]

陣列考慮效能原因沒有用 defineProperty 對陣列的每一項進行攔截，
而是選擇對7種陣列（push,shift,pop,splice,unshift,sort,reverse）方法進行重寫（AOP 切片思想）。
所以在 Vue 中修改陣列的索引和長度無法監控到。
需要通過以上7種變異方法修改陣列才會觸發陣列對應的watcher進行更新。
 

Vue的父子元件生命週期鉤子函式執行順序 [這一部分自己確實不夠了解]

載入渲染過程
父beforeCreate -> 父created -> 父beforeMount ->
->子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

子元件更新過程
父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated

父元件更新過程
父beforeUpdate -> 父updated

銷燬過程
父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

虛擬DOM是什麼？有什麼優缺點？

[本節是一個重點，你需要多花一點時間去理解哈]

由於在瀏覽器中操作DOM是很昂貴的。頻繁操作DOM，
會產生一定效能問題。這就是虛擬Dom的產生原因。
Vue2的Virtual DOM 借鑑了開源庫 snabbdom 的實現。
Virtual DOM本質就是用一個原生的JS物件去描述一個DOM節點，是對真實DOM的一層抽象。

優點：
1、保證效能下限：框架的虛擬DOM需要適配任何上層API可能產生的操作，
他的一些DOM操作的實現必須是普適的，所以它的效能並不是最優的；
但是比起粗暴的DOM操作效能要好很多，
因此框架的虛擬DOM至少可以保證在你不需要手動優化的情況下，依然可以提供還不錯的效能，既保證效能的下限。
2、無需手動操作DOM：我們不需手動去操作DOM，
只需要寫好 View-Model的 程式碼邏輯，框架會根據虛擬DOM和資料雙向繫結，
幫我們以可預期的方式更新檢視，極大提高我們的開發效率。
3、跨平臺：虛擬DOM本質上是JavaScript物件，而DOM與平臺強相關，
相比之下虛擬DOM可以進行更方便地跨平臺操作，例如伺服器端渲染、weex開發等等。

缺點：
1、無法進行極致優化：雖然虛擬DOM + 合理的優化，
足以應對大部分應用的效能需要，但在一些效能要求極高的應用中虛擬DOM無法進行鍼對性的極致優化。

2、首次渲染大量DOM時，由於多了一層DOM計算，會比innerHTML插入慢。

v-model 原理

v-model 只是語法糖而已。
v-model 在內部為不同的輸入元素使用不同的 property 並丟擲不同的事件。
text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change事件；
select 欄位將 value 作為 prop 並將 change 作為事件。
注意：對於需要使用輸入法的語言，你會發現 v-model 不會在輸入法組合文字過程中得到更新。
在普通元素上：
input v-model='sth' 
input v-bind:value='sth' v-on:input='sth = $event.target.value'

17、v-for為什麼要加key

如果不使用key，
Vue會使用一種最大限度減少動態元素並且儘可能的嘗試就地修改/複用相同型別元素的演算法。
key 是為Vue中Vnode的唯一標識，通過這個key，我們的diff操作可以更準確、更快速。
更準確：因為帶key就不是就地複用了，在sameNode函式 a.key === b.key 對比中可以避免就地複用的情況。所以更加準確。
更快速：利用key的唯一性生成map物件來獲取對應節點，比遍歷方式塊。

本文的源地址：https://www.cnblogs.com/wenshaochang123/p/14888494.html

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯絡你；(っ•̀ω•́)っ✎⁾⁾！

如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關注博主，在此感謝！

萬水千山總是情，打賞5毛買辣條行不行，所以如果你心情還比較高興，也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾！

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯絡你；(っ•̀ω•́)っ✎⁾⁾！