惊呆了 ！！！Boolean 和 boolean 区别，以及Boolean可以这样妙用

Boolean 和 boolean 区别

特性	boolean	Boolean
定义	TypeScript 的基本类型	JavaScript 的构造函数
值类型	只能是 true或 false	是一个布尔对象
推荐使用场景	用于定义基本布尔值类型	很少用，除非需要显式构造布尔对象
运行时行为	不存在，只在编译时有效	在运行时是 JavaScript 的构造函数
性能	高效，直接操作布尔值	对象包装，性能较差

vue中的Boolean与boolean

Vue 的运行时框架无法识别 boolean 类型，它依赖的是 JavaScript 的内置构造函数（如 Boolean、String、Number 等）来检查和处理 props 类型。

因此，props的Type只能是Boolean、String或Number。

但是如果vue中开启了ts语法，就可以使用boolean 表示类型了

Boolean的妙用

主要体现在了JS隐式转换

const rawlist = res?.data || []
const trueList = values.filter(Boolean);

通过filter方法过滤掉了原始数组中的所有假值 等同于一下

const trueList = values.filter(item => Boolean(item));

还有一些其他的使用方法如

<div class="count-info">
     <span v-if="Boolean(inputValue)">{{ "输入的值为：" + inputValue }}</span>
     // 或者如下
    <span v-if="!!inputValue">{{ "输入的值为：" + inputValue }}</span>
    <input v-model="inputValue">
</div>
<script setup lang="ts">
  const inputValue = ref<string>("")
</script>