如何规避Vue3 Composition API中if(ref<boolean>)的错误比较？

适用的Lint规则 #

可以使用eslint-plugin-vue提供的**vue/no-ref-as-operand**规则，这个规则会禁止在条件判断、逻辑运算等场景中直接使用ref对象，强制必须访问.value属性。

配置步骤 #

1. 确保已安装eslint-plugin-vue和@typescript-eslint/eslint-plugin（适配TypeScript环境）
2. 在ESLint配置文件（如.eslintrc.js或.eslintrc.json）中添加规则：

module.exports = {
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/typescript/recommended'
  ],
  rules: {
    'vue/no-ref-as-operand': 'error'
  }
}

额外优化：TypeScript严格模式辅助 #

在tsconfig.json中开启"strict": true，编译阶段就能提前发现问题——ref对象本身是包含value属性的对象，直接作为布尔值判断会触发类型检查错误，和Lint规则形成双重保障。

规则生效示例 #

当写出以下错误代码时：

const show = ref<boolean>(false);
function someFunc() {
  if (show) { // 会被ESLint标记错误
    // ...
  }
  if (true && show) { // 同样会被标记错误
    // ...
  }
}

ESLint会直接抛出错误提示，强制修改为show.value。

内容的提问来源于stack exchange，提问作者TomFree