摘要：實(shí)例在文檔中經(jīng)常會(huì)使用這個(gè)變量名表示實(shí)例，在實(shí)例化時(shí)，需要傳入一個(gè)選項(xiàng)對(duì)象，它可以包含數(shù)據(jù)模板掛載元素方法生命周期鉤子等選項(xiàng)。通俗說(shuō)就是實(shí)例從創(chuàng)建到銷毀的過(guò)程，就是生命周期。

Vue 框架的入口就是 Vue 實(shí)例，其實(shí)就是框架中的 view model ，它包含頁(yè)面中的業(yè)務(wù)
處理邏輯、數(shù)據(jù)模型等，它的生命周期中有多個(gè)事件鉤子，讓我們?cè)诳刂普麄€(gè)Vue實(shí)例的
過(guò)程時(shí)更容易形成好的邏輯。

在文檔中經(jīng)常會(huì)使用 vm 這個(gè)變量名表示 Vue 實(shí)例，在實(shí)例化 Vue 時(shí)，需要傳入一個(gè)選
項(xiàng)對(duì)象，它可以包含數(shù)據(jù)(data)、模板(template)、掛載元素(el)、方法(methods)、生
命周期鉤子(lifecyclehook)等選項(xiàng)。

需要注意的是含 this 的函數(shù)大多不要使用箭頭函數(shù)，因?yàn)槲覀兤谕?this 指向 Vue 實(shí)例。

Vue 實(shí)例的數(shù)據(jù)都保存在 data 對(duì)象中，Vue 將會(huì)遞歸將 data 的屬性轉(zhuǎn)換為 getter/setter，
從而讓 data 的屬性能夠響應(yīng)數(shù)據(jù)變化。

var data = { a: 1 }
// 直接創(chuàng)建一個(gè)實(shí)例
var vm = new Vue({
  data: data
})
vm.a // -> 1
vm.$data === data // -> true

這樣數(shù)據(jù)就綁定在 HTML 中，Vue 框架監(jiān)視 data 的數(shù)據(jù)變化，自動(dòng)更新 HTML 內(nèi)容。

計(jì)算屬性將被混入到 Vue 實(shí)例中。所有 getter 和 setter 的 this 上下文自動(dòng)地綁定為 Vue

實(shí)例。官方API

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 僅讀取，值只須為函數(shù)
    aDouble: function () {
      return this.a * 2
    },
    // 讀取和設(shè)置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // -> 2
vm.aPlus = 3
vm.a       // -> 2
vm.aDouble // -> 4

這里可以省略setter,如果省略了setter，那么值就可以是普通函數(shù)，但是必須有返回值。

methods 將被混入到 Vue 實(shí)例中?？梢灾苯油ㄟ^(guò) VM 實(shí)例訪問(wèn)這些方法，或者在指令表達(dá)
式中使用。方法中的 this 自動(dòng)綁定為 Vue 實(shí)例。官方API

var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()
vm.a // 2

看下面這個(gè)例子，methods 和 computed 看起來(lái)可以做同樣的事情，單純看結(jié)果兩種方式確實(shí)是相同的。
然而，不同的是計(jì)算屬性是基于它們的依賴進(jìn)行緩存的。計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變
時(shí)才會(huì)重新求值。這就意味著只要 message 還沒(méi)有發(fā)生改變，多次訪問(wèn) reversedMessage 計(jì)算屬性會(huì)
立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行函數(shù)。相比而言，只要發(fā)生重新渲染，method 調(diào)用總會(huì)執(zhí)行
該函數(shù)。

var vm = new Vue({
  el: "#example",
  data: {
    message: "Hello"
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split("").reverse().join("")
    }
  }
})

一個(gè)對(duì)象，鍵是需要觀察的表達(dá)式，值是對(duì)應(yīng)回調(diào)函數(shù)。值也可以是方法名，或者包含選項(xiàng)的對(duì)象。Vue

實(shí)例將會(huì)在實(shí)例化時(shí)調(diào)用 $watch()，遍歷 watch 對(duì)象的每一個(gè)屬性。

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3
  },
  watch: {
    // 監(jiān)控a變量變化的時(shí)候，自動(dòng)執(zhí)行此函數(shù)
    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

Vue 實(shí)例有一個(gè)完整的生命周期，也就是從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列
過(guò)程，我們稱這是 Vue 的生命周期。通俗說(shuō)就是 Vue 實(shí)例從創(chuàng)建到銷毀的過(guò)程，就是生命周期。

在Vue的整個(gè)生命周期中，它提供了一些生命周期鉤子，給了我們執(zhí)行自定義邏輯的機(jī)會(huì)。

接下來(lái)我們用幾個(gè)例子來(lái)看看生命周期鉤子是怎么用的：

完整的代碼托管在 codepen

HTML結(jié)構(gòu)：

  
{{ number }}
  

我們對(duì) input 和 p 綁定了data 對(duì)象的 number 數(shù)據(jù)，Vue 實(shí)例構(gòu)建如下：

var app = new Vue({         
    el: "#app",               
    data: {                   
      number: 1
    }
})

在實(shí)例中分別在每個(gè)生命周期鉤子中 console.log("鉤子名稱",this.number) 我們發(fā)現(xiàn)，第一次頁(yè)面加載時(shí)
觸發(fā)了 beforeCreate, created, beforeMount, mounted 這幾個(gè)鉤子，data 數(shù)據(jù)在 created 中可獲取到。

再去 console.log("mounted: ", document.getElementsByTagName("p")[0]) ，DOM 渲染在 mounted 中已經(jīng)
完成。

我們?cè)僭囍ジ?input 輸入框中的內(nèi)容，可以看到輸入框上方的數(shù)據(jù)同步發(fā)生改變，這就是數(shù)據(jù)綁定的效果，在更
新數(shù)據(jù)時(shí)觸發(fā) beforeUpdate 和 updated 鉤子，且在 beforeUpdate 觸發(fā)時(shí)，數(shù)據(jù)已更新完畢。

而 destroy 僅在調(diào)用app.$destroy();時(shí)觸發(fā)，對(duì) vue 實(shí)例進(jìn)行銷毀。銷毀完成后，我們?cè)僦匦赂淖?number 的值，vue 不再對(duì)此動(dòng)作
進(jìn)行響應(yīng)了。但是原先生成的dom元素還存在，可以這么理解，執(zhí)行了destroy操作，后續(xù)就不再受vue控制了。

在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的 DOM。官方API
Vue.nextTick(function () {
  // DOM 更新了
})

官方還提供了一種寫(xiě)法，vm.$nextTick，用 this 自動(dòng)綁定到調(diào)用它的實(shí)例上

created() {
    setTimeout(() => {
          this.number = 100
          this.$nextTick(() => {
            console.log("nextTick", document.getElementsByTagName("p")[0])
          })
    },100)
}

什么時(shí)候需要到Vue.nextTick()
在 Vue 生命周期的 created() 鉤子函數(shù)進(jìn)行的 DOM 操作一定要放在 Vue.nextTick() 的回調(diào)函數(shù)中。原因是什么呢，原因是
在 created() 鉤子函數(shù)執(zhí)行的時(shí)候 DOM 其實(shí)并未進(jìn)行任何渲染，而此時(shí)進(jìn)行 DOM 操作無(wú)異于徒勞，所以此處一定要將 DOM 操作

的 js 代碼放進(jìn) Vue.nextTick() 的回調(diào)函數(shù)中。與之對(duì)應(yīng)的就是 mounted 鉤子函數(shù)，因?yàn)樵撱^子函數(shù)執(zhí)行時(shí)所有的 DOM 掛載和
渲染都已完成，此時(shí)在該鉤子函數(shù)中進(jìn)行任何DOM操作都不會(huì)有問(wèn)題 。

在數(shù)據(jù)變化后要執(zhí)行的某個(gè)操作，而這個(gè)操作需要使用隨數(shù)據(jù)改變而改變的 DOM 結(jié)構(gòu)的時(shí)候，這個(gè)操作都應(yīng)該放

進(jìn) Vue.nextTick() 的回調(diào)函數(shù)中。

生命周期鉤子的一些使用方法：

beforecreate : 可以在這加個(gè)loading事件，在加載實(shí)例時(shí)觸發(fā)
created : 初始化完成時(shí)的事件寫(xiě)在這里，如在這結(jié)束loading事件，異步請(qǐng)求也適宜在這里調(diào)用
mounted : 掛載元素，獲取到DOM節(jié)點(diǎn)
updated : 如果對(duì)數(shù)據(jù)統(tǒng)一處理，在這里寫(xiě)上相應(yīng)函數(shù)
beforeDestroy : 可以做一個(gè)確認(rèn)停止事件的確認(rèn)框
nextTick : 更新數(shù)據(jù)后立即操作dom

運(yùn)行這個(gè)例子需要marked組件，通過(guò)以下方法引入：
在項(xiàng)目目錄下運(yùn)行 npm i marked -S, js 文件中 import marked from "marked" 即可。
這個(gè)例子沒(méi)有用到生命周期鉤子，簡(jiǎn)單解讀一下這段代碼，

methods: {
    update: _.debounce(function (e) {
      this.input = e.target.value
    }, 300)
  }

html 中 textarea 綁定了 @input = "update" ，方法中用 debounce 指令設(shè)置了延時(shí)，在每次輸
入后延時(shí)同步輸入框的數(shù)據(jù)，減少了更新次數(shù)，提高性能。

這個(gè)例子從 Github 的 API 中獲取了最新的 Vue.js 提交數(shù)據(jù)，并且以列表形式將它們展示了出
來(lái)。你可以輕松地切換 master 和 dev 分支。

created: function () {
    this.fetchData()
  },
  

在 created 鉤子中用聲明的 fetchData 函數(shù)獲取ajax異步數(shù)據(jù)并渲染到頁(yè)面。