1. 微擎百科首页
  2. 源码分析

vue生命周期

373131711-5a9627da1fb25_articlex

生命周期钩子函数:

  • beforeCreat() 创建前
  • created()创建
  • beforeMount()挂载前
  • mounted()挂载
  • beforeupdate()更改前
  • updated()更改
  • beforeDestroy()销毁前
  • destroyed()销毁

 

创建阶段

  • new Vue({}) 创建一个空的实例对象,这个对象上只有生命周期函数和一些默认事件。
  • 生命周期函数 beforeCreate 执行
  • 初始化 data 和 methods
  • 生命周期函数 created 执行
  • 编译模板:通过编译将 template 模板转换成渲染函数( render ) ,执行渲染函数就可以得到一个虚拟节点树(内存中)
  • 生命周期函数 beforeMount 执行
  • 将内存中编译好的模板真实的替换到页面中去
  • 生命周期函数 mounted 执行,实例完全创建好了即实例初始化完毕,创建阶段完毕

运行阶段

  • data 被改变时触发生命周期函数 beforeUpdate 执行,data是最新的,页面还未更新(旧的页面)
  • 根据最新的 data 重新渲染虚拟 DOM,并挂载到页面上,完成 Model 到 View 的更新
  • 生命周期函数 updated 执行,此时 data 和页面都是最新的

销毁阶段

  • 生命周期函数 beforeDestroy 执行,vue 实例进入销毁阶段
  • 销毁数据、方法、子组件、事件监听器…
  • 生命周期函数 destroyed 执行,组件完全被销毁

本文来自投稿,不代表微擎百科立场,如若转载,请注明出处:https://www.w7.wiki/code/3101.html

发表评论

登录后才能评论