编者按:本文作者高峰,360奇舞团,前端开发工程师
前言:本文将引入两个Vue中比较特殊的使用场景,带领大家熟悉一下null和undefined的区别,然后再分析一下Vue中是怎么对Props做校验的,最后给出大佬是怎么解释的。
一直以来,笔者在使用Vue时,习惯于在需要表示prop属性未定义时,使用undefined,而不是null。因为“undefined才是没有值,null是有值,但是值为空的对象(注意不是空对象{})”。
基于这一习惯,笔者规避掉了很多问题,对此也没有深究。
直到最近,参与项目的一些同学习惯于指定null为初始值,我也没有强制性统一。根本原因是,我自己也觉得没什么,每个人都有自己的习惯,只要大的风格不出偏差就可以接受,毕竟项目紧嘛。
直到今天遇到了下面的场景,我才发现,原来这么做会有一些奇怪的小问题。
一、场景再现
1.1 场景一:prop的值是null,会使用default的值吗?
阅读以下代码,你觉得有问题吗?
HTML:
<div id="app">
<list :items="null"></list>
</div>
JS:
Vue.component('list', {
template: '<div>{ { typeof items }} { { items.join(',') }}</div>',
props: {
items: {
type: Array,
default() {
return [1, 2, 3]
},
}
}
})
new Vue({
el: '#app',
});
上述的代码执行之后有问题吗?停顿5s思考一下,1、2、3、4、5。
好,我们来看下示例代码,这段代码执行之后会报错(记得开启控制台查看错误,因为是JS执行错误)。因为items最终的值是nu