VUE基础知识（五）

Vue生命周期是什么

Vue提供给开发者一系列的回调函数 让我们可以在Vue的各个阶段添加自定义的逻辑处理

 

三大阶段

1）初始化显示

创建期间的生命周期函数(1次)

• beforeCreate()

Vue实例被创建 但date和methods数据中的数据还没有被设置上去(未初始化)

• created()

data和methods以及被初始化(已被设置在Vue实例上)但是还未开始模版编译

常用 如果要操作data中的数据和methods中的方法 最早只能在created中调用

• beforeMount()

开始解析模版编译 把数据和结构(模版)关联起来 但现在页面上还不能看到数据

• mounted()

数据挂载完毕 页面中可以看到数据 当这个钩子函数执行完毕 创建期间的所有的生命钩子全部执行完，常用 发送ajax请求 启动定时器等异步任务 操作DOM中的节点

2）更新显示

运行期间的生命周期函数(0次-多次)

• beforeUpdate()

页面中的数据还是旧的 但Vue实例中的数据已经被更新 数据还未同步

• updated()

页面和Vue实例中的数据已同步

3）销毁

销毁期间的生命周期函数(1次)

• beforeDestory()

开始进入销毁阶段 Vue实例中的方法和数据还能使用 还未真正销毁

常用 做收尾工作 如:清除定时器…

• destoryed()

已被完全销毁 Vue实例中的数据和方法不能再使用。