vue git源碼地址： https://github.com/vuejs/vue
vue api官方文檔：https://cn.vuejs.org/v2/api/
vue 風(fēng)格指南：https://cn.vuejs.org/v2/style-guide/
vuex 文檔：https://vuex.vuejs.org/zh/
vue源碼系列-中文社區(qū)：https://vue-js.com/learn-vue/reactive/

vue生命周期

beforeCreate——created——beforeMount——mounted——beforeUpdate——updated——beforeDestory——destoryed

• beforeCreate
  實(shí)例初始化之后，數(shù)據(jù)觀測(cè)和事件配置之前被調(diào)用。
  此時(shí)組件的選項(xiàng)對(duì)象還未創(chuàng)建，el 和 data 并未初始化，因此無(wú)法訪問(wèn)methods， data， computed等上的方法和數(shù)據(jù)。

• created
  實(shí)例創(chuàng)建完成之后被調(diào)用。
  此時(shí)實(shí)例已完成以下配置：數(shù)據(jù)觀測(cè)、屬性和方法的運(yùn)算，watch/event事件回調(diào)，完成了data 數(shù)據(jù)的初始化，el對(duì)象還沒(méi)有。

• beforeMount
  掛載開(kāi)始之前被調(diào)用。
  相關(guān)的render函數(shù)首次被調(diào)用（虛擬DOM），實(shí)例已完成以下的配置： 編譯模板，把data里面的數(shù)據(jù)和模板生成html，完成了el和data 初始化，注意此時(shí)還沒(méi)有掛載html到頁(yè)面上。

• mounted
  掛載完成。
  此時(shí)模板中的虛擬DOM已經(jīng)渲染到html頁(yè)面上，替換成真實(shí)的DOM。

• beforeUpdate
  數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁的情況下，更改之前調(diào)用。
  虛擬DOM重新渲染補(bǔ)丁之前，可以在此鉤子中進(jìn)一步地更改狀態(tài)，不會(huì)觸發(fā)附加地重渲染過(guò)程。

• updated
  數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁的情況下，更改完成調(diào)用。
  調(diào)用時(shí)，組件DOM已經(jīng)更新。

• beforeDestory
  實(shí)例銷毀之前調(diào)用。
  此時(shí)，實(shí)例仍然完全可用。

• destoryed
  實(shí)例銷毀之后調(diào)用。
  調(diào)用后，所有的事件監(jiān)聽(tīng)器會(huì)被移出，所有的子實(shí)例也會(huì)被銷毀，此鉤子在服務(wù)器端渲染期間不被調(diào)用。

vue生命周期.png

vue 父子組件的生命周期

實(shí)例的創(chuàng)建：先創(chuàng)建父組件示例，再創(chuàng)建子組件實(shí)例。
渲染：先渲染子組件，再渲染父組件。
創(chuàng)建時(shí)候的生命周期順序：
父beforeCreate —— 父created —— 父beforeMount —— 子beforeCreate —— 子created —— 子beforeMount —— 子mounted —— 父mounted
子組件更新順序：
父beforeUpdate —— 子beforeUpdate —— 子updated —— 父updated
父組件更新順序：
父beforeUpdate —— 父updated
銷毀的順序：
父beforeDestroy —— 子beforeDestroy —— 子destroyed —— 父destroyed

v-for 的key的作用及原理

vue可以用v-for 指令基于一個(gè)數(shù)組來(lái)渲染一個(gè)列表。實(shí)際應(yīng)用的時(shí)候會(huì)給每一個(gè)項(xiàng)設(shè)置一個(gè)key，那么這個(gè)key是用來(lái)做什么的呢？

當(dāng) vue 正在更新使用 v-for 渲染的元素列表時(shí)，它默認(rèn)使用“就地更新”的策略。如果數(shù)據(jù)項(xiàng)的順序被改變，vue 將不會(huì)移動(dòng) DOM 元素來(lái)匹配數(shù)據(jù)項(xiàng)的順序，而是就地更新每個(gè)元素，并且確保它們?cè)诿總€(gè)索引位置正確渲染。這個(gè)類似 Vue 1.x 的 track-by="$index"。

這個(gè)默認(rèn)的模式是高效的，但是只適用于不依賴子組件狀態(tài)或臨時(shí) DOM 狀態(tài) (例如：表單輸入值) 的列表渲染輸出。

所以為了給 vue 一個(gè)提示，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份，從而重用和重新排序現(xiàn)有元素，需要為每項(xiàng)提供一個(gè)唯一 key屬性：

<div v-for="item in items" v-bind:key="item.id">
  <!-- 內(nèi)容 -->
</div>

key是vue識(shí)別節(jié)點(diǎn)的一個(gè)通用機(jī)制

vue中列表循環(huán)需加:key="唯一標(biāo)識(shí)" 唯一標(biāo)識(shí)可以是item里面id index等，因?yàn)関ue組件高度復(fù)用，增加Key可以標(biāo)識(shí)組件的唯一性，更好地區(qū)別各個(gè)組件 key的作用，主要是為了高效的更新虛擬DOM。

key 的特殊 attribute 主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對(duì)比時(shí)辨識(shí) VNodes。如果不使用 key，Vue 會(huì)使用一種最大限度減少動(dòng)態(tài)元素并且盡可能的嘗試就地修改/復(fù)用相同類型元素的算法。而使用 key時(shí)，它會(huì)基于 key 的變化重新排列元素順序，并且會(huì)移除 key 不存在的元素。

它也可以用于強(qiáng)制替換元素/組件而不是重復(fù)使用它。