脚本宝典收集整理的这篇文章主要介绍了

vue.js 生命周期详解

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

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


vue.js 生命周期详解-脚本宝典
这是官方文档的图,下面有代码来详细了解一下各个钩子

  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对象
代码执行的结果如图

vue.js 生命周期详解-脚本宝典
这几个钩子的分工
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群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过