vue的生命周期

第一步：实例化Vue对象

new Vue()

通过 new Vue() 实例化Vue对象

第二步：初始化事件和生命周期

init Events & init Lifecycle

初始化事件 和 生命周期

：创建实例之前执行的钩子事件

beforeCreate

这个时候数据还没有挂载，只是一个空壳。
无法访问数据和$el
computed 和 watch 的数据不能访问

第三步：初始化注入

init injections & init reactivity

初始化注入事件 和 反射

实例创建完成后执行钩子事件

created

可以进行数据的观测和使用
属性和方法的运算
但是挂载还没开始，模板还没有渲染成 html

第四步：判断 el 的挂载方式

el 属性 选定挂载范围

没有 el 属性 则使用 vm.$mount(el) 挂载

第五步：选择 模板template 的编译方式

编译模板 把data对象里的数据
和vue语法声明的模板
编译成浏览器可读的HTML

render

template

：触发钩子事件beforeMount

虚拟DOM创建完成，
将编译完成的HTML挂载到虚拟DOM
还没有渲染到页面，只是准备进行渲染，先把位置占住

第六步：将编译好的HTML替换掉el所指向的DOM

：触发mounted 钩子事件

将编译好的HTML挂载到页面 真实的DOM挂载完毕，
数据完成双向绑定，可以访问DOM节点，
使用$refs对DOM进行操作
这个函数可以写一些 进行ajax请求数据 和 进行数据初始化
注意：这个事件在整个实例中只执行一次

第七步：实时监控数据变化 （循环）

当有更新时会在更新之前 调用beforeUpdate

响应式数据发生更新，dom还没有刷新

更新到dom上

更新完后 调用updated

这说明响应式数据发生了更新，更新完了 dom已经刷新了

第八步：实例销毁 销毁之前执行beforDestroy

这个时候实例可以被使用，可以进行收尾工作
例如清除计时器

执行销毁 拆除数据监听 子组件和事件监听

最后调用 destroyed 说明实例销毁完成

最后

以上就是细腻酒窝为你收集整理的vue的生命周期的全部内容，希望文章能够帮你解决vue的生命周期所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。