详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)

Vue的钩子函数

Vue的钩子函数是Vue.js提供的一种功能，我们可以使用这些函数在组件的生命周期中绑定自定义行为。Vue的钩子函数可以分为两类，一个是系统内置的，一个是我们可以在组件中自定义的。其中，系统内置的钩子函数被称为生命周期钩子，用来在组件的不同生命周期中，执行不同的操作。

路由导航守卫

Vue的路由导航守卫，是Vue中的一种钩子函数，用于控制路由跳转的行为。我们可以在路由导航守卫中，定义路由跳转前或跳转后的行为，从而控制路由跳转的流程和结果。路由导航守卫包括了全局导航钩子、路由独享的导航钩子和组件内的导航钩子。

• 全局导航钩子：beforeEach、beforeResolve、afterEach
• 路由独享的导航钩子：beforeEnter
• 组件内的导航钩子：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

下面是一个针对全局导航钩子的示例代码：

router.beforeEach((to, from, next) => {
  // 在路由跳转前执行
  console.log(to);
  console.log(from);
  next();
});

router.beforeResolve((to, from, next) => {
  // 在路由跳转完成前，但是组件尚未渲染时执行
  next();
});

router.afterEach(() => {
  // 在路由跳转完成并组件渲染后执行
});

keep-alive

在Vue的生命周期中，如果一个组件被销毁后再次创建，那么其数据状态和所有效果都需要重新初始化，这样的性能非常低下。此时就需要用到Vue提供的缓存组件keep-alive，用于缓存组件状态，避免多次渲染和数据初始化。

keep-alive具有以下特性：

• 当组件被切换时，只有deactivated和activated钩子函数被触发，而mounted和destroyed钩子函数不会被触发。
• keep-alive支持exclude和include两个属性，分别表示在缓存时忽略哪些组件和只缓存哪些组件。
• activated和deactivated钩子函数接收一个isBack参数，用于判断是否是后退返回到当前页。

下面是一个keep-alive的示例代码：

<template>
  <div>
    <button @click="changeComponent">切换组件</button>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

<script>
import ComponentA from 'components/ComponentA';
import ComponentB from 'components/ComponentB';

export default {
  data() {
    return {
      currentComponent: 'ComponentA',
    };
  },
  methods: {
    changeComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    },
  },
  activated(isBack) {
    console.log('activated', isBack);
  },
  deactivated(isBack) {
    console.log('deactivated', isBack);
  },
  components: {
    ComponentA,
    ComponentB,
  },
};
</script>

生命周期钩子

除了路由导航守卫和keep-alive之外，Vue中的生命周期钩子也是非常重要的，我们可以使用这些钩子函数，在组件的生命周期中进行初始化、更新和销毁等操作。Vue的生命周期钩子函数可以分为八个阶段，依次是：

• beforeCreate：实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前调用。
• created：实例创建完成后被立即调用。
• beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
• mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子函数。
• beforeUpdate：数据更新时调用，但是发生在虚拟 DOM 重新渲染和打补丁之前。
• updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁完成之后调用。
• beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
• destroyed：Vue 实例销毁后调用。

下面是一个生命周期钩子的示例代码：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello world',
    };
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeDestroy() {
    console.log('beforeDestroy');
  },
  destroyed() {
    console.log('destroyed');
  },
};
</script>