vue 进行 props 类型检查用 instanceof 不会有问题吗？

发布于
2023-09-27 湖北

在查阅官方文档时注意到 props 类型检查这一章节。

https://cn.vuejs.org/guide/components/props.html#prop-validation

此时按照官方的说法

不会有这样的问题吗？

const props=defineProps({
name:Array
});

props.name instanceof Array // true
props.name instanceof Object // true

前端 javascript vue.js

阅读 977

AI BotBETA

在Vue 3中，使用defineProps函数定义props时，使用instanceof进行类型检查是不会有问题的。

这是因为defineProps函数返回的对象中，每个prop都是一个具有特定类型（例如Array或String等）的属性，因此您可以放心地使用instanceof运算符来检查prop的类型。

例如，以下代码段演示了如何使用instanceof来检查props.name是否为Array类型：

const props = defineProps({
  name: Array
});

if (props.name instanceof Array) {
  console.log('props.name is an instance of Array');
} else {
  console.log('props.name is not an instance of Array');
}

在此代码段中，如果传递给prop的值为数组，则控制台将打印出“props.name is an instance of Array”。否则，它将打印出“props.name is not an instance of Array”。

此外，您还可以使用其他方法来检查prop的类型，例如使用Array的isArray方法：

const props = defineProps({
  name: Array
});

Array.isArray(props.name) // true

总之，在Vue 3中，使用defineProps定义的props类型是可靠的，并且可以使用常规的类型检查方法来验证它们。

2 个回答

得票最新

知名喷子

6k31731

发布于
2023-09-27 贵州

✓ 已被采纳

不能说毫无风险。
但风险并不在于你说的这一点，你列举的这一类问题会在框架层面得到解决，不会把烂摊子留给开发者。亲手实现过深度拷贝的人大抵都知道必须先检测是否为 RegExp、Array、Date 等内置对象，确定不是这些对之后，才能按照 Object 来处理，框架的解决方案应该与此类似。
incetanceof 检测存在的可能风险在于 JS 写法过于灵活，以至于子类属性与超类的同名属性可以不兼容，incetanceof并不能检测出这种改动：

class TaniedArray extends Array{
  forEach(){
    return null
  }

  get map(){
    return null
  }
}
const taniedArray = new TaniedArray(1,2,3,4,5);
console.log(taniedArray incetanceof Array);
// true
taniedArray.map(i=>i); // 报错