Vue生命周期

Vue實例從創(chuàng)建到銷毀的過程，就是生命周期。也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom、渲染→更新→渲染、卸載等一系列過程。

Vue 的生命周期總共分為8個階段：創(chuàng)建前/后，載入前/后，更新前/后，銷毀前/后。分別對應(yīng)8個生命周期鉤子：

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

1、beforeCreate（創(chuàng)建前）
表示實例完全被創(chuàng)建出來之前，vue 實例的掛載元素$el和數(shù)據(jù)對象 data 都為 undefined，還未初始化。

在這個生命周期之間，進行初始化事件，進行數(shù)據(jù)的觀測

2、created（創(chuàng)建后）
數(shù)據(jù)對象 data 已存在，可以調(diào)用 methods 中的方法，操作 data 中的數(shù)據(jù)，但 dom 未生成，$el 未存在 。

3、beforeMount（掛載前）
vue 實例的 $el 和 data 都已初始化，掛載之前為虛擬的 dom節(jié)點，模板已經(jīng)在內(nèi)存中編輯完成了，但是尚未把模板渲染到頁面中。data.message 未替換。

4、mounted（掛載后）
vue 實例掛載完成，data.message 成功渲染。內(nèi)存中的模板，已經(jīng)真實的掛載到了頁面中，用戶已經(jīng)可以看到渲染好的頁面了。實例創(chuàng)建期間的最后一個生命周期函數(shù)，當執(zhí)行完 mounted 就表示，實例已經(jīng)被完全創(chuàng)建好了，DOM 渲染在 mounted 中就已經(jīng)完成了。渲染時 render函數(shù)選項 > template選項 > outer HTML.

5、beforeUpdate（更新前）
當 data 變化時，會觸發(fā)beforeUpdate方法 。data 數(shù)據(jù)尚未和最新的數(shù)據(jù)保持同步。

6、updated（更新后）
當 data 變化時，會觸發(fā) updated 方法。頁面和 data 數(shù)據(jù)已經(jīng)保持同步了。

7、beforeDestory（銷毀前）
組件銷毀之前調(diào)用 ，在這一步，實例仍然完全可用。

8、destoryed（銷毀后）
組件銷毀之后調(diào)用，對 data 的改變不會再觸發(fā)周期函數(shù)，vue 實例已解除事件監(jiān)聽和 dom綁定，但 dom 結(jié)構(gòu)依然存在。

Vue雙向綁定原理

Vue 實現(xiàn) 雙向數(shù)據(jù)綁定 主要采用：數(shù)據(jù)劫持結(jié)合“發(fā)布-訂閱”模式的方式，通過Object.defineProperty（）的 set 和 get，在數(shù)據(jù)變動時發(fā)布消息給訂閱者觸發(fā)監(jiān)聽。

Vue單向綁定，雙向綁定，單次綁定

單向綁定

（一）Mustache 語法，雙大括號 {{}}（html 內(nèi)字符串綁定）
<p>{{text}}</p>

（二）v-bind 指令（html 屬性綁定）

<p v-bind:title="title">title屬性綁定，html屬性不能使用雙大括號形式綁定，只能使用v-bind指令</p>
  <p :title="title">hello</p>

單次綁定

<p v-once>{{once}}</p>

雙向綁定

<div id="app">
  <div>{{input}}</div>
  <textarea v-model="input"></textarea>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      input: '雙向綁定'
    }
  });
</script>