zoukankan      html  css  js  c++  java
  • Vue 生命周期

    1, 实例,组建通过new Vue() 创造出来之后,会初始化事件和生命周期(init Events & LifeCycle),然后会执行beforeCreate钩子函数,这个时候,数据还没有加载,所以不能访问到数据和真实的DOM,一般不做操作。

    2,加载数据,绑定事件(init Injections & Reactivity ), 然后执行created 函数,这个时候已经可以获取到数据,做修改也不会触发updated 函数(倒数第二次做修改也不会触发updated函数),所以一般做数据的初始化。

    3,找到组建,实例以及其对应的模板,compile template => 虚拟的DOM,准备放入到render 函数中进行渲染,然后执行beforeMount 函数,在beforeMount 函数中,虚拟的DOM已经创建完成,马上要开始渲染,此时做数据的修改也不会调用其它钩子函数,(最后一次渲染前做数据的修改),这里一般也是可以做数据的初始化。

    4,然后就是执行render 函数,渲染出真实的DOM,执行mounted 钩子函数,所有的数据全部挂载,DOM 元素已经渲染在页面中,此时可以操作真实的DOM。

    5,当实例或者组建发生变化之后,会立刻执行beforeUpdate 函数,虚拟DOM 会与上一次的虚拟DOM 进行diff 比较,然后重新渲染。

    6,数据完成更新之后,会执行update 函数,数据更改,重新render,重新可以操作DOM。

    7,当经过某种途径调用$destroy方法后,立即执行beforeDestroy,一般在这里做一些善后工作,例如清除计时器、清除非指令绑定的事件等等。

    8,组件的数据绑定、监听...去掉后只剩下dom空壳,这个时候,执行destroyed,在这里做善后工作也可以。

    Vue 的生命周期共有8个阶段,创建前后,载入前后,更新前后,销毁前后

  • 相关阅读:
    P1772 [ZJOI2006]物流运输
    P3951 小凯的疑惑
    P1082 同余方程(【模板】exgcd)
    T107741 【模板】权值线段树合并
    P3205 [HNOI2010]合唱队
    P1062 数列
    P1144 最短路计数
    P1502 窗口的星星
    P4147 玉蟾宫(【模板】悬线法)
    CSP模拟赛#3 分段(T1-26)
  • 原文地址:https://www.cnblogs.com/pickKnow/p/10472146.html
Copyright © 2011-2022 走看看