Vue生命周期钩子 beforeDestroy与destroyed的清理工作

Vue 生命周期简介

在深入探讨 beforeDestroy 与 destroyed 这两个生命周期钩子之前，我们先来简单回顾一下 Vue 的生命周期。Vue 实例从创建到销毁的过程，就是它的生命周期。在这个过程中，Vue 会自动执行一些叫做生命周期钩子的函数，允许开发者在特定的阶段添加自己的代码逻辑。

Vue 的生命周期大致可以分为以下几个阶段：

创建阶段：在实例被创建之初，Vue 会进行一系列初始化操作，包括数据观测、编译模板、挂载实例到 DOM 等。这个阶段涉及的钩子函数有 beforeCreate 和 created。
挂载阶段：当 Vue 实例准备将其挂载到 DOM 时，会触发 beforeMount 钩子函数。而当挂载完成，DOM 已经更新并包含了 Vue 实例渲染的内容时，mounted 钩子函数会被调用。
更新阶段：当 Vue 实例的数据发生变化时，会触发更新过程。在重新渲染之前，会调用 beforeUpdate 钩子函数，而当 DOM 更新完成后，updated 钩子函数会被执行。
销毁阶段：当 Vue 实例被销毁时，就会涉及到我们要重点讨论的 beforeDestroy 和 destroyed 这两个生命周期钩子。

为什么需要清理工作

在 Vue 应用的运行过程中，组件可能会创建一些需要在组件销毁时进行清理的资源。例如：

定时器：组件可能会使用 setInterval 或 setTimeout 创建定时器来执行周期性任务或延迟任务。如果在组件销毁时不清理这些定时器，它们会继续在后台运行，可能导致内存泄漏以及不必要的计算资源浪费。
事件监听器：组件可能会给 DOM 元素或其他全局对象添加事件监听器。当组件销毁后，如果这些事件监听器没有被移除，它们仍然会对相应的事件做出响应，这可能会导致不可预测的行为，比如在已经不存在的 DOM 元素上执行操作，进而引发 JavaScript 错误。
第三方插件实例：如果组件使用了第三方插件，并创建了插件的实例，当组件销毁时，需要妥善处理这些实例，释放相关资源，避免内存泄漏。

beforeDestroy 钩子函数

beforeDestroy 钩子函数在 Vue 实例销毁之前被调用。在这个钩子函数中，实例仍然完全可用，这意味着你可以访问实例的所有数据、方法以及 DOM 元素（如果已挂载）。

语法

new Vue({
  //...
  beforeDestroy: function () {
    // 在此处编写清理逻辑
  }
})

使用场景 - 清理定时器

假设我们有一个简单的组件，它使用 setInterval 每秒更新一次数据来显示当前时间。

<template>
  <div>
    <p>当前时间: {{ currentTime }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: new Date().toLocaleTimeString()
    };
  },
  created() {
    this.timer = setInterval(() => {
      this.currentTime = new Date().toLocaleTimeString();
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>

在上述代码中，我们在 created 钩子函数中创建了一个定时器 this.timer，每秒更新 currentTime 的值。而在 beforeDestroy 钩子函数中，我们通过 clearInterval(this.timer) 清理了这个定时器，确保在组件销毁时，定时器不会继续运行。

使用场景 - 移除事件监听器

当我们给 DOM 元素添加事件监听器时，需要在组件销毁时移除它们。例如，我们有一个组件，当点击页面任意位置时，会在控制台打印一条消息。

<template>
  <div>
    <p>点击页面任意位置试试</p>
  </div>
</template>

<script>
export default {
  created() {
    document.addEventListener('click', this.handleClick);
  },
  methods: {
    handleClick() {
      console.log('页面被点击了');
    }
  },
  beforeDestroy() {
    document.removeEventListener('click', this.handleClick);
  }
};
</script>

在 created 钩子函数中，我们给 document 添加了一个 click 事件监听器，绑定到 handleClick 方法。在 beforeDestroy 钩子函数中，通过 document.removeEventListener('click', this.handleClick) 移除了这个事件监听器，避免在组件销毁后仍然对点击事件做出响应。

使用场景 - 清理第三方插件实例

假设我们在组件中使用了一个简单的图表插件 Chart.js 来绘制柱状图。

<template>
  <div>
    <canvas id="myChart"></canvas>
  </div>
</template>

<script>
import Chart from 'chart.js';

export default {
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    const ctx = document.getElementById('myChart').getContext('2d');
    this.chart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['一月', '二月', '三月'],
        datasets: [{
          label: '销量',
          data: [12, 19, 3],
          backgroundColor: 'rgba(75, 192, 192, 0.2)',
          borderColor: 'rgba(75, 192, 192, 1)',
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.destroy();
    }
  }
};
</script>

在 mounted 钩子函数中，我们创建了一个 Chart.js 的实例 this.chart。在 beforeDestroy 钩子函数中，我们检查 this.chart 是否存在，如果存在则调用 this.chart.destroy() 方法来销毁图表实例，释放相关资源。

destroyed 钩子函数

destroyed 钩子函数在 Vue 实例销毁之后被调用。在这个阶段，Vue 实例的所有指令都被解绑，所有的事件监听器都被移除，所有的子实例也都被销毁。

语法

new Vue({
  //...
  destroyed: function () {
    // 在此处编写清理完成后的逻辑
  }
})

与 beforeDestroy 的区别

beforeDestroy 钩子函数在实例销毁之前调用，此时实例仍然可用，适合进行清理操作，如清除定时器、移除事件监听器等。而 destroyed 钩子函数在实例销毁之后调用，此时实例已经不可用，主要用于执行一些在清理完成后需要做的事情，比如记录日志等。

使用场景 - 记录销毁日志

<template>
  <div>
    <p>这是一个简单的组件</p>
  </div>
</template>

<script>
export default {
  beforeDestroy() {
    console.log('组件即将被销毁，开始清理工作');
    // 执行清理操作，如清除定时器、移除事件监听器等
  },
  destroyed() {
    console.log('组件已被销毁，清理工作完成');
  }
};
</script>

在上述代码中，beforeDestroy 钩子函数中记录了即将进行清理工作的日志，而 destroyed 钩子函数中记录了清理工作完成的日志。这有助于开发者在调试和维护过程中了解组件销毁的过程。

使用场景 - 释放全局资源

假设我们在组件中使用了一个全局变量来共享数据，并且在组件销毁时需要释放这个全局变量占用的资源。

<template>
  <div>
    <p>使用全局共享数据</p>
  </div>
</template>

<script>
// 模拟全局共享数据
let globalData = { value: 0 };

export default {
  created() {
    // 使用全局共享数据
    globalData.value++;
  },
  beforeDestroy() {
    // 在销毁前可以对全局数据进行一些处理
    globalData.value--;
  },
  destroyed() {
    // 在销毁后可以考虑释放全局变量
    globalData = null;
  }
};
</script>

在这个例子中，我们在 created 钩子函数中使用了全局变量 globalData。在 beforeDestroy 钩子函数中，我们对 globalData 进行了一些处理（这里是将其 value 减 1）。在 destroyed 钩子函数中，我们将 globalData 设置为 null，释放其占用的资源，避免潜在的内存泄漏。

注意事项

异步操作：在 beforeDestroy 钩子函数中执行清理操作时，如果涉及异步操作，需要确保这些异步操作在实例销毁之前完成。否则，可能会在实例销毁后继续执行异步操作，导致错误。例如，如果在 beforeDestroy 中发起一个异步的网络请求来清理服务器上的资源，需要使用 Promise 或 async/await 来确保请求完成后再销毁实例。

<template>
  <div>
    <p>异步清理示例</p>
  </div>
</template>

<script>
export default {
  beforeDestroy: async function () {
    try {
      // 模拟异步清理操作，例如删除服务器上的相关数据
      await this.deleteDataOnServer();
      console.log('异步清理操作完成');
    } catch (error) {
      console.error('异步清理操作出错:', error);
    }
  },
  methods: {
    deleteDataOnServer() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          // 模拟网络请求
          resolve();
        }, 1000);
      });
    }
  }
};
</script>

父子组件关系：当父组件销毁时，子组件也会被销毁。在这种情况下，父组件和子组件都可能有自己的 beforeDestroy 和 destroyed 钩子函数。需要注意钩子函数的执行顺序，一般来说，子组件的 beforeDestroy 会先于父组件的 beforeDestroy 执行，而子组件的 destroyed 会先于父组件的 destroyed 执行。

<!-- 父组件 -->
<template>
  <div>
    <ChildComponent></ChildComponent>
    <button @click="destroyParent">销毁父组件</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    destroyParent() {
      this.$destroy();
    }
  },
  beforeDestroy() {
    console.log('父组件即将被销毁');
  },
  destroyed() {
    console.log('父组件已被销毁');
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>这是子组件</p>
  </div>
</template>

<script>
export default {
  beforeDestroy() {
    console.log('子组件即将被销毁');
  },
  destroyed() {
    console.log('子组件已被销毁');
  }
};
</script>

在上述代码中，当点击按钮销毁父组件时，控制台会先打印 子组件即将被销毁，然后是 父组件即将被销毁；接着会先打印 子组件已被销毁，最后是 父组件已被销毁。

多次调用销毁方法：一般情况下，不应该多次调用 $destroy 方法来销毁同一个 Vue 实例。多次调用可能会导致不可预测的行为，因为在第一次调用 $destroy 后，实例已经开始进入销毁过程，再次调用可能会对已经清理的资源进行重复操作，或者在不恰当的时机触发生命周期钩子函数。

总结

beforeDestroy 和 destroyed 这两个生命周期钩子在 Vue 组件的销毁过程中起着至关重要的作用。beforeDestroy 用于在组件销毁之前执行清理操作，如清除定时器、移除事件监听器和清理第三方插件实例等，确保组件在销毁后不会留下任何潜在的问题，如内存泄漏或无效的事件监听。而 destroyed 则用于在组件销毁完成后执行一些收尾工作，如记录日志或释放全局资源。

在实际开发中，我们需要根据组件的具体需求，在这两个钩子函数中编写合适的清理逻辑，以提高应用的稳定性和性能。同时，要注意异步操作、父子组件关系以及避免多次调用销毁方法等问题，确保组件销毁过程的顺利进行。通过合理利用这两个生命周期钩子，我们能够更好地管理 Vue 应用中的资源，打造更加健壮和高效的前端应用。

通过对 beforeDestroy 和 destroyed 生命周期钩子的深入理解和正确使用，我们可以确保 Vue 组件在整个生命周期内的资源管理得当，提高应用的性能和稳定性。在实际项目中，应根据具体业务场景，仔细分析组件可能产生的资源占用情况，并在这两个钩子函数中编写合适的清理和收尾逻辑。同时，要注意处理好异步操作、父子组件关系等细节，避免出现潜在的问题。希望本文能够帮助你更好地掌握 Vue 组件销毁过程中的清理工作，提升前端开发的质量。