Vue的執行個體是Vue架構的入口，其實也就是前端的ViewModel，它包含了頁面中的業務邏輯處理、資料模型等，當然它也有自己的一系列的生命周期的事件鈎子，輔助我們進行對整個Vue執行個體生成、編譯、挂着、銷毀等過程進行js控制。
5.1. Vue執行個體初始化的選項配置對象詳解
5.1.1. Vue執行個體的的data對象
- 介紹
Vue的執行個體的資料對象data 我們已經用了很多了，資料綁定離不開data裡面的資料。也是Vue的核心屬性。它是Vue綁定資料到HTML标簽的資料源泉，另外Vue架構會自動監視data裡面的資料變化，自動更新資料到HTML标簽上去。本質原理是：Vue會自動将data裡面的資料進行遞歸抓換成getter和setter，然後就可以自動更新HTML标簽了，當然用getter和setter是以老的浏覽器Vue支援的不夠好。
- data對象的類型：
- 類型是Object或者Function。
- 如果是元件對象中，data必須是Function類型。【後面學了元件後就明白了，暫時對元件先放放。】
- 執行個體：
// 建立普通的Vue執行個體var vm = new Vue({ data: data})// 元件定義【後面會詳細講的】// Vue.extend() 中 data 必須是函數var Component = Vue.extend({ data: function () { //這裡必須是函數！！！！ return { a: 1 } }})
5.1.2. Vue執行個體的computed
- 介紹
Vue的計算屬性(computed)的屬性會自動混入Vue的執行個體中。所有 getter 和 setter 的 this 上下文自動地綁定為 Vue 執行個體。這就很強大了，再計算屬性中定義的函數裡面可以直接使用指向了vue執行個體的this，異常友善的啊。
- 類型
{ 鍵：函數} { [key: string]: Function | { get: Function, set: Function } } 當然，可以省略setter,如果省略了setter，那麼值就可以是普通函數，但是必須有傳回值。
- 官方的執行個體
-
var vm = new Vue({data: { a: 1 },computed: { // 僅讀取，值隻須為函數 aDouble: function () { return this.a * 2 }, // 讀取和設定 aPlus: { get: function () { return this.a + 1 }, set: function (v) { this.a = v - 1 } }}})vm.aPlus // -> 2vm.aPlus = 3vm.a // -> 2vm.aDouble // -> 4
5.1.3. methods
- 類型: { [key: string]: Function }
- 詳細:
methods 将被混入到 Vue 執行個體中。可以直接通過 VM 執行個體通路這些方法，或者在指令表達式中使用。方法中的 this 自動綁定為 Vue 執行個體。
注意，不應該使用箭頭函數來定義 method 函數 (例如 plus: () => this.a++)。理由是箭頭函數綁定了父級作用域的上下文，是以 this 将不會按照期望指向 Vue 執行個體，this.a 将是 undefined。
示例:
var vm = new Vue({
data: { a: 1 }, methods: { plus: function () { this.a++ } }})vm.plus()vm.a // 2
5.1.4. watch
- 類型
{ [key: string]: string | Function | Object }
- 詳細:
一個對象，鍵是需要觀察的表達式，值是對應回調函數。值也可以是方法名，或者包含選項的對象。Vue 執行個體将會在執行個體化時調用 $watch()，周遊 watch 對象的每一個屬性。
- 示例:
var vm = new Vue({ data: { a: 1, b: 2, c: 3 }, watch: { // 監控a變量變化的時候，自動執行此函數 a: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) }, // 深度 watcher c: { handler: function (val, oldVal) { /* ... */ }, deep: true } }})vm.a = 2 // -> new: 2, old: 1
//注意，不應該使用箭頭函數來定義 watcher 函數 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭頭函數綁定了父級作用域的上下文，是以 this 将不會按照期望指向 Vue 執行個體，this.updateAutocomplete 将是 undefined。
參考綜合案例：
<html ><head> <meta charset="UTF-8"> <title>Vue入門之資料監控title> <script src="https://unpkg.com/vue/dist/vue.js">script>head><body> <div id="app"> <p>{{ number }}p> <input type="button" name="btnGetNumber" value="增加" v-on:click="getNumber()"> div> <script> var app = new Vue({ el: '#app', data: { number: 1 }, methods: { // 事件響應方法的邏輯代碼 getNumber: function (e) { this.number += 1; // 不管是内聯方法調用，還是綁定事件處理器兩種方式執行事件響應方法的時候 this都是指向 app } }, watch: { // 監控number的變化，并自動執行下面的函數 number: function (val, oldVal) { console.log('val:' + val + ' - oldVal: ' + oldVal); } } });script>body>html>
5.1.5. 設定el的詳解
- 類型
string | HTMLElement
限制：隻在由 new 建立的執行個體中遵守。
- 詳細：
提供一個在頁面上已存在的 DOM 元素作為 Vue 執行個體的挂載目标,也就是說Vue綁定資料到哪裡去找。可以是CSS 選擇器，也可以是一個 HTMLElement執行個體。
在執行個體挂載之後(生命周期的内容後面會詳細講的奧)， 元素可以用 vm.$el 通路。
如果這個選項在執行個體化時有作用，執行個體将立即進入編譯過程，否則，需要顯式調用 vm.$mount() 手動開啟編譯。
// 幾乎所有例子都用到這個，是以就不再贅述var app = new Vue({ el: '#app', ...});
5.2. Vue執行個體的生命周期
Vue執行個體有一個完整的生命周期，也就是從開始建立、初始化資料、編譯模闆、挂載Dom、渲染→更新→渲染、解除安裝等一系列過程，我們稱這是Vue的生命周期。通俗說就是Vue執行個體從建立到銷毀的過程，就是生命周期。
在Vue的整個生命周期中，它提供了一系列的事件，可以讓我們注冊js方法，可以讓我們達到控制整個過程的目的地，哇賽，如果你搞過Asp.Net WebForm的話，你會發現整個就是WebForm的翻版嘛哈哈。值得注意的是，在這些事件響應方法中的this直接指向的是vue的執行個體。
首先看看下面官網的一張生命周期的圖，我做一下标注，看看整體的流程，後面我們上代碼做一下效果。
Vue提供的可以注冊的鈎子都在上圖檔的紅色框标注。他們是：
-
beforeCreate
在執行個體初始化之後，資料觀測(data observer) 和 event/watcher 事件配置之前被調用。
-
created
執行個體已經建立完成之後被調用。在這一步，執行個體已完成以下的配置：資料觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，挂載階段還沒開始，$el 屬性目前不可見。
-
beforeMount
在挂載開始之前被調用：相關的 render 函數首次被調用。
-
mounted
el 被新建立的 vm.$el 替換，并挂載到執行個體上去之後調用該鈎子。如果 root 執行個體挂載了一個文檔内元素，當 mounted 被調用時 vm.$el 也在文檔内。
-
beforeUpdate
資料更新時調用，發生在虛拟 DOM 重新渲染和打更新檔之前。你可以在這個鈎子中進一步地更改狀态，這不會觸發附加的重渲染過程。
-
updated
由于資料更改導緻的虛拟 DOM 重新渲染和打更新檔，在這之後會調用該鈎子。當這個鈎子被調用時，元件 DOM 已經更新，是以你現在可以執行依賴于 DOM 的操作。然而在大多數情況下，你應該避免在此期間更改狀态，因為這可能會導緻更新無限循環。該鈎子在伺服器端渲染期間不被調用。
-
beforeDestroy
執行個體銷毀之前調用。在這一步，執行個體仍然完全可用。
-
destroyed
Vue 執行個體銷毀後調用。調用後，Vue 執行個體訓示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子執行個體也會被銷毀。該鈎子在伺服器端渲染期間不被調用。接下來我們做一個例子，看一下Vue中所有的生命周期怎麼用的。
<html ><head> <meta charset="UTF-8"> <title>Vue入門之生命周期title> <script src="https://unpkg.com/vue/dist/vue.js">script>head><body> <div id="app"> <p>{{ number }}p> <input type="text" name="btnSetNumber" v-model="number"> div> <script> var app = new Vue({ el: '#app', data: { number: 1 }, beforeCreate: function () { console.log('beforeCreate 鈎子執行...'); console.log(this.number) }, cteated: function () { console.log('cteated 鈎子執行...'); console.log(this.number) }, beforeMount: function () { console.log('beforeMount 鈎子執行...'); console.log(this.number) }, mounted: function () { console.log('mounted 鈎子執行...'); console.log(this.number) }, beforeUpdate: function () { console.log('beforeUpdate 鈎子執行...'); console.log(this.number) }, updated: function () { console.log('updated 鈎子執行...'); console.log(this.number) }, beforeDestroy: function () { console.log('beforeDestroy 鈎子執行...'); console.log(this.number) }, destroyed: function () { console.log('destroyed 鈎子執行...'); console.log(this.number) }, });script>body>html>
再看一個綜合的實戰的例子，可能涉及到ajax群組件，不過先看一下vue的生命周期的例子的用法：
import Axios from 'axios' // 這是一個輕量級的ajax庫，import是es6子產品導入的文法。export default { // 這是一個vue的子產品，後面講奧。 name: 'app', components: { }, data: function () { return { list: [] } }, mounted: function () { // 挂在完成後的生命周期鈎子注冊。 this.$nextTick(function () { // 等待下一次更新完成後執行業務處理代碼。 Axios.get('/api/menulist', {// 将回調延遲到下次 DOM 更新循環之後執行。在修改資料之後立即使用它，然後等待 DOM 更新 params: { } }).then(function (res) { this.list = res.data }.bind(this)) }) }}
5.3. Vue執行個體的全局配置
這一塊都是一些小的知識點，我就不贅述了，直接copy 官網 Vue.config 是一個對象，包含 Vue 的全局配置。可以在啟動應用之前修改下列屬性：
- silent
- 類型：boolean
- 預設值：false
- 用法：
-
Vue.config.silent = true//取消 Vue 所有的日志與警告。
- optionMergeStrategies
- 類型：{ [key: string]: Function }
- 預設值：{}
- 用法：
-
Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) {return child + 1}const Profile = Vue.extend({_my_option: 1})// Profile.options._my_option = 2//自定義合并政策的選項。//合并政策選項分别接受第一個參數作為父執行個體，第二個參數為子執行個體，Vue執行個體上下文被作為第三個參數傳入。
- devtools
- 類型：boolean
- 預設值：true (生産版為 false)
- 用法：
-
// 務必在加載 Vue 之後，立即同步設定以下内容Vue.config.devtools = true//配置是否允許 vue-devtools 檢查代碼。開發版本預設為 true，生産版本預設為 false。生産版本設為 true 可以啟用檢查。
- errorHandler
- 類型：Function
- 預設值：預設抛出錯誤
- 用法：
-
Vue.config.errorHandler = function (err, vm) {// handle error}//指定元件的渲染和觀察期間未捕獲錯誤的處理函數。這個處理函數被調用時，可擷取錯誤資訊和 Vue 執行個體。//Sentry, an error tracking service, provides official integration using this option.
- ignoredElements
- 類型: Array
- 預設值: []
- 用法:
-
Vue.config.ignoredElements = ['my-custom-web-component', 'another-web-component']須使 Vue 忽略在 Vue 之外的自定義元素 (e.g., 使用了 Web Components APIs)。否則，它會假設你忘記注冊全局元件或者拼錯了元件名稱，進而抛出一個關于 Unknown custom element 的警告。
- keyCodes
- 類型：{ [key: string]: number | Array }
- 預設值：{}
- 用法：
-
Vue.config.keyCodes = {v: 86,f1: 112,mediaPlayPause: 179,up: [38, 87]}api//給 v-on 自定義鍵位别名。
5.4. Vue的全局API
Vue的全局API提供大量的功能，我這裡就給大家羅列幾個常用的結果，其他的還是參考官網.
5.4.1. Vue.nextTick
文法：Vue.nextTick( [callback, context] )
參數：{Function} [callback]{Object} [context]
用法：在下次 DOM 更新循環結束之後執行延遲回調。在修改資料之後立即使用這個方法，擷取更新後的 DOM。
// 修改資料vm.msg = 'Hello'// DOM 還沒有更新Vue.nextTick(function () { // DOM 更新了})
5.4.2. Vue.set
文法：Vue.set( object, key, value )
參數：{Object} object{string} key{any} value傳回值：設定的值.
用法：
設定對象的屬性。如果對象是響應式的，確定屬性被建立後也是響應式的，同時觸發視圖更新。這個方法主要用于避開 Vue 不能檢測屬性被添加的限制。注意對象不能是 Vue 執行個體，或者 Vue 執行個體的根資料對象。
5.4.3. Vue.compile
- 文法：
Vue.compile( template )
- 參數：
{string} template
- 用法：
//在render函數中編譯模闆字元串。隻在獨立建構時有效var res = Vue.compile('
{{ msg }}
')new Vue({ data: { msg: 'hello' }, render: res.render, staticRenderFns: res.staticRenderFns})
5.4.4. 全局API總結
其實還有幾個其他的全局API，不打算在這裡講了，比如擴充元件Vue.extend 的用法、Vue.use加載插件、Vue.filter加載過濾器、Vue.directive自定義指令等 後面再講其他Vue的知識點的時候，再加上這些，全局API其實就是Vue類型的靜态方法，全局範圍内都可以使用的，某些執行個體的方法本質也是調用了這些全局的，後面用到時候再說。
5.5. Vue執行個體與生命周期總結
Vue的執行個體封裝的還是挺有藝術性的，很符合開發者的思維規範，它的生命周期也非常清晰，使用起來也非常友善。Vue确實一個好架構。