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个阶段,创建前后,载入前后,更新前后,销毁前后

  • 相关阅读:
    Linux运维工程师需要掌握什么才能胜任工作呢
    我眼中的Linux系统和红帽RHCE认证
    Linux系统从零到高手的进阶心得
    我在大学毕业后学习Linux系统的心得经验
    装RAC跑脚本报错
    Oracle rac11g 安装报INS41112
    Oracle升级11.2.0.3-11.2.0.4(Windows)
    防存储掉线安装监控软件
    跨平台迁移数据库windows-Linux
    linux crontab -e生成日期格式
  • 原文地址:https://www.cnblogs.com/pickKnow/p/10472146.html
Copyright © 2011-2022 走看看