常常出现的项目bug

项目场景：

Vue中有获取dom的属性ref，ref可能会引起bug，甚至都不会在测试环境中发现。还有对数组的操作，也是常常会出现的bug。以下就是对这两种问题的描述和修复。

---

问题描述

在一个input标签上同时使用v-if指令和ref属性

代码如下：

<input
 ref="input"
 v-if="inputLabel"
/>

当inputLabel为false时，使用this.$refs.input.value是获取不到的，会产生TypeError: Cannot set properties of undefined (setting 'value')报错

解决方案：

// 判空
function isEmpty(val){
    return val === null || val === undefined || (typeof val === 'string' ?val.length === 0 : false)
  }

// 先判空再取值
if(!isEmpty(this.$refs.input)){
    const value = this.$refs.input.value;
}

---

问题描述：

在一个空数组上获取值

 代码如下：

const arr = [];
const value = arr[0].value;

报错：Uncaught TypeError: Cannot read properties of undefined (reading 'value')

解决方案：

const arr = [];
if(Array.isArray(arr)&&arr.length>0){
    const value = arr[0].value;
}

---

提示：写完代码后一定要检查数组和ref值的呀，进行判空处理，很多时候测试老师测不出来的，上线出现问题了，就要扣绩效了！其实是很小的错❌，所以写完代码后一定要检查这些可以避免掉了问题！