Vue生命周期钩子函数

Vue生命周期


  • 1.注意:钩子函数不能写成箭头函数,箭头函数会改变this指向
  • 2.为什么要有生命周期?
    • Vue为了在一个组件的从创建到销毁的一系列过程中去添加一些功能,方便更好的去控制组件
  • 3.生命周期图示:
  • Vue生命周期钩子函数_第1张图片
  • 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 生命周期案例

你可能感兴趣的:(前端,Vue,Vue,Vue生命周期,钩子函数)