https://fe-interview.pangcy.cn/tags/%E5%85%A8%E5%B1%80%E6%96%B9%E6%B3%95/Recent content in 全局方法 on ZiYang FrontEnd InterviewHugoen-usThu, 06 Mar 2025 13:07:39 +0800https://fe-interview.pangcy.cn/docs/framework/vue2/vue2-36/Tue, 04 Mar 2025 07:00:27 +0000https://fe-interview.pangcy.cn/docs/framework/vue2/vue2-36/<h2 id="考察点分析">考察点分析 <a href="#%e8%80%83%e5%af%9f%e7%82%b9%e5%88%86%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><p>本题主要考察以下核心能力维度：</p> <ol> <li><strong>框架机制理解</strong>：对Vue3破坏性变更的认知及迁移策略</li> <li><strong>工程化思维</strong>：不同替代方案的技术选型决策能力</li> <li><strong>代码设计能力</strong>：格式化逻辑的合理抽象与封装</li> </ol> <p>具体技术评估点：</p> <ul> <li>全局属性(globalProperties)的适用场景与污染风险</li> <li>组合式函数(Composable Function)的模块化优势</li> <li>计算属性(Computed)的响应式特性适用边界</li> <li>Vue2/Vue3兼容方案的实现原理</li> <li>代码可维护性与TypeScript支持考量</li> </ul> <hr> <h2 id="技术解析">技术解析 <a href="#%e6%8a%80%e6%9c%af%e8%a7%a3%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h2><h3 id="关键知识点优先级">关键知识点优先级 <a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9%e4%bc%98%e5%85%88%e7%ba%a7" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><p>组合式函数 &gt; 计算属性 &gt; 全局属性 &gt; 自定义指令</p> <h3 id="原理剖析">原理剖析 <a href="#%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><ol> <li> <p><strong>全局属性</strong>：通过<code>app.config.globalProperties</code>挂载方法，类似Vue2的全局过滤器</p> <div class="prism-codeblock "> <pre id="be69549" class="language-javascript "> <code>// 配置 app.config.globalProperties.$filters = { currency: (v) =&gt; formatCurrency(v) } // 使用 {{ $filters.currency(price) }}</code> </pre> </div> </li> <li> <p><strong>组合式函数</strong>：基于Composition API的逻辑复用</p> <div class="prism-codeblock "> <pre id="413a15b" class="language-javascript "> <code>// useFormatter.js export function useFormatter() { const currency = (v) =&gt; `${v.toFixed(2)} $` return { currency } } // 组件内 const { currency } = useFormatter()</code> </pre> </div> </li> <li> <p><strong>计算属性</strong>：适用于依赖响应式数据的场景</p>