Day16 - 复习 Vue 生命周期

今天又跟大神学习 重新认识 Vue.js | Kuro Hsu 1-7 元件的生命周期与更新机制,(可能是之前学 Vue2 不够认真 XD)这次看大神的观察生命周期小 console ,才让我第一次觉得生命周期好像没那麽难懂 A3A

Vue 生命周期 翻译翻译 资料状态 画面状态
beforeCreate before 元件 被 create 元件还没被制造,当然就没有资料可言 元件还没被制造,当然就没有画面可言
created 元件 被 create 元件刚被制造了!有资料啦!data, props,computed 你好呀! 元件刚被制造,但又还没有跟模板的 html dom 绑定,所以一样没有画面
beforeMount before 模板DOM 被 mount 资料从上一步就妥妥了 阿就还没有跟模板的 html dom 绑定,所以一样没有画面
mounted 模板DOM 被 mount 资料从上上一步就妥妥了 元件跟模板的 html dom 绑定啦!有画面哩!$el 哩贺~
beforeUpdate before 画面 被 update 资料先更新先爽 画面还没更新但也没有不爽,大家都开心赞
updated 画面 被 update 资料从上一步就妥妥了 画面更新一样爽
beforeUnmount before 元件 被 unmount 元件卸载前,如同情人分手前一样,失和的已经掌握不到对方的想法了 元件卸载前,如同情人分手前一样,失和的已经掌握不到对方的身影与行踪了
unmount 元件 被 unmount 元件卸载完毕,资料与爱情都不复存在 元件卸载完毕,资料与爱情都不复存在

心得是

  1. Vue 生命周期的主词每次不一定是同个人,有时是 vue元件 aka vue实体 有时是 模板DOM 有时是 画面,真滴是主角太多
  2. 资料大多都比画面快,比画面快出现、快更新;就只有在 元件 卸载前与卸载时,资料跟画面消失的一样快。想想也是合理,先有资料才好安排画面是要呈现蛇魔细节罗

希望我没有理解错,以上理解有所出入,求求侠客都在麻烦协助提点,感谢!!(っಠ‿ಠ)っ


<<:  让团队把事情做好:提升动力

>>:  Day15 - this&Object Prototypes Ch3 Objects - Iteration 开头

【D28】模组化#3:取得市场行情资料

前言 股票每日交易资讯、三大法人资料(区分期货与选择权二类-依日期)模组化後,也把加权指数行情用ge...

Day2 渗透测试流程与相关规范

渗透测试流程 与客户进行签约,取得合法的测试权限後,以下为签约与接洽需要注意: 企业是否了解渗透测...

【Day29】Git 版本控制 - GitBook 使用教学

首先,先前往官网,可以透过 GitHub 登入连结帐号。 登入以後,可以看到我们有一个 Spaces...

QUIC.cloud CDN 与 CloudFlare 新手教学

环境准备 使用 Cloudflare DNS 安装 LiteSpeed Cache plugin ...

【从零开始的Swift开发心路历程-Day16】安装RealmSwift资料库Part2(完)

昨天我们安装完CocoaPods後,今天就来安装RealmSwift吧! 要安装RealmSwift...