发现Vue3 v-if里遇到null.length会直接卡死奔溃

Question

<template>
  <div v-loading="!todayData">
    <div class="tips-container">
      <div v-if="todayData.length > 0">
        今天共
        <span class="text-main-color text-large">{{ todayData.length }}</span>
        次课
      </div>
      <div v-else>今天没有课，放松一下叭</div>
    </div>
  </div>
</template>

  data: function () {
    return {
      scheduleData: null,
      scheduleStartTime: null,
      todayData: null,
    };
  },

反复调试，发现上面代码，网站进去会直接白屏卡住，console都打不开，卡一会就弹奔溃提示。
把todayData改成[]之后问题不出现，把todayData.length改成todayData问题也不出现。这个是Vue3本身的问题还是我的理解不对？

Answer 1

null.length 这是语言级别的运行时错误，跟 Vue 没关系 —— 怎么可能在一个空对象（或者 undefined）上去取属性呢？

针对你的问题，有几个修复办法：

1. 保证对象不为空

   即 todayData 初始值给 []，以后赋值的时候也记得把 null 和 undefined 处理掉，比如 this.todayData = response.data ?? []。

2. 在使用的时候判断是否空值

   可以使用可选链运算符 ?. 和空值合并运算符 ??，比如 todayData?.length ?? 0。这句话表示如果 todayData 不是 undefined 或者 null 的时候，取其 .length 值，否则 ?. 运算结果为 undefined。如果前面的运算结果是 undefined 或者 null，会使用 ?? 后面的值。

   如果不熟悉新语法，用判断也是可以的 todayData ? todayData.length : 0。与前面的区别在于，如果 todayData 没有 length，这里得不到 0 值。

3. 使用计算属性

   如果多处使用 todayData.length，又不想给（或不能）给他赋数组值，可以考虑使用计算属性来处理。这里可以计算 length，也可以计算 todayData，关键看应用场景。

   computed: {
       todayDataLength() { return this.todayData?.length ?? 0; },
       validTodayData() { return this.todayData ?? []; }
   }

Answer 2

vue模板编译的时候，遇到这null.length这句是会报错的，报错之后模板是不会编译渲染的，解决办法：todayData:[](给todayData赋值为空数组)