vue的生命周期

77 阅读1分钟

beforeCreate(创建前)

实例化之后,钩子函数此阶段还没有开启vue的观察者模式,组件的选项对象还未创建 等等一系列的机制 el 和 data 并未初始化,因此无法访问methods, data, computed等上的方法和数据,不能获取dom

created(创建后)

这个阶段可以做一些准备性的工作,获取异步的数据 ajax 初始值的声明,完成了data 数据的初始化

beforeMount(挂载前)

用于在挂载之前使用,在这个阶段是获取不到dom操作的,把data里面的数据和模板生成html,完成了data等初始化,此时还没有挂载到页面上

mounted(挂载后) 

挂载之后,可以获取dom操作,获取ref,在这个时候el和data都可以获取的到,到这标志着vue实例的创建阶段结束!

beforeUpdate(更新前)

数据被更新时触发,但是页面界面的数据还未改变,只是浏览器内存中的数据改变了,获得页面Dom节点的innerHTML,得到的时改变之前的数据

Update(更新后)

在数据更改之后,导致虚拟dom重新渲染,调用时dom组件已经更新,可以执行依赖dom操作,在此时要避免更改状态,因为可能导致无限更新的循环

beforeDestory(销毁前)

此时vue实例还未被真的销毁,vue上所有的数据都处于可用状态

destory(销毁后)

真正销毁vue实例,所有数据都不可用