『 Vue小Case 』- Vue Prop中的 null vs undefined

编者按：本文作者高峰，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