Vue生命周期钩子函数

Vue生命周期

---

• 1.注意：钩子函数不能写成箭头函数，箭头函数会改变this指向
• 2.为什么要有生命周期？
  • Vue为了在一个组件的从创建到销毁的一系列过程中去添加一些功能，方便更好的去控制组件
• 3.生命周期图示：
• 
• 4.Vue的生命周期分三个阶段，8个钩子函数
  • 初识阶段
  • 生命周期的更新阶段
  • 组件的销毁阶段
• 5.主要研究方向：
  • 公共特向
  • 各自的功能/特点

初识阶段

---

• 1.beforeCreate组件创建前
  • 作用：为整个生命周期做准备工作，初始化事件和自身或是子组件的生命周期做准备
  • 意义：
    • 数据获取不到
    • 无法修改真实项目
    • 项目中不常用
• 2.created组件创建结束
  • 作用：初始化注入其他选项和激活选项
  • 意义：
    • 数据可以拿到
    • 无法操作真实DOM
    • 项目中数据请求中可以修改一次数据
• 3.beforeMount 组件挂载前
  • 挂载： 组件插入到页面
  • 意义：
    • 数据可以拿到
    • 真实dom没有拿到
    • 在项目中数据请求，数据修改，可以对new Vue（）出来的时候，做初始化事件和生命周期准备【内部完成】，不建议使用。
      • 内部完成事务
        • 判断el选项 - new Vue 是否有 el
          • 有，继而判断是否有template选项，证明有子组件
            • 有template,那么我们通过render函数将jsx解析为VDOM对象模型
            • 无template,那么我们需要通过outerHTML手动渲染
              • outerHTML，元素外进行渲染，并且会代替原来的容器盒子，并且template在实例内会被解析，将来不会渲染到页面
        • 无： 那么我们需要手动挂载： new Vue().$mount(’#app’)
• 4.mounted 组件挂载结束，即已经插入到页面中
  • 意义：
    • 数据可以拿到
    • 真实DOM也可以拿到
    • 项目中，数据修改，数据请求
  • 真实DOM操作 【 不推荐 】
    • 理由： 我们要用数据驱动视图
      • 应该做的： 第三方实例化 【 静态数据 】
      • 运行中 运行中触发条件是： 数据改变
        • 只要数据改变，就会触发这两个钩子函数

生命周期更新阶段

---

• 1.beforeUpdate 组件更新前
  • 意义：
    • 数据是可以拿到更新后的数据
    • 可以拿到更新后的真实DOM
      • 为在一次的更新准准备工作
        -生成Virtual DOM
    • 项目中不常用
• 2.updated 组件更新结束
  • 意义：
    • 可以拿到修改后的数据
    • 也可以拿到真实DOM
    • 在项目中,真实DOM操作 【 不推荐 】
      • 第三方库动态实例化 【 动态数据 】
    • 内部
      • VDOM重新渲染，然后通过render函数解析为VDOM对象模型，在通过Diff进行比对生成patch补丁对象，然后重新渲染为真实DOM
      • 只改变变化的部分，其他部分不改变

组件销毁阶段

• 销毁 触发条件：组件被删除
• 外部开关销毁
• 内部调用$destroy()
  • 内部销毁组件会被删除，但是组件的真实DOM外壳会被遗留，Dom需要手动删除
• 1.beforeDestroy
• 2.destroyed
• 项目中如何使用：
  善后
  比如： 计时器，比如滚动事件等 5.4 生命周期案例