Vue的生命周期作用

1、罗列有哪些周期

  beforeCreate() {
    console.log('beforeCreated', this.a)
  },
  created() {
    console.log('created', this.a)
  },
  beforeMount() {
    console.log('beforeMount', this.a)
  },
  mounted() {
    console.log('mounted', this.a)
  },
  beforeDestroy() {
    console.log('beforeDestroy', this.a)
  },
  destroyed() {
    console.log('destroyeds', this.a)
  },
  beforeUpdate() {
    console.log('beforeUpdate', this.a)
  },
  updated() {
    console.log('updated', this.a)
  },
  data() {
    return {
      a: 1,
    }
  }

上图顺便测试了下，发现除了 beforeCreate以外，创建期间的3个周期，都能够获取到data。

2、这些周期的简介、区别与应用场景

简介

• beforeCreate：Vue实例还未创建完全，此时 data 和 methods 还未渲染完毕
• created：Vue实例已经初始化，不过尚未挂载到页面，此时data和methods已经可以被访问
• beforeMounte：内存Dom编译完成，但是未渲染到页面
• mountd：实现了Dom的挂载，此时$refs能够被访问到
• beforeUpdate：（created的第一次不会触发）当内存中的数据变动，但是dom还未更新的时候触发。（注意，触发的条件是data中的数据，被dom所需要，会带来影响和变化。如果dom里不用展示data的数据，就不会触发）。
• updated：（created的第一次不会触发）页面上的数据和内存中的数据显示一致。（注意，触发的条件是data中的数据，被dom所需要，会带来影响和变化。如果dom里不用展示data的数据，就不会触发）。
• beforeDestroy：当离开页面之前（如Vue-Router切换路由的时候），此时data和methods还能够被访问。
• destroyed：已经离开页面，此时data和methods已经不能被访问。 ```git 情境一：离开当前路由，会直接调用； 当前路由不使用 缓存，离开当前路由会直接调用 beforeDestroy 和 beforeDestroy 销毁 情景二：离开当前路由，不会直接调用，需要程序控制调用；

当前路由使用 缓存，离开当前路由不会直接调用 beforeDestroy 和 beforeDestroy 销毁， 需要使用路由钩子函数主动的调用 beforeRouteLeave(to, from, next) { this.$destroy(); next(); } ———————————————— 引用：https://www.cnblogs.com/spqin/p/13186950.html ```

区别

• 创建期间触发的：beforeCreate/created/beforeMount/mounted
• 运行期间触发的：beforeUpdate/updated
• 销毁期间触发的：beforeDestroy/destroyed

应用场景

created的应用场景

因为是第一个我们能够获取 data 的周期。
所以我们的数据初始化请求一般会在这里发起。

updated的应用场景

这里优先找这个的。因为我平时实在很少用。

要注意：不要在这里对 data 进行赋值。（因为其触发逻辑就是检测data->dom的变化，如果在这里赋值就会出现）

data -> dom -> updated(修改data) ————
↑ |
———————————————————

无限循环了。

使用场景

• 1、聊天类项目，当信息来到（vue data更新的时候）——> 将滚动条滑到最底部。（告别setTimeout！）

  https://blog.csdn.net/weixin_44041976/article/details/107584572

类似地我们就可以想到，当我们遇到那种 data 修改后，dom需要作（非数据类）操作的时候可以用到 updated。

beforeDestroy

这里我能想到的场景主要是清空页面的 setTimeout/setInterval 的timer