欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-03-23 15:46:04
...

结合官网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,执行结果如下:

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

不指定el,执行结果如下:

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

render function执行结果:

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

renderError执行结果:

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

与君共勉:再牛逼的梦想,也抵不住傻逼般的坚持!