一、Vue对象实例化

JS代码:

new Vue({
  /* DOM挂载点 */
  el: '#app',
  /* 使用哪个模板 */
  template: '<div>{{fruit}}</div>',
  /* 给模板传递的数据 */
  data: {
    fruit: 'apple'
  }
})

其中Vue函数称为构造函数，使用new就可以实例化出来一个实例化对象。

二、Vue的生命周期

刚刚接触Vue.js, 之前使用React.js知道需要搞清楚它的生命周期及其每个钩子函数的含义。

Vue生命周期.png

2.1生命周期的探究

对于执行顺序和什么时间执行，看上面的图会比较没有太多的耐心，因此先看一下钩子函数的执行然后再回头看图会更容易理解。

// 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 创建之前:')
    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 创建完毕:')
    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 挂载结束:')
    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中的生命周期的每个阶段，需要再结合图来看每个钩子函数。

参考文献

https://segmentfault.com/a/1190000008010666