vue中在哪个生命周期中dom被渲染_Vue生命周期说明

人是生而自由的，

但却无往不在枷锁之中。

自以为是其他一切人的主人，

反比其他一切人更是奴隶。

——卢梭

复制代码

生命周期图

生命周期钩子说明

beforeCreate(初始化界面前)

在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

data 和 $el 都没有初始化，全部为 undefined

created(初始化界面后)

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。若在此阶段进行DOM操作一定要放在Vue.nextTick()的回调函数中。

data 初始化完成，但 $el 没有初始化

这话的意思我觉得重点在于说挂载阶段还没开始，什么叫还没开始挂载，也就是说，模板还没有被渲染成html，也就是这时候通过id什么的去查找页面元素不能保证一定能找到。所以，一般creadted钩子函数主要是用来初始化数据。

beforeMount(渲染DOM前)

在挂载开始之前被调用：相关的 render 函数首次被调用。

data 和 $el 均已存在，但 DOM 为虚拟DOM 仍未完全加载

eg：

{ {message}}

mounted(渲染DOM后)

el 被新创建的 vm.$el替换，并挂载到实例上去之后调用该钩子。一般是用来向后端发起请求拿到数据以后做一些业务处理，DOM操作一般是在mounted钩子函数中进行的。

data 和 $el 均已存在，并且 DOM 加载完成 ，完成挂载

第一次页面加载会触发以上四个钩子，即beforeCreate ， created ， beforeMount ，mounted 这四个钩子。

beforeUpdate(更新数据前)

数据更新时调用