• Vue 生命周期方法


    一、Vue 生命周期

    Vue的生命周期即是实例从创建到销毁的一个过程。之前在学习Vue的时候,看过官网的教程,但是经常用到的是mounted,所以对其他生命周期方法不是很熟悉,这里有空做个总结,也方便以后查阅。

    二、Vue生命周期方法

    主要方法有:beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,Destroyed。还有两个不常用的actived,deactivated,这两个方法用于被<keep-alive></keep-alive>包裹的动态组件。使用<keep-alive></keep-alive>组件包裹的话,则涉及到页面缓存。下面开始一一介绍每个生命周期方法。

    1.beforeCreate

    在实例初始化之后,在数据观测(data observer)和event/watcher事件配置之前被调用,此时data和$el都没有初始化,全部为undefined。
    可以在此时加一些loading效果,然后在created移除,可以用在进入请求时间较长的页面,给用户提示,提高用户体验。

    2.created

    在实例创建完成后立即被调用,在这一步,实例已完成以下配置:数据观测(data observer),属性和方法的运算,watch/event事件回调,然而挂载阶段还没开始,$el属性目前不可见。

    3.beforeMount

    在挂载开始之前被调用:相关的render函数首次被调用。此时,data和$el都已经存在,但是DOM为虚拟DOM,仍然没有被加载完。

    4.mounted

    el被新创建的vm.$el所替换,并挂载到实例上去调用该钩子。这时候可以执行异步请求,请求数据初始化页面。
    此时data和$el都已经存在,DOM也已经加载完成,完成挂载。

    5.beforeUpdate

    当data中的数据发生改变时,在变化的数据重新渲染视图之前触发。

    6.updated

    检测到数据发生变化时,变化的数据重新渲染视图之后触发。

    7.beforeDestroy

    实例销毁之前调用,此时实例仍然可用。

    8.destroyed

    实例销毁之后调用,调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器都被移除,所有的子实例也会被销毁。

    9.activated

    keep-alive 组件激活时调用

    10.deactivated

    keep-alive 组件停用时调用

  • 相关阅读:
    hdu-1142(记忆化搜索+dij)
    hdu-1140(求距离,精度判断)
    hdu-1131(卡特兰数+大数)
    hdu-1130(卡特兰数+大数乘法,除法模板)
    hdu-1129(模拟题)
    hdu-1128(数学问题,筛数)
    hdu-1124(数学问题,求n!的尾零的个数)
    hdu-1115(计算多边形重心)
    hdu-1121(差分法--数学问题)
    表达式求值(堆栈)
  • 原文地址:https://www.cnblogs.com/sminocence/p/10407631.html
Copyright © 2020-2023  润新知