你真的了解vue生命周期吗

你真的了解vue生命周期吗_第1张图片
title

vue声明周期,在每个声明周期中都干了些什么?

1, vue的生命周期

  • beforeCreate: 组件实例刚刚被创建,组件属性计算之前,如data属性
  • created: 组件实例创建完成,属性已绑定,但是DOM还未完成,$el属性还不存在
  • beforeMount:模板编译/挂载之前
  • mounted: 模板编译/挂载之后
  • beforeUpdate: 组件更新之前
  • updated: 组件更新之后
  • activated: for keep-alive,组件被激活时调用
  • deactivated: for keep-alive,组件被移除时调用
  • beforeDestroy: 组件销毁前被调用
  • destoryed: 组件销毁后调用

ps:下面代码可以直接复制出去执行




    
    
    
    Document



    
{{a}}

beforeCreated: el和data并未初始化
created: 完成data数据的初始化,el没有
beforeMount: 完成了el和data初始化
mounted: 完成挂载

你真的了解vue生命周期吗_第2张图片
title
打开命令行在命令行中输入vm.a = 'change';查看效果
你真的了解vue生命周期吗_第3张图片
title

activateddeactivated这两个生命周期函数涉及到这个组件,所以想了解这个生命周期函数的可以看一下我的另一篇文章
aboutme
github
blog

你可能感兴趣的:(你真的了解vue生命周期吗)