zoukankan      html  css  js  c++  java
  • vue的生命周期理解

    先用官网的图,这个是整体流程,本文记录整体流程中的细节描述

    从最开始的流程往下分析整体

    1. init events $ lifecycle(说明:初始化事件和生命周期)

        什么是事件?什么是生命周期?vue api文档中事件有(on、once、off、emit四个方法),生命周期有(mount、forceUpdate、nextTick、destroy四个方法,其他那么多生命周期钩子应该也在这初始化的,要不然下一步的beforeCreate是哪里来的)

    2. beforeCreate(组件刚被创建,组建属性计算之前,如data属性等 执行的钩子函数)

        说白了这里给我们用户一个加入操作的入口,在这之前做了初始化事件和生命周期的事情,所以el现在还没初始化、data没有初始化,这也是有些人在这个方法里打印el、data都是undefined。

    3.init injections & reactivity(通过依赖注入导入依赖项)

        理解这句首先需要知道什么是“依赖注入”,vue中有provide和inject,可以将父组件provide中的对象注入到子孙的属性中。这么说这个过程

        reactive,就是将数据包装成一种可观测的类型,当数据产生变更的时候,我们能够感知到。这个操作后data数据应该就可以是响应的了。

    4. created

        在inject和reactive后再次给我们一次hook的机会;组件实例创建完成,属性已绑定,此时DOM还未生成 执行的钩子函数。

    5. 检查vue配置,即new Vue{}里面的el项是否存在,有就继续检查template项。没有则等到手动绑定调用vm.$mount()

    6. 检查配置中的template项,如果没有template进行填充被绑定区域,则被绑定区域的el对象的outerHTML(即整个#app DOM对象,包括<div id=”app” >和</div>标签)都作为被填充对象替换掉填充区域。

    7. beforeMount

        模板编译、挂载之前执行的钩子函数;这里我有个疑问,这个钩子与create有什么区别,区别在于el属性已经创建完成,只是还没挂载到dom上。

    8. create vm.$el and replace “el” with it

        编译,并替换了被绑定元素;说白了就是我们用的模板语法被真实的数据替换了比如html中的{{msg}}被替换了真实的数据。

    9. mounted

        编译、挂载后执行的钩子函数

    10. beforeUpdate

        组件更新之前执行的钩子函数;当vue发现data中的数据发生了改变,会触发对应组件的重新渲染,先后调用beforeUpdateupdated钩子函数。

    11. update

       组件重新渲染后调用

    最后还有两个destory

  • 相关阅读:
    十万个为什么 —— 理化篇
    地行、地貌
    工业镜头基础知识整理
    parfor —— matlab 下的并行循环
    浅谈设计模式在GIS中的应用
    android ellipsize 属性详解
    Servlet 学习总结-1
    搜索引擎有用的外链建设的方式
    Servlet 学习总结-2
    如何用批处理命令批量配对重命名
  • 原文地址:https://www.cnblogs.com/caoyi/p/11356500.html
Copyright © 2011-2022 走看看