Osheep

时光不回头,当下最重要。

Vue 实例生命周期总结

问题

由于Vue项目中需要前端导出表格的功能,需要用到第三方组件tableexport。使用该组件只需通过该语句TableExport(document.getElementsByTagName(“table”))生成一个TableExport对象。然而我却遇到一个bug,迟迟得不到预期,花了一整个白天没有解决。

睡觉之前我打印了document.getElementsByTagName(“table”)发现是undefined,这时候我意识到我生成TableExport对象的时机错误了,此时该table元素还没有插入文档中。于是我把这行代码从created钩子函数中移到了ready钩子函数中(vue 1.0),bug终于解决了。

之前的代码是这样子的:

  created () {
    this.startTime = '2016-06-01'
    this.endTime = moment().format('YYYY-MM-DD')
    this.updateColor()
    this.serial_numbers = ''
    this.product = 'nano'
    TableExport(document.getElementsByTagName("table"))
  },

  ready () {

  }

修改后的代码是这样子的:

  created () {
    this.startTime = '2016-06-01'
    this.endTime = moment().format('YYYY-MM-DD')
    this.updateColor()
    this.serial_numbers = ''
    this.product = 'nano'
  },

  ready () {
    TableExport(document.getElementsByTagName("table"))
  }

原因

这是由于在created钩子执行时,Vue实例虽已经创建完成,但模板还未被编译,元素还未插入DOM文档,所以document.getElementsByTagName(“table”)返回的是undefined。而在ready钩子执行时,模板已被编译,元素已插入DOM文档。

总结

查阅了官网并参考网上其他资料后,我总结出了如下了的Vue 实例生命周期表

Vue 1.0 Vue 2.0 描述
init beforeCreate 实例初始化之后,配置之前
created created 实例已经创建完成之后,已完成配置,挂载之前。
beforeCompile 模板编译开始前
beforeMount 挂载之前
compiled 模板编译,但是不担保el已插入文档)
ready mounted 模板编译(el第一次插入文档之后)/挂载之后
beforeUpdate 数据更新前
updated 数据更新后
activated keep-alive 组件激活时
deactivated keep-alive 组件停用时
attached el插入DOM时
detached el从DOM中删除时
beforeDestory beforeDestory 实例销毁之前
destoryed destoryed Vue 实例销毁后,Vue 实例指示的所有东西都会解绑,所有的子实例也会被销毁

如有疑问或建议,欢迎来我的博客留言与我讨论。

点赞