美文网首页
Vue生命周期详解

Vue生命周期详解

作者: 大嵩的格洛米 | 来源:发表于2021-04-30 18:47 被阅读0次

生命周期?

以一个vue实例为单位,从创建,初始化数据,挂载DOM,渲染-更新-渲染、销毁等一系列过程,我们成为Vue 实例的生命周期
在整个生命周期中,为了在各个阶段可以访问,操作实例中的数据,vue给我们提供了不同时机的调用函数(钩子函数
上这张熟悉的图

vue生命周期.png
各生命周期我们可以做什么呢?

init

beforeCreated

created

此时,实例,data等method等方法都加载好了,这个时候可以去服务器请求数据,比较常用的页面初始化数据

mounted

此时dom已经挂载完成,可以做一些dom的操作

beforeUpdate

可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。
该钩子在服务器端渲染期间不被调用

Update

发生在虚拟DOM重新渲染和打补丁之前,可以在该钩子中进一步地更改状态,不会触发附加地重渲染过程
在实例销毁之前调用,实例仍然完全可用

beforeDestroy

这一步还可以用this来获取实例,
一般在这一步做一些重置的操作,比如清除掉组件中的定时器 和 监听的dom事件

destroyed

可以执行一些优化操作,清空定时器,解除绑定事件

activated

当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

errorCaptured

参考地址:https://blog.csdn.net/mqingo/article/details/86031260

相关文章

  • vue生命周期

    vue生命周期详: vue生命周期详解图: vue生命周期详解代码展示:

  • 入门

    Vue官方文档生命周期详解 vue-routervue-router官方文档vue-router详解

  • Vue生命周期

    Vue生命周期详解 一、Vue生命周期 与 作用 (生命周期钩子就是生命周期函数) (1)Vue生命周期:每个Vu...

  • 2.vue生命周期钩子

    vue2.0生命周期图文详解 什么是生命周期:

  • 学习链接

    vue-router教程总结 vue生命周期和钩子函数 详解vue生命周期 Vue2.0八——知识点整理 vuex...

  • vue 生命周期 详解

    详解Vue Lifecycle 先来看看vue官网对vue生命周期的介绍 Vue实例有一个完整的生命周期,也就是从...

  • Vue的生命周期和钩子函数

    Vue的生命周期 Vue示例被创建到销毁的过程 Vue的钩子函数详解

  • 2020-02-11

    vue生命周期详解 摘自:https://www.jianshu.com/p/672e967e201c Vue实例...

  • vue1.0和2.0的生命周期详解

    Vue#1.0和#2.0生命周期详解 1.0 生命周期image2.0 生命周期imageimage 两个版本对比...

  • Vue实例详解与生命周期

    Vue实例详解与生命周期 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务...

网友评论

      本文标题:Vue生命周期详解

      本文链接:https://www.haomeiwen.com/subject/axtorltx.html