Vue 中真正拦截组件渲染应使用 v-if，它在模板编译阶段跳过 VNode 创建和实例初始化；Suspense 可暂停异步组件渲染；生命周期钩子和自定义指令无法阻止渲染。
Vue 本身没有“渲染器拦截”这一官方概念，所谓“拦截组件渲染”，实质是通过响应式控制、条件逻辑和生命周期时机，**在虚拟 DOM 生成或挂载前阻止元素进入真实 DOM**。关键在于：不是强行中断 Vue 渲染流水线，而是让渲染逻辑从源头就“不触发”。
用 v-if 实现真正意义上的不渲染
v-if 是最直接、最可靠的方式。它作用于模板编译阶段，条件为 false 时，对应节点及其子组件不会生成 VNode，也不会初始化实例、执行 setup() 或 created 钩子。
- 适用于权限控制（如仅管理员可见的按钮）、数据加载完成前的占位屏蔽、路由级准入校验等场景
- 配合 Pinia store 中的计算属性（如 isAuthorized），可实现响应式拦截：状态一变，DOM 立刻增删
- 避免使用 v-show 替代 —— 它只是 display: none，组件仍会创建、挂载、执行副作用（如 API 请求、watch 监听）
利用 Suspense + setup 中的顶层 await（Vue 3）
当组件依赖异步数据（如 API 请求）才可安全渲染时，Suspense 能让父组件“等待”子组件准备就绪，期间展示 fallback 内容，且子组件完全不执行 setup 和渲染流程。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 子组件 script setup 中直接 await 一个 Promise，Vue 会将其视为异步依赖
- 父组件用 <Suspense> 包裹该子组件，并提供 <template #fallback> 内容
- 效果等同于“暂停渲染”，直到 Promise resolve 后才首次渲染，无多余初始化开销
生命周期钩子中做判断，但无法真正拦截
beforeCreate、created、beforeMount 等钩子确实能执行校验逻辑，但此时组件实例已创建、响应式系统已启动、setup 已执行完毕——渲染过程实际已不可逆。
立即学习“前端免费学习笔记（深入）”；
- 你可以在 beforeMount 中重定向或抛错，但组件内部代码（如 watch、computed、API 调用）很可能已运行
- 试图在钩子里手动清空 el 或修改 vnode，属于 hack 行为，违背 Vue 响应式设计原则，且易引发内存泄漏或状态不一致
- 这类做法适合轻量级校验提示，不适合真正阻止渲染
自定义指令不能阻止渲染
v-auth、v-permission 这类指令，本质是在元素已挂载后操作 DOM（如移除、禁用、加遮罩），它对虚拟 DOM 构建、组件实例化、生命周期执行均无影响。
- 指令无法干预模板编译或 VNode 创建阶段
- 即使把元素 display 设为 none，其子组件仍被创建、watcher 仍注册、事件监听器仍绑定
- 正确路径是：把权限判断提到响应式层（如 store 计算属性），再用 v-if 控制是否生成该指令所在节点
