v-if 和 v-show 机制不同：v-if 控制元素是否存在（条件为假时彻底移除 dom），适合低频切换或初始不显示场景；v-show 仅控制 visibility（始终保留在 dom 中），适合高频切换且需保留状态的场景。
v-if 和 v-show 都能控制元素是否显示，但机制完全不同：v-if 是“有没有”，v-show 是“看不看得见”。选错指令，小项目可能没感觉，大列表或高频切换时容易卡顿或白屏。
v-if：按需创建和销毁 DOM
条件为 true 时才渲染元素，为 false 时该元素彻底从 DOM 中移除，连带内部的事件监听、子组件、表单绑定状态都会被销毁。适合用在「几乎不切换」或「初始很可能不显示」的场景。
- 支持链式判断：
v-if+v-else-if+v-else，三者必须紧挨着写 - 可作用于
<template></template>标签，实现多元素批量条件渲染（<template></template>自身不输出 DOM） - 惰性渲染：初始值为 false 时，内部模板完全不编译，节省首屏资源
- 注意：不能和
v-for写在同一元素上，需用<template></template>包裹再配v-if
v-show：始终存在，只改 display
不管条件真假，元素一定出现在 DOM 中，只是通过 CSS 的 display: none 控制可见性。切换极快，但初始就占内存和渲染开销。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 不支持
<template></template>，也不能搭配v-else使用 - 适合开关频繁的场景，比如模态框、折叠面板、标签页切换
- 对表单元素要小心：v-show 隐藏后，input 的值仍保留在 DOM 中；v-if 移除后，值会丢失（除非你手动缓存）
- 无法触发组件的
beforeUnmount/unmounted生命周期，因为组件没被卸载
怎么选：看两个关键点
先问自己：这个元素会不会经常切？它第一次加载时大概率显还是隐？
- 切换少、首次大概率不显 → 用
v-if（如权限按钮、错误提示、后台配置项） - 切换多、需要保留状态 → 用
v-show（如导航菜单、Tab 内容区、搜索建议浮层） - 不确定？优先
v-if，更符合直觉，也更节省资源
常见误用提醒
别把 v-show 用在需要权限拦截的敏感区域——DOM 还在，懂行的人 F12 就能看见；真正要隐藏数据，必须用 v-if 或服务端控制。另外，v-show 对 SVG 元素兼容性略差，某些属性（如 visibility）可能不如 display 可靠，复杂图表建议统一用 v-if。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
