zoukankan      html  css  js  c++  java
  • 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 组件停用时调用

  • 相关阅读:
    【Lintcode】112.Remove Duplicates from Sorted List
    【Lintcode】087.Remove Node in Binary Search Tree
    【Lintcode】011.Search Range in Binary Search Tree
    【Lintcode】095.Validate Binary Search Tree
    【Lintcode】069.Binary Tree Level Order Traversal
    【Lintcode】088.Lowest Common Ancestor
    【Lintcode】094.Binary Tree Maximum Path Sum
    【算法总结】二叉树
    库(静态库和动态库)
    从尾到头打印链表
  • 原文地址:https://www.cnblogs.com/sminocence/p/10407631.html
Copyright © 2011-2022 走看看