Vue.js基础(六)

1.生命周期

• 生命周期图示
  
• 生命周期的三个阶段与八个钩子函数
  • 初始化阶段

    • beforeCreate 组件创建前

      • 作用： 为整个生命周期做准备工作，初始化事件和自身或是子组件的生命周期做准备
      • 意义: 数据拿不到, 真实dom拿不到

    • created 组件创建结束

      • 作用： 初始化注入其他选项 和 激活 选项
      • 意义：数据可以拿到,真实dom拿不到
      • 项目中：数据请求，也可以修改一次数据

    • beforeMount 组件挂载前(挂载： 组件插入到页面)

      • 意义：数据可以拿到,真实dom没有拿到
      • 项目中: 建议不要去使用它了，让它完成内部事务，不给加负担
        • 内部完成事务
          判断el选项 - new Vue 是否有 el有，继而判断是否有template选项，证明有子组件有template,那么我们通过render函数将jsx解析为VDOM对象模型无template,那么我们需要通过outerHTML手动渲染outerHTML，元素外进行渲染，并且会代替原来的容器盒子，并且template在实例内会被解析，将来不会渲染到页面无： 那么我们需要手动挂载： new Vue().$mount(’#app’)

    • mounted 组件挂载结束，也就是已经插入到页面中了

      • 意义：数据可以拿到真实DOM也可以拿到
      • 项目中: 数据修改，数据请求
      • 真实DOM操作 【 不推荐 】
        理由： 我们要用数据驱动视图
        应该做的： 第三方实例化 【 静态数据 】
  • 运行中阶段(运行中触发条件是： 数据改变)
    • beforeUpdate 组件更新前
    • 意义：数据是可以拿到更新后的数据,也可以拿到更新后的真实DOM
  • updated 组件更新结束
    • 意义：可以拿到修改后的数据,也可以拿到真实DOM
    • 项目中：真实DOM操作 【 不推荐 】,第三方库动态实例化 【 动态数据 】
    • 内部操作
      VDOM重新渲染，然后通过render函数解析为VDOM对象模型，在通过Diff算法进行比对生成patch补丁对象，然后重新渲染为真实DOM只改变变化的部分，其他部分不改变
  • 销毁阶段(触发条件：组件被删除)
    • 外部开关销毁(v-if)
    • 内部调用$destroy() 这两个钩子函数没有太大区别，所以我们统一说
      • beforeDestroy
      • destroyed
      • 通过调用$destroy()来内部销毁，DOM没有被删除，但是组件被删除了，Dom需要手动删除
      • 项目中如何使用：善后，比如： 计时器，比如滚动事件等
• 动态数据
  updated中写式，会有重复实例化问题
  • 第一个解决方案： 加判断条件
  • 第二个解决方案： setTimout
    放在主线程后执行，异步队列中，保证真实DOM渲染完成
  • 第三种解决方案： 推荐 Vue内部提供的 nextTick
    nextTick表示真实DOM渲染完成之后才执行
    Vue.nextTick( callback )
    this.$nextTick( callback )