美文网首页
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生命周期详解

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