• Vue生命周期的执行过程(极简版)


    Vue生命周期的执行过程(极简版)

    1.创建vue实例
    2.在创建实例的时候,执行了init(一奶他),init初始化的时候调用了beforeCreate钩子函数
    3.同时监听了data的数据,初始化了vue内部事件,进行属性和方法的计算
    4.然后调用Create钩子函数,axios大多会在这个周期里执行
    5.模板编译,把data里的数据和vue语法编译成HTML,编译的过程中如果实例内部有template属性,直接调用,然后调用render函数去渲染,如果没有template属性调用外部HTML,如果都没有抛出错误
    6.编译模板完成后,调用beforeMount钩子函数
    7.render函数执行完成之后,将渲染出来的内容挂载到DOM节点上
    8.挂载结束,调用Mounted钩子函数;
    9.数据发生变化,调用beforeUpdate钩子函数,期间经历虚拟dom;
    10.更新完成,调用Updated钩子函数;
    11.beforeDestory销毁所有观察者、组件及事件监听;
    12.Destoryed实例销毁;

    Vue生命周期的执行过程(段落版)

    首先创建vue实例,在创建实例的过程中初始化了init()并调用了beforeCreate钩子函数,监听了data,执行了vue的初始化,然后调用了Create钩子函数,一般axios都是在这个时候执行的,创建完了以后进行模板编译,简单来说就是把vue的语法HTML化,使浏览器可以读取,编译的过程中如果实例中有template属性直接调用render函数去渲染,如果没有就去调用外部html,如果都没有的话就抛出错误,模板编译完成后就去调用beforeMount钩子函数,render函数执行完成以后就将渲染的内容挂载到DOM上,挂载结束以后就去调用Mounted钩子函数,然后在数据发生改变时调用beforeupdata钩子函数,更新完成后调用updated钩子函数,beforeDestory销毁所有观察者以及组件及监听事件,Destoryed实例销毁

  • 相关阅读:
    CSS快速入门
    Kafka (一) 核心概念
    软件工程模型
    函数式编程
    spark计算操作整理
    HBase 文件合并
    HBase 数据存储结构
    目的论浅谈
    PHP8的注解
    JS的移入移除
  • 原文地址:https://www.cnblogs.com/luckyjiu9/p/13675728.html
Copyright © 2020-2023  润新知