生命周期

生命周期

为什么要有生命周期？

• Vue为了在一个组件的从创建到销毁的一系列过程中添加一些功能，方便我们更好的去控制组件
• Vue的生命周期分为三个阶段，8个钩子函数

所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this与你期待的 Vue 实例不同，this.fetchTodos 的行为未定义。

1.初始化

#beforeCreate

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

• 作用： 为整个生命周期做准备工作，初始化事件和自身或是子组件的生命周期做准备
• 效果：拿不到数据；真实DOM也拿不到

项目中运用较少

#created

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

• 作用： 初始化注入其他选项 和 激活 选项
• 效果：数据可以拿到；真实DOM拿不到

项目中：数据请求，也可以修改一次数据(axios,fetch)

  created() {
    axios({
      url: "/index.php",
      params: {
      }
    })
      .then(res => {
        this.fenlei = res.data.data.data;
      })
      .catch(error => {
        console.log(error);
      });
  }

 created () {
      fetch('./data/banner.json')
        .then( res => res.json())
        .then( data => {
          this.banners = data 
      		})
        .catch(error => console.log( error ))
     }

#beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。

• 效果：数据可以拿到，真实DOM还是没有拿到

• 在项目中：数据请求、数据修改

  不建议使用，让它完成内部事务，不增加负担

• 内部使用

  • 判断el选项 - new Vue 是否有 el
    1.有，继而判断是否有template选项，证明有子组件
    有template,那么我们通过render函数将jsx解析为VDOM对象模型
    无template,那么我们需要通过outerHTML手动渲染outerHTML，元素外进行渲染，并且会代替原来的容器盒子，并且template在实例内会被解析，将来不会渲染到页面
    2.无： 那么我们需要手动挂载： new Vue().$mount(’#app’)

#mounted

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

• 效果：数据可以拿到，真实DOM也可以拿到

• 项目中：数据修改，数据请求

  真实DOM操作【不推荐】：

  • 理由：我们要用数据驱动视图
  • 应该做的： 第三方实例化 【 静态数据 】

2.运行中

#beforeUpdated

组件更新前,数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

• 效果
  • 可以拿到更新后的数据【为下一次的更新做准备】
  • 也可以拿到更新后的真实DOM【生成虚拟DOM】

#updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉 updated：

updated: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been re-rendered
  })
}

• 效果：可以拿到修改后的数据；也可以拿到真实DOM

• 在项目中

  • 可以进行真实DOM操作
  • 第三方库动态实例化【动态数据】

• 内部

  • VDOM重新渲染，然后通过render函数解析为VDOM对象模型，在通过Diff进行比对生成patch补丁对象，然后重新渲染为真实DOM

  • 只改变变化的部分，其他部分不改变

3.销毁

#beforeDestroy和destroyed

• 外部销毁
  • 通过开关完成(v-if、v-show)
    • DOM被删除了，组件也被删除了
• 内部销毁
  • 通过调用$destroy()来完成
    • DOM没有被删除，但是组件被删除了
    • Dom需要手动删除
• 项目中如何使用：
  • 善后
    • 比如： 计时器、滚动事件等

生命周期图详见VUE官网