如何快速检测Vue项目中已声明但未被使用的变量？

• 静态扫描（效率最高，优先用）
  直接用eslint-plugin-vue提供的vue/no-unused-properties规则做静态检测，这个规则原生支持Vue组件、mixin合并场景下的未使用属性识别，不需要额外装复杂工具。
  先在项目ESLint配置里开启对应规则，只针对data属性检测避免一次性报错太多：

  // .eslintrc.js 配置片段
  module.exports = {
    plugins: ['vue'],
    rules: {
      'vue/no-unused-properties': ['warn', {
        groups: ['data'],
        deepData: true,
        unreferencedOptions: ['mixins']
      }]
    }
  }
  

  配置完执行lint命令扫描create.vue和对应mixin文件，所有声明后未被引用的data变量会直接在控制台输出位置，直接定位清理即可。

• 运行时二次校验（避免静态扫描漏判）
  静态扫描可能存在动态引用识别不准的问题，可以在开发环境给组件加一段临时检测代码，通过代理data属性访问的方式，记录页面完整加载、交互后从未被访问过的data键，检测完删掉这段代码就行：

  // 临时添加到create.vue组件配置中，清理完成后删除
  export default {
    created() {
      if (process.env.NODE_ENV !== 'development') return
      // 等所有mixin合并完成后拿到全量data键
      this.$nextTick(() => {
        const allDataKeys = Object.keys(this.$data)
        const accessedSet = new Set()
        // 重写data属性的get/set记录访问
        allDataKeys.forEach(key => {
          let val = this.$data[key]
          Object.defineProperty(this.$data, key, {
            get() {
              accessedSet.add(key)
              return val
            },
            set(newVal) {
              accessedSet.add(key)
              val = newVal
            }
          })
        })
        // 延迟时间根据页面实际加载、接口返回时长调整，确保所有逻辑都执行过
        setTimeout(() => {
          const unusedKeys = allDataKeys.filter(key => !accessedSet.has(key))
          console.table('未被使用的data变量：', unusedKeys)
        }, 5000)
      })
    }
  }
  

  检测的时候可以把页面所有功能点都点一遍，确保动态调用的变量都被记录到，避免误删。

• 排查注意事项

  • 你当前的mixin引入写法有问题：直接import './mixins/script1'只会执行mixin文件内的代码，不会把mixin里的data、方法合并到组件中，正确引入需要先导入mixin默认导出的对象，再放到组件的mixins配置数组里：

    import script1 from './mixins/script1'
    import script2 from './mixins/script2'
    import script3 from './mixins/script3'
    
    export default {
      mixins: [script1, script2, script3]
      // 其余组件配置
    }
    

  • 清理变量前注意核对模板中的v-model、指令绑定、组件传值，还有watch、computed里的间接引用，避免删掉正在使用的变量
  • 多个mixin共用的变量如果被ESLint误报，可以加行注释跳过检测即可

内容的提问来源于stack exchange，提问作者code-8