vue 3 中用 切换视图，核心是响应式挂载不同组件；支持字符串名或组件对象绑定，推荐后者；需用 缓存状态，并注意异步加载与防错处理。
` 切换视图">
Vue 3 中用 `
绑定方式：字符串名 or 组件对象
`:is` 接收两种合法值：
- 已注册的组件名称字符串（如
'UserForm'），适用于全局注册或在components选项中声明的组件 - 组件模块本身（如
import UserForm from './UserForm.vue'后直接赋值），这是 Vue 3 `<script setup>` 中的推荐写法，无需字符串命名，类型安全且 IDE 可跳转</script>
⚠️ 注意：不能在 `:is` 中写三元表达式（如 :is="type === 'edit' ? EditComp : ViewComp"），应提前计算好再绑定，否则响应式可能失效。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
保持状态：必须套 ``
默认情况下，每次切换都会销毁旧组件、新建新组件，输入框内容、滚动位置、定时器等全丢失。解决方法很简单：
- 在外层加 `
` 标签，组件实例就会被缓存，仅触发 `activated` / `deactivated` 钩子 - 被缓存的组件需有明确的
name（可通过defineOptions({ name: 'UserProfile' })或组件文件名自动推导） - 可用
include或exclude精确控制哪些组件参与缓存，比如：<keep-alive :include="['FormTab', 'DetailTab']>
配合异步加载提升性能
对体积大的模块，推荐结合 `defineAsyncComponent` 懒加载：
- 写法示例：
const ReportView = defineAsyncComponent(() => import('./ReportView.vue')) - 赋值给响应式变量后，`
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
