浅尝一下,vue的生命周期

199 阅读2分钟

一:什么是生命周期?

世间万物都有自己生命周期,vue也有这一特点。Vue实例有一个完整的生命周期,也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程。每个钩子都给我们处理某些功能点的机会。

二:生命周期介绍及生命周期树

image.png

三:生命周期都有哪些作用?

生命周期作用
beforCreate组件实例被创建之初,数据还没有挂载,只是一个空壳
create组件实例创建完成,已经可以使用数据,更改数据,在这里更改数据不会触发updated函数
beforeMount钩子调用时,开始找实例或者组件对应的模板,编译模板为虚拟 dom 放入到render函数中准备渲染,此时DOM还是无法操作
mounted钩子调用时,开始执行render ,渲染出真实dom,在这里操作真实的dom,依赖于DOM的代码可以放在这里。
beforeUpdate组件数据更新之前,此时页面的数据还没有更新,但是data已经更新了,页面暂未和最新的data保持同步
update组件数据更新之后,页面和 data 数据已经保持同步,都是最新的
beforeDestory在实例或组件被销毁之前,在beforeDestroy钩子被调用,此时实例仍然可用,在此钩子中调用methods中的事件,仍然会执行
destoryed组件销毁后调用,vue 实例上的所有都不可以用了

四:生命周期钩子的简单使用

  1. beforCreate:组件实例被创建之初,我们可以在这里添加loading事件;
  2. create:我们会经常使用create钩子,主要是对于数据的操作,也可以取消loading事件;
  3. mounted:在这发起后端请求,拿回数据,配合路由钩子做一些事情;