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 生命周期钩子,用于执行清理操作。

相关推荐
daols883 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇3 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊3 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习4 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖4 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖5 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水5 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐5 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06275 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台5 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue