vue生命周期钩子

生命周期图示

beforeCreate

1. 表示实例完全被创建出来之前，会执行他。
2. 数据观测（data observer）和event/watcher事件配置之前被调用。
3. 注意：在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化

beforeCreate() {
   console.log('beforeCreate')
}

Created

1. 在实例完成后立即调用。
2. 在Created中，data和methods都已经初始化好了。
3. 如果要调用methods中的方法，或者操作data中的数据，最早，只能在created中操作。

Created() {
   console.log('Created')
}

beforeMount

在挂载开始之前被调用，相关的渲染函数首次被调用。

beforeMount() {
   console.log('beforeMount')
}

Mounted

el被新创建的vm：$el替换，挂载成功

Mounted() {
   console.log('Mounted')
}

beforeUpdate

数据更新时调用

beforeUpdate() {
   console.log('beforeUpdate')
}

Updated

组件dom已经更新，组件更新完毕

Updated() {
   console.log('Updated')
}

得知详情点击链接：https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90