Vue实例在生命周期内做的事情:
- 创建Vue对象
- 初始化数据
- 编译模板
- 挂载DOM
- 渲染 -> 更新 -> 渲染
- 销毁
beforeCreate
- Vue实例开始创建,但未完成
- data / methods / computed : undefined,即不能使用、操作
- $el : undefined,即不能使用、操作
created
- Vue实例创建完毕
- data / methods / computed :已绑定,可操作
- $el : undefined,即不能使用、操作
beforeMount
- 挂载实例之前被调用,render函数首次被调用(虚拟DOM),已完成编译 template模板,将data中数据填充到模板生成html。
- 注意:此时生成的html未挂载到html页面中,即未被渲染,肉眼不可见
- data / methods / computed :已绑定,可操作
- $el : undefined,即虚拟DOM下不能进行DOM操作
mounted
- 模板渲染到html页面上,虚拟dom已经被渲染到了真实的dom上。即可以进行各种骚操作了。
- 一般在此生命周期,进行数据请求、赋值、操作属性等
- 注意:mounted在生命周期中只会执行一次。
- data / methods / computed :已绑定,可操作
- $el : 已绑定,可操作
beforeUpdate
- 更新数据之前要进行的操作,发生在虚拟DOM重新渲染之前,可在该钩子中进一步更改状态。
updated
beforeDestroy
- 在实例销毁之前调用,实例仍然完全可用
- 还可以用this来获取实例
- 一般在这一步做一些重置的操作,比如清除掉组件中的定时器 和 监听的dom事件
destroyed
- 在实例销毁之后调用,调用后,所以的事件监听器会被移出,所有的子实例也会被销毁
问题
- Vue第一次页面加载会触发哪几个钩子函数?
beforeCreate、created、beforeMount、mounted - DOM 渲染在哪个周期中就已经完成?
mounted
更多具体内容详见:
Vue-生命周期详解
Vue生命周期
Vue官方文档-生命周期图示