过滤器(filter)的现代化替代方案

Tue, 04 Mar 2025 07:00:27 +0000

考察点分析

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

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

具体技术评估点：

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

技术解析

关键知识点优先级

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

原理剖析

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

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

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

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

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

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

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

Vue3移除API的替代方案

Tue, 04 Mar 2025 07:00:31 +0000

考察点分析

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

框架演进理解：是否掌握Vue3的设计理念与破坏性变更
API迁移能力：针对已废弃特性能否给出官方推荐替代方案
架构设计思维：理解不同状态管理方案的适用场景及优劣对比

具体技术评估点：

过滤器（Filters）的现代化替代方案
$children的替代实现方式
事件总线（Event Bus）模式的问题分析
状态管理方案的选型依据

技术解析

关键知识点

Composition API > 过滤器替代
ref/scoped slots > $children替代
Provide/estore > 事件总线替代

原理剖析

Vue3移除过滤器的核心逻辑在于提升模板的JavaScript表达能力。通过方法调用（{{ formatDate(date) }}）或计算属性，开发者可以获得类型安全与更好的TS支持。$children的移除源于其不可靠的组件树遍历特性，改用ref获取具体子组件实例可避免隐式依赖。

事件总线的问题突出表现在响应式追踪失效和内存泄漏风险。基于Provide/Inject的依赖注入模式通过清晰的组件层级关系进行通信，而Pinia等状态库通过集中式store管理跨组件状态，配合Vue Devtools可实现完整的状态变更追溯。

常见误区

错误地在组合式函数中尝试使用过滤器
通过$parent逆向操作破坏组件封装性
在大型项目中滥用事件总线导致调试困难

问题解答

Vue3官方推荐的API替代方案如下：

过滤器（Filter）：改用方法调用或计算属性。例如将{{ text | uppercase }}改写为{{ uppercase(text) }}，或在setup中使用computed处理复杂逻辑
$children：使用模板ref获取特定子组件引用，或通过作用域插槽传递数据。跨层级通信推荐provide/inject
事件总线：改用provide/inject传递回调函数，或采用Pinia进行状态管理。事件总线因缺乏响应式追踪、易引发内存泄漏，且不利于维护而被废弃

解决方案

事件总线替代示例

 // 使用Pinia状态管理
import { defineStore } from 'pinia'

const eventStore = defineStore('events', {
 state: () => ({
 listeners: {}
 }),
 actions: {
 on(event, callback) {
 (this.listeners[event] ||= []).push(callback)
 },
 emit(event, ...args) {
 this.listeners[event]?.forEach(fn => fn(...args))
 }
 }
})

// 组件中使用
const store = eventStore()
store.on('refresh', () => {...})
store.emit('refresh')

扩展建议

低端设备：采用事件节流并及时清理监听器
超大应用：结合Pinia的模块化store进行状态拆分
SSR场景：使用Symbol作为provide的key避免命名冲突

深度追问

如何防止provide/inject的滥用导致组件耦合？ 采用类型约束与接口声明，通过TS确保注入内容的契约性

代码重构 on ZiYang FrontEnd Interview

过滤器(filter)的现代化替代方案

考察点分析 link

技术解析 link

关键知识点优先级 link

原理剖析 link

Vue3移除API的替代方案

考察点分析 link

技术解析 link

关键知识点 link

原理剖析 link

常见误区 link

问题解答 link

解决方案 link

事件总线替代示例 link

扩展建议 link

深度追问 link

考察点分析

技术解析

关键知识点优先级

原理剖析

考察点分析

技术解析

关键知识点

原理剖析

常见误区

问题解答

解决方案

事件总线替代示例

扩展建议

深度追问