脚本宝典收集整理的这篇文章主要介绍了vue.js 生命周期详解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

vue.js的生命周期是非常重要的一个点，听起来是老生常谈了。但如果仅仅是知道它有哪几个生命周期是远远不够的。
要清楚了解每个周期钩子在干什么，什么事情该使用哪个钩子干，这样才能更清晰的开发，避免踩坑
vue的生命周期有8个钩子函数，分别为创建前/后，挂载前/后，更新前/后，销毁前/后。

这是官方文档的图，下面有代码来详细了解一下各个钩子

  beforeCreate: function beforeCreate() {
    //do something before creating vue instance
    console.log('---------被创建前----------');
    console.log('data: ',this.$data);
    console.log('$el: ',this.$el)
  },
  created: function created() {
    //do something after creating vue instance
    console.log('---------被创建完成---------');
    console.log('data: ',this.$data);
    console.log('$el: ',this.$el);
    console.log('root: ',this.$root)

  },
  beforeMount: function beforeMount() {
    //do something before mounting vue instance
    console.log('----------被挂载前----------')
    console.log('data: ',this.$data);
    console.log('$el: ',this.$el)
    console.log('root: ',this.$root)
  },
  mounted: function mounted() {
  //do something after mounting vue instance
    console.log('----------被挂载后---------')
    console.log('data: ',this.$data);
    console.log('$el: ',this.$el)
    console.log('root: ',this.$root)
  }

$el：当前组件的元素，也就是templa的根元素
data:组件里的data对象
代码执行的结果如图

这几个钩子的分工
1.beforeCreate: 创建组件前先获取数据，初始化事件,获取不到data,$el
2.created:创建组件后,可以获取了数据data，但是依旧没有挂载元素
3.beforeMounted:挂载前，获取不到root,$el，获取不到dom,可以获取data
4.mounted:挂载后，将编译好的模板挂载到html上，获取获取dom,root，在这个钩子里执行对dom修改的方法
5.beforeUpdate和updated:很容易理解，就是某些行为发生后数据改变前后的钩子
6.beforeDestroyed和destroyed：组件销毁前后的钩子

脚本宝典总结

以上是脚本宝典为你收集整理的vue.js 生命周期详解全部内容，希望文章能够帮你解决vue.js 生命周期详解所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。