vue.js 生命周期

在页面首次加载执行顺序有如下:

  1. beforeCreate //在实例初始化之后、创建之前执行
  2. created //实例创建后执行
  3. beforeMounted //在挂载开始之前调用
  4. filters //挂载前加载过滤器
  5. computed //计算属性
  6. directives-bind //只调用一次,在指令第一次绑定到元素时调用
  7. directives-inserted //被绑定元素插入父节点时调用
  8. activated //keek-alive组件被激活时调用,则在keep-alive包裹的嵌套的子组件中触发
  9. mounted //挂载完成后调用

修改页面input时,被自动调用的选项顺序如下:

  1. watch //首先先监听到了改变事件
  2. filters //过滤器没有添加在该input元素上,但是也被调用了
  3. beforeUpdate //数据更新时调用,发生在虚拟dom打补丁前
  4. directived-update //指令所在的组件的vNode更新时调用,但可能发生在其子vNode更新前
  5. directives-componentUpdated//指令所在的组件的vNode及其子组件的vNode全部更新后调用
    6.updated //组件dom已经更新

完整的生命周期的时序如下

  1. beforeCreate:实例初始化。
  2. Created:实例初始化完成。resource data 已可取得,但 el 属性还不能使用。
  3. beforeMount:执行元素关在之前。
  4. mounted:元素已挂载, $el 被建立。
  5. beforeUpdate:当资源变化的时候被调用,这个时候 View还不会被描画。
  6. updated:DOM 的更新已经完成,View 被显示在画面上。
  7. activated:如果有设定 keep-alive,這個hook会被调用。
  8. deactivated:停用 keep-alive时被调用。
  9. beforeDestroy:实体还可使用。
  10. destroyed:实例被销毁。所有绑定被解除、事件监听被移除、子实例也被销毁。

https://www.modb.pro/db/402040

相关推荐
weixin_382395235 小时前
为小工厂量身打造:本地部署的物料管理系统带缺料计算
前端·制造
__zRainy__5 小时前
解决pnpm v10+不自动构建
前端·pnpm·工程化
猫猫不是喵喵.6 小时前
Vue3 Props 属性
前端·javascript·vue.js
醉城夜风~7 小时前
CSS元素显示模式(display)
前端·css
AI大模型-小华8 小时前
Codex 三方充值快速入门指南
java·前端·数据库·chatgpt·ai编程·codex·chatgpt pro
做前端的娜娜子10 小时前
同一链接实现 PC Web 与移动 H5 自适应
前端·掘金·金石计划
小帅不太帅10 小时前
架构没变、规模没变,DeepSeek V4 Flash 正式版凭什么暴涨 47 分?
前端·aigc·deepseek
jarvisuni10 小时前
DeepSeekFlash前端依旧拉垮,而且变慢了很多!
前端·javascript·算法
卷福同学12 小时前
AI编程出海第二步:验证关键词能否做站
前端·人工智能·后端