Vue基础精讲 —— 实例解析Vue的生命周期

结合官网Vue生命周期图例，实例生命周期钩子

// vue生命周期
import Vue from 'vue'
new Vue({
  el: '#root',
  template: '<div>{{text}}</div>',
  data: {
    text: 'text'
  },
  beforeCreate () {
    // 无法做dom节点操作
    console.log(this.$el, 'beforeCreate')
  },
  created () {
    // 无法做dom节点操作
    console.log(this.$el, 'created')
  },
  beforeMount () {
    console.log(this.$el, 'beforeMount')
  },
  mounted () {
    // 一般做dom相关操作在mounted // 跟数据相关操作可以在created，也可以在mounted
    console.log(this.$el, 'mounted')
  },
  beforeUpdate () {
    console.log(this, 'beforeUpdate')
  },
  updated () {
    console.log(this, 'updated')
  },
  activated () {
    console.log(this, 'activated')
  },
  deactivated () {
    console.log(this, 'deactivated')
  },
  beforeDestroy () {
    console.log(this, 'beforeDestroy')
  },
  destroyed () {
    console.log(this, 'destroyed')
  },
  render (h) {
    // throw new TypeError('render error')
    console.log(h, 'render function invoked')
    return h('div', {}, this.text)
  },
  renderError (h, err) {
    // 只开发环境使用
    // 在本组件出错时调用，若本组件调用的子组件报错，不会执行
    // 只关心本组件是否渲染成功
    return h('div', {}, err.stack)
  },
  errorCaptured () {
    // 正式环境可以使用
    // 可以向上冒泡，能监听本组件及其子组件所有报错信息
  }
})
// 若不指定el，执行beforeCreate、执行created
// mount 是将组件生成的HTML内容挂载到Dom上的的过程
// update 每次数据更新时执行
// destroy 组件销毁时执行
// activate 跟vue中原生组件keep-alive相关
// 注意this.$el的值
// mount 和 create 只调用一次
// mount在服务端渲染是不会被调用的，因为mount是跟dom操作相关，没有dom执行环境。服务端渲染会调用create

 指定el，执行结果如下：

不指定el，执行结果如下：

render function执行结果：

renderError执行结果：

与君共勉：再牛逼的梦想，也抵不住傻逼般的坚持！