一、Vue對象實例化

JS代碼:

new Vue({
  /* DOM掛載點 */
  el: '#app',
  /* 使用哪個模板 */
  template: '<div>{{fruit}}</div>',
  /* 給模板傳遞的數(shù)據(jù) */
  data: {
    fruit: 'apple'
  }
})

其中Vue函數(shù)稱為構(gòu)造函數(shù)，使用new就可以實例化出來一個實例化對象。

二、Vue的生命周期

剛剛接觸Vue.js, 之前使用React.js知道需要搞清楚它的生命周期及其每個鉤子函數(shù)的含義。

Vue生命周期.png

2.1生命周期的探究

對于執(zhí)行順序和什么時間執(zhí)行，看上面的圖會比較沒有太多的耐心，因此先看一下鉤子函數(shù)的執(zhí)行然后再回頭看圖會更容易理解。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
var app1 = new Vue({
  el: '#app',
  router,
  data: {
    message: 'kuaixiang'
  },
  beforeCreate: function () {
    console.group('beforeCreate 創(chuàng)建之前:')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.message)
  },
  created: function () {
    console.group('created 創(chuàng)建完畢:')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.message)
  },
  beforeMount: function () {
    console.group('beforeMount 掛載前:')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.message)
  },
  mounted: function () {
    console.group('mounted 掛載結(jié)束:')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.message)
  },
  beforeUpdate: function () {
    console.group('beforeUpdate 更新前:')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.message)
  },
  updated: function () {
    console.group('updated 更新完成:')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.message)
  },
  beforeDestory: function () {
    console.group('beforeDestory 銷毀之前:')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.message)
  },
  destroyed: function () {
    console.group('destroyed 銷毀完成:')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'message: ' + this.message)
  },
  template: '<App/>',
  components: { App }
})

console.log(app1)

這段代碼驗證了再Vue.js中的生命周期的每個階段，需要再結(jié)合圖來看每個鉤子函數(shù)。

參考文獻

https://segmentfault.com/a/1190000008010666