VUE组件的生命周期的个人理解

VUE组件的生命周期

1. 组件生命周期都是用方法的形式来展示的 {xx () {}}
2. 组件生命周期三个阶段，一共有11个方法，核心 8 个方法
3. 组件的生命周期方法，称呼为： ‘生命周期钩子函数’
   • 钩子函数： 指的就是在某个特定阶段触发的函数
   • 比如： 3-5 幼儿园 7-12 小学 12-15 初中 15-18高中 18-22大学
4. 钩子函数出现的意义
   • 通过钩子函数来更好控制组件

一丶初始化阶段
初始化阶段
- 触发条件自动触发
- 总结
- 前三个只记忆，工作中不使用
- mounted可以得到真实DOM，我才能操作dom
- beforeCreate: 初始化事件和生命周期
- created： 对options选项的注入和校验
- 针对data选项
- beforeMount: 判断el,判断template, 通过render -> 生成vdom

beforeCreate ()
* 表示： 组件创建前
* 作用： 初始化事件 & 初始化生命周期
* 初始化事件: 将我们methods中的事件给到元素身上
* 初始化生命周期： 将options选项赋值给内部私有变量
* 面试：
* 1. beforeCreate中做的任务是内部进行，建议不要人为干预
* 2. 当前钩子函数 vdom 是否生成？
* 没有生成
* 3. 当前钩子函数 是否 能获的 data 中的数据
* 拿不到
* 4. 当前钩子函数 是否 能获得 真实 DOM
* 拿不到

created ()
* 表示： 组件创建结束,也就意味着组件身上的options已经赋值结束了
* 任务： 初始化注入和初始化校验
* 初始注入和校验，针对的是 options

beforeMount () {
* 表示： 组件挂载前
* 任务
* 1. 判断是否有el？ Root组件
* 有 继续判断 是否有 template
* 是 ----》 通过render函数渲染
* 否 ----》 使用outerHTML来进行模板的编译
* 没有 通过 $mount 将上去
vdom 在这里生成

mounted () {
* 表示： 组件挂载结束
* 任务： 创建vm.$el 来代替 el 换用一句话： 使用真实DOM来代替VDOM
* 可以获得真实dom

二丶更新阶段

• 更新阶段
  • 数据更新触发
  • beforeUpdate
    • 重新生成vdom
  • updated **
    • 将vdom -> 真实dom
    • dom操作

beforeUpdate () {
* 表示： 组件更新前
* 任务： 重新生成了 vdom

updated () {

  * 表示: 组件更新结束
  * 任务： 
  *  将vdom渲染为真实dom
  *  更新视图  

三丶销毁阶段

• 销毁阶段
  • 手动触发
    • 开关
    • $destory()
  • 作用
    • 帮助我们做一些清理工作
  • beforeDestroy
  • destroyed