Vue.js ESLint插件：检测废弃的$set和$delete API

在Vue 3的迁移过程中，许多Vue 2特有的API已被移除，其中包括$set和$delete方法。本文将详细介绍如何通过ESLint规则来检测这些废弃API的使用，帮助开发者顺利完成Vue 3迁移。

废弃API的背景

在Vue 2中，由于JavaScript的限制，Vue无法检测到对象属性的添加或删除。因此提供了Vue.set/this.$set和Vue.delete/this.$delete方法来确保响应性。但在Vue 3中，基于Proxy的响应式系统已经能够自动追踪这些变化，使得这些API变得不再必要。

需要检测的代码模式

ESLint规则应当检测以下几种使用废弃API的模式：

1. 实例方法调用：

this.$set(target, property, value)
this.$delete(target, property)

2. 全局方法调用：

Vue.set(target, property, value)
Vue.delete(target, property)

3. 从vue模块导入：

import { set, del } from 'vue'
set(obj, key, val)
del(obj, key)

4. CommonJS引入：

const { set, del } = require('vue')
set(obj, key, val)
del(obj, key)

推荐的替代方案

对于不同的使用场景，Vue 3提供了更简单的原生JavaScript替代方案：

1. 设置属性：

// 废弃写法
this.$set(targetObj, 'property', value)

// 推荐写法
targetObj.property = value
// 或使用动态属性名
targetObj[propertyName] = value

2. 删除属性：

// 废弃写法
this.$delete(targetObj, 'property')

// 推荐写法
delete targetObj.property
// 或使用动态属性名
delete targetObj[propertyName]

3. 合并对象：

// 废弃写法
Vue.set(col, 'value', usage[col.id])

// 推荐写法
Object.assign(col, { value: usage[col.id] })
// 或使用扩展运算符
col = { ...col, value: usage[col.id] }

实现意义

实现这样的ESLint规则具有多重好处：

1. 平滑迁移：帮助开发者提前识别Vue 3不兼容的API用法
2. 代码现代化：鼓励使用更简洁的原生JavaScript语法
3. 性能优化：避免不必要的API调用开销
4. 统一代码风格：确保团队使用一致的属性操作方式

对于大型项目迁移Vue 3，这样的规则可以显著减少兼容性问题，提高迁移效率。