vue哪些情况称作“销毁组件”

在 Vue.js 中,组件被销毁是指组件从 DOM 中被移除,并且相关的资源和引用被清理。以下是组件被销毁的几种常见情况:

1. 动态组件切换

当使用 v-ifv-for 等指令动态切换组件时,组件会被销毁。例如:

vue 复制代码
<template>
  <div>
    <button @click="showComponent = !showComponent">
      切换组件
    </button>
    <component-a v-if="showComponent" />
  </div>
</template>

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

export default {
  components: {
    ComponentA
  },
  data() {
    return {
      showComponent: true
    };
  }
};
</script>
  • showComponentfalse 时,ComponentA 会被销毁,其 beforeUnmount 钩子会被触发。

2. 路由切换

当使用 Vue Router 进行页面跳转时,当前路由组件会被销毁。例如:

vue 复制代码
<template>
  <div>
    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view />
  </div>
</template>
  • 当从 /home 跳转到 /about 时,/home 对应的组件会被销毁,其 beforeUnmount 钩子会被触发。

3. 整个应用卸载

当整个 Vue 应用被卸载时,所有组件都会被销毁。例如:

javascript 复制代码
const app = Vue.createApp(App);
const vm = app.mount('#app');

// 卸载整个应用
vm.unmount();
  • 调用 vm.unmount() 会触发所有组件的 beforeUnmount 钩子。

4. 关闭页面

当用户关闭浏览器标签页或刷新页面时,整个 Vue 应用会被销毁,所有组件的 beforeUnmount 钩子都会被触发。

5. 跳转页面

  • 单页面应用(SPA):如果使用 Vue Router 进行页面跳转,当前页面的组件会被销毁。
  • 传统页面跳转 :如果使用 <a> 标签或 window.location.href 进行页面跳转,浏览器会加载新页面,旧页面的所有组件都会被销毁。

总结

组件被销毁的情况包括:

  • 动态组件切换(如 v-ifv-for)。
  • 路由切换(使用 Vue Router)。
  • 整个应用卸载。
  • 关闭页面或刷新页面。
  • 跳转页面(无论是 SPA 还是传统页面跳转)。

在这些情况下,Vue 会自动调用组件的 beforeUnmountunmounted 生命周期钩子,用于执行清理操作。

相关推荐
YGY Webgis糕手之路2 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔2 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang2 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔3 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任3 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴3 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔3 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js
德育处主任3 小时前
p5.js 矩形rect绘制教程
前端·数据可视化·canvas
前端工作日常4 小时前
我学习到的babel插件移除Flow 类型注解效果
前端·babel·前端工程化
SY_FC4 小时前
uniapp input 聚焦时键盘弹起滚动到对应的部分
javascript·vue.js·elementui