Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
它可以总共分为8个阶段：创建前/后、载入前/后、更新前/后、销毁前/销毁后。

vue2 生命周期

各个生命周期的作用

生命周期 描述
beforeCreate 组件实例被创建之初，组件的属性生效之前
created 组件实例已经完全创建，属性也绑定，但真实dom还没有生成，$el还不可用
beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用
mounted el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子
beforeUpdate 组件数据更新之前调用，发生在虚拟 DOM 打补丁之前
update 组件数据更新之后
activited keep-alive专属，组件被激活时调用
deadctivated keep-alive专属，组件被销毁时调用
beforeDestory 组件销毁前调用
destoryed 组件销毁后调用

beforeCreate是new Vue()之后触发的第一个钩子，在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。

created在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数。可以做一些初始数据的获取，在当前阶段无法与Dom进行交互，如果非要想，可以通过vm.$nextTick来访问Dom。

beforeMount发生在挂载之前，在这之前template模板已导入渲染函数编译。而当前阶段虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated。

mounted在挂载完成后发生，在当前阶段，真实的Dom挂载完毕，数据完成双向绑定，可以访问到Dom节点，使用$refs属性对Dom进行操作。

beforeUpdate发生在更新之前，也就是响应式数据发生更新，虚拟dom重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重渲染。

updated发生在更新完成之后，当前阶段组件Dom已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新。

beforeDestroy发生在实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器。

destroyed发生在实例销毁之后，这个时候只剩下了dom空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。

从源码解读Vue生命周期，让面试官对你刮目相看

接口请求一般放在mounted中，但需要注意的是服务端渲染时不支持mounted，需要放到created中。

Computed本质是一个具备缓存的watcher，依赖的属性发生变化就会更新视图。 适用于计算比较消耗性能的计算场景。当表达式过于复杂时，在模板中放入过多逻辑会让模板难以维护，可以将复杂的逻辑放入计算属性中处理。
Watch没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监听对象中的属性时，可以打开deep：true选项，这样便会对对象中的每一项进行监听。这样会带来性能问题，优化的话可以使用字符串形式监听，如果没有写到组件中，不要忘记使用unWatch手动注销哦。

vue3 生命周期

Vue3 Composition 组合式 API

  1. Vue2 ~~~~~~~~~~~ vue3
  2. beforeCreate  -> setup()
  3. created       -> setup()
  4. beforeMount   -> onBeforeMount
  5. mounted       -> onMounted
  6. beforeUpdate  -> onBeforeUpdate
  7. updated       -> onUpdated
  8. beforeDestroy -> onBeforeUnmount
  9. destroyed     -> onUnmounted
  10. activated     -> onActivated
  11. deactivated   -> onDeactivated

VNode 生命周期事件

在 Vue 2 中，我们可以通过事件来监听组件生命周期中的关键阶段。这些事件名都是以 hook: 前缀开头，并跟随相应的生命周期钩子的名字。

在 Vue 3 中，这个前缀已被更改为 vnode-。额外地，这些事件现在也可用于 HTML 元素，和在组件上的用法一样。

2.x 语法

在 Vue 2 中，这些事件名和相应的生命周期钩子一致，并带有hook:前缀：

  1. <template>  
  2.     <child-component @hook:updated="onUpdated"> 
  3. </template>

3.x 语法

在 Vue 3 中，事件名附带的是 vnode-前缀：

  1. <template>
  2.   <child-component @vnode-updated="onUpdated">
  3. </template>

或者在驼峰命名法的情况下附带前缀 vnode：

  1. <template>  
  2.     <child-component @vnodeUpdated="onUpdated">
  3. </template>
  1. <template>
  2.   <main :class="prefixCls">
  3.     <el-scrollbar
  4.       class="root-scrollbar"
  5.       ref="scrollbarRef"
  6.       @scroll="scroll"
  7.       @vnodeMounted="scrollbarMounted"
  8.     >
  9.       <router-view v-slot="{ Component }" v-if="routerState">
  10.         <component
  11.           :is="Component"
  12.           :scrollBottom="scrollBottom"
  13.           @scrollToTop="scrollToTop"
  14.         />
  15.       </router-view>
  16.     </el-scrollbar>
  17.   </main>
  18. </template>
  20. <script lang="ts">
  21. import {
  22.   defineComponent,
  23. } from 'vue'
  25. import type { ElScrollbar } from 'element-plus'
  26. import WOW from 'wow.js'
  30. export default defineComponent({
  31.   name: 'CompBasicLayout',
  32.   components: {
  33.     HeadBar,
  34.     Footer
  35.   },
  36.   setup() {
  37.     const scrollbarMounted = () => {
  38.       var wow = new WOW({
  39.         boxClass: 'animation',
  40.         scrollContainer: '.el-scrollbar__wrap' // optional scroll container selector, otherwise use window,
  41.       })
  42.       wow.init()
  43.     }
  45.     return {
  46.       scrollbarMounted,
  47.     }
  48.   }
  49. })
  50. </script>

其他

组件中的data为什么是一个函数？

一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。