• vue生命周期的执行过程


    1. Vue生命周期是什么?

     简单来说Vue实例从创建到销毁的过程,就是生命周期。详细来说也就是从开始创建、初始化数据、

    编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。在这个过程中,会有一些生命周期

    钩子函数用户可以在不同阶段的钩子函数中添加相应的业务代码

    2、简单来介绍一下生命周期钩子:

    1beforeCreate : 创建实例之前创建的钩子

    在这个过程中会创建一个Vue实例,此时实例上只有一些生命周期函数和默认的事件,此时data computed watch methods上的方法和数据均不能访问

    在创建Vue实例的时候,执行了init(),在init(初始化)过程中首先调用了beforeCreate钩子函数

    同时监听data数据,初始化vue内部事件,进行属性和方法的计算;

    以上都干完了,调用Created钩子函数(一般axios请求会在这个周期内进行);

     

    2created : 实例创建完成后执行的钩子

    此时我们可以读取data的值,并可以对其进行操作,把方法、计算属性也都挂载到了实例。但是依旧不能访问el,不能获取到DOM元素。

    在这个钩子函数中,我们可以进行数据请求,并把请求到的数据储存在data中。但是请求的数据不宜过多。

     

    3模板编译,把data对象里面的数据和vue语法写的模板编译成HTML。

    编译过程分三种情况:1)实例内部有template属性,直接调用,然后调用render函数去渲染;2)没有该属性调用外部html;3)都没有抛出错误;

    6、编译模板完成,调用beforeMount钩子函数;

    beforeMounted : 将编译完成的HTML挂载到对应虚拟DOM时触发的钩子,此时页面没有内容  还未挂载到页面上

     

    render函数执行之后,将渲染出来的内容挂载到DOM节点上;

    挂在结束,调用Mounted钩子函数;

    4mounted : 将编译好的HTML挂载到页面完成后执行的事件钩子

    mounted在整个实例中只执行一次。

     

    数据发生变化,调用beforeUpdate钩子函数,经历virtual Dom(虚拟dom);

    5、beforeUpdata :DOM更新之前的钩子在此钩子中data中的数据已经进行了更新,但是页面数据并没有进行更新

    6更新完成,调用Updated钩子函数;DOM更新之后的钩子

    data中的最新数据渲染出DOM,并将最新的DOM挂载页面,此时data数据与页面数据一致:

     

    7beforeDestroy : 销毁所有观察者、组件及事件监听

    此时组件的data、计算属性、过滤器等都还处于可用的状态,销毁还并未执行。

     

    8destroyed : 实例销毁完成执行的钩子

    组件已经完全销毁,组件中的数据、方法、计算属性、过滤器等都已经不可用。我们可以进行手动的销毁组件vm.$destory()

  • 相关阅读:
    西交应用统计学(四)
    SPSS非参数检验
    并查集实现
    二叉树遍历非递归算法
    算法导论——渐近符号、递归及解法
    SPSS均值过程和T检验
    二维数组的查找及向函数传递二维数组问题
    printf()的格式
    C++ string类型的读写
    替换字符串中的空格
  • 原文地址:https://www.cnblogs.com/swjRH/p/13676005.html
Copyright © 2020-2023  润新知