了解 Vue 的生命周期

首先不管是哪个组件一定有

beaforeCreated ==> 这时候组件没有 dom，没有 data
created ==> 这时候 data 以及 method 都有了,但是没有真实 dom
beforeMounted ==> 这时候有 dom，也有 data，但是还没挂载到页面上
mounted ==> 此时组件已挂载到页面上，所以我们可以在这里对 dom 进行操作
beforeupdate ==> 这是组件更新时所调用的钩子，此时页面还是旧的，但是 data 数据已经是新的了
updated ==> 这时候已经将新数据重新渲染了
beforeDestroy ==> 组件销毁前的阶段，这时候 data、method 等还都是可以用的
destroyed ==> 这时候 vue 身上的东西已经都不能用了，但是我们设置的定时器之类的还会存在，所以可以在这里清除操作。

这几个钩子都是每个组件所一定存在的，当然这个在 vue3 中 beforeDestroy，以及 destroyed 改名为 beforeUnMounted 和 UnMounted。

这里其实还缺少了两个生命周期钩子。

1
2
3
4
5
<router-view v-slot="{ Component }">
  <keep-alive>
    <component :is="Component" v-if="$route.meta.keepAlive" />
  </keep-alive>
</router-view>

当我们使用vue自带的keep-alive就会帮我们缓存组件，同时也会加上两个生命钩子

activated ==> 组件被缓存的时候调用
deactivated ==> 被keep-alive缓存的组件停用时调用

<%note warning flat%>
这里vue3和vue2也有区别，也就是vue3变为了onActivated和onDeactivated
<%endnote%>

常用的钩子和使用场景

我们最常用的其实就是created、mounted、destroyed、activated。

created和mounted

其实我们都可以在这两个生命周期发送请求，但是如果非要选一个的话是得根据业务来分，如果父组件的数据需要先渲染到页面，我们就应该在父组件的created中发送请求反之在mounted的发送，但是如果没有要求就随意都可以，个人习惯写在mounted中。这里可以看我之前写的vue组件加载过程中遇到的问题中看如果有父子组件是怎样的顺序进行加载的。

destroyed

我们在销毁一个组件的时候，会将这个组件对象彻底销毁，包括它身上的方法之类的，但是我们原生的定时器等是不会被清除的，所以我们常常也会在这里进行清除定时器等操作，清除全局事件总线亦可以在这里进行。

activated

这个其实我们在开发中会用到很多，比如说我们有一个页面其实结构一致只是它内容不一致，用户点击同一个页面只需要请求一次数据，这样节省服务器的开销。在缓存上组件的时候该组件会加上activate这个钩子，我们能在这个钩子中判断我们传入的id是否与当前一致，不一致就发送新的请求，将我们组件进行更新。

总结

其实不同的钩子都有不同的使用场景，既然存在就不可能存在的没道理，存在即有用，所以还是应该根据业务进行分析得出该使用哪个钩子。