考察点分析

本题主要考察以下核心能力维度：

  1. 框架机制理解：对Vue3破坏性变更的认知及迁移策略
  2. 工程化思维：不同替代方案的技术选型决策能力
  3. 代码设计能力：格式化逻辑的合理抽象与封装

具体技术评估点：

  • 全局属性(globalProperties)的适用场景与污染风险
  • 组合式函数(Composable Function)的模块化优势
  • 计算属性(Computed)的响应式特性适用边界
  • Vue2/Vue3兼容方案的实现原理
  • 代码可维护性与TypeScript支持考量

技术解析

关键知识点优先级

组合式函数 > 计算属性 > 全局属性 > 自定义指令

原理剖析

  1. 全局属性：通过app.config.globalProperties挂载方法，类似Vue2的全局过滤器

      // 配置
app.config.globalProperties.$filters = {
  currency: (v) => formatCurrency(v)
}

// 使用
{{ $filters.currency(price) }}

  2. 组合式函数：基于Composition API的逻辑复用

      // useFormatter.js
export function useFormatter() {
  const currency = (v) => `${v.toFixed(2)} $`
  return { currency }
}

// 组件内
const { currency } = useFormatter()

  3. 计算属性：适用于依赖响应式数据的场景

      const price = ref(100)
const formattedPrice = computed(() => `${price.value} $`)

常见误区

  • 在计算属性中直接处理外部参数（需使用高阶函数）
  • 全局属性导致TypeScript类型推导失效
  • 混淆组合式函数与工具函数的适用场景

问题解答

Vue3移除过滤器后，推荐三种迁移方案：

  1. 全局属性（适合简单全局方法）：

    • 优点：迁移成本低，语法相似
    • 缺点：类型支持弱，全局命名空间污染

  2. 计算属性（依赖响应式数据时首选）：

    • 优点：自动缓存，声明式编程
    • 缺点：无法直接传参，需高阶函数包装

  3. 组合式函数（复杂格式化推荐）：

    • 优点：类型安全，逻辑复用
    • 缺点：需要显式导入

Vue2遗留项目注意：

  1. 使用@vue/compat实现兼容
  2. 通过vue.config.optionMergeStrategies扩展过滤器
  3. 逐步替换时优先处理高频使用过滤器

解决方案

组合式函数示例 

  // formatters.js
export function useDateFormatter() {
  function format(date, locale = 'en-US') {
    // 处理无效日期边界条件
    if (!(date instanceof Date)) date = new Date(date)
    if (isNaN(date)) return 'Invalid Date'
    
    // 支持本地化扩展
    return new Intl.DateTimeFormat(locale).format(date)
  }

  return { format }
}

// 组件使用
import { useDateFormatter } from './formatters'
const { format } = useDateFormatter()

可扩展性建议：

  • 按业务模块拆分formatter文件
  • 通过import()实现动态加载本地化配置
  • 添加JSDoc增强类型提示

深度追问

  1. 为何Vue3要移除过滤器？

    • 与Composition API设计哲学冲突，模板语法应专注数据绑定

  2. 如何处理需要参数的格式化方法？

    • 使用高阶函数返回处理函数：const format= (prefix) => (v) => prefix + v

  3. 大型项目中如何防止重复逻辑？

    • 创建共享hooks目录，配合ESLint导入规则
Edit this page

Last updated 06 Mar 2025, 13:07 +0800 . history