Vue3--触发页面死循环的几种情况

1. 表格data不赋初值，添加判断 v-if="data.length” 会触发页面死循环

<el-table v-if="urlList.length" :data="urlList"></el-table>

<script setup>
  const urlList = ref();
</script>

解决方法：

// 1) const urlList = ref([]);
// 2) 默认值的数据类型不设置的时候，在v-if判断里，增加v-if="urlList && urlList.length"

2. watch 监听中，只要存在语法错误，即会触发

watch(
  () => props,
  (newValue, oldValue) => {
    if (newValue) {
      const newUrl = newValue.url.split('//')[1].split('/')[0].split(':')[0];
      ……
    }
  },
  { immediate: true, deep: true }
);

这条语句正常执行没有问题，但如果在值为空的情况下，会出现语法错误：（进而触发页面死循环）

修改后的代码增加了判断语句，避免出现这种问题。

watch(
  () => props,
  (newValue, oldValue) => {
    if (newValue) {
      let newUrl = JSON.parse(JSON.stringify(newValue))?.url;
      newUrl = newUrl ? newUrl.split('//')[1].split('/')[0].split(':')[0] : (newUrl = '');
      ……
    }
  },
  { immediate: true, deep: true }
);

补充：还有一种最简单的验证

watch(
  () => props,
  (newValue, oldValue) => {
    log('这是一条错误语句');  // --> console.log('这是一条正确语句');
  },
  { immediate: true, deep: true }
);

3. 发现

这里的代码错误在页面上都存在两种情况：

1. 控制台提示报错信息。此时正处于文件当前所在页面
2. 直接触发页面死循环。此时正准备从另一个页面跳转到该页面

（正常情况如果代码有问题，应该会在控制台提示报错信息，但现在遇到了页面死循环的场景，这应该是一个bug）