Vue学习笔记之生命周期函数

生命周期示意图如下所示:

Vue学习笔记之生命周期函数_第1张图片

  1. beforeCreate:组件初始化之前触发该事件
  2. created:组件初始化完毕触发该事件
  3. beforeMount:Vue应用对象挂载DOM结点之前触发该事件
  4. mounted:DOM结点挂载成功之后触发该事件
  5. beforeUpdate:数据更新之前触发该事件
  6. updated:数据更新之后触发该事件
  7. beforeUnmount:DOM结点卸载之前触发该事件
  8. unmountd:结点卸载之后触发该事件

由此可见触发事件基本是成对出现,具体测试代码如下所示:


文本框

Message is:{{message}}

控制台输出结果:

组件创建之前调用
组件已创建
组件挂载DOM之前调用
组件已挂载DOM

修改输入框的内容,额外输出内容:

数据更新之前调用
数据已更新

你可能感兴趣的:(vue.js,学习,笔记)