在 Vue.js 中，v-cloak 与 v-pre 这两个内置指令各自承担什么职责？它们分别适用于哪些实际场景？

回答思路

1. 【回答框架 1】v-cloak 主要用于防止页面加载时因 Vue 实例尚未完成编译而闪现未解析的模板插值（如 {{ message }}）或闪烁的未编译模板。它是一个通用属性指令，当 Vue 编译完成后会从元素上移除该属性，配合 CSS 如 [v-cloak] { display: none; } 使用，确保在 Vue 接管视图前隐藏未编译内容。
2. 【回答框架 2】v-pre 则是告诉 Vue 跳过某个元素及其子元素的编译过程，直接输出原始内容。它适用于不需要 Vue 处理的静态部分，例如显示原始 Mustache 标签或包含大量静态文本的节点，可以提升编译性能，因为 Vue 不会对这些内容进行解析。
3. 【回答框架 3】对比两者：v-cloak 解决的是初始渲染时的闪烁问题，属于用户体验优化；而 v-pre 优化的是 Vue 编译阶段的性能，针对无需响应的静态内容。v-cloak 必须与 CSS 配合，而 v-pre 是纯指令无需额外样式。
4. 【回答框架 4】实际应用：v-cloak 通常用于入口组件或包含插值表达式的根元素，防止首次加载时模板闪现；v-pre 可用于展示静态内容、示例代码或文档页中的代码块，避免不必要的编译开销。
5. 【关键点 1】v-cloak 防止未编译模板闪现，需配合 CSS [v-cloak] { display: none; }。
6. 【关键点 2】v-pre 跳过指定元素及子元素的编译，直接输出原始模板内容。
7. 【关键点 3】v-cloak 偏重渲染体验，v-pre 偏重编译性能优化。
8. 【易错点 1】误以为 v-cloak 能延迟 Vue 加载，实际它只在 Vue 实例挂载前隐藏元素。
9. 【易错点 2】将 v-pre 用于需要 Vue 响应的动态部分，会导致插值或指令不被解析。
10. 【易错点 3】忘记给 v-cloak 添加 CSS，则该指令几乎无实际效果。