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

  • 相关阅读:
    python中多进程+协程的使用以及为什么要用它
    python爬虫——多线程+协程(threading+gevent)
    Python几种并发实现方案的性能比较
    Python threadpool传递参数
    python线程池(threadpool)模块使用笔记
    python下的select模块使用 以及epoll与select、poll的区别
    python中的select模块
    Python中threading的join和setDaemon的区别及用法
    python队列Queue
    和为S的连续正数序列
  • 原文地址:https://www.cnblogs.com/pickKnow/p/10472146.html
Copyright © 2011-2022 走看看