这是我自己写代码的时候出现的一个问题，就是当我用elementUI组件，使用下拉框el-select来展示数据的时候，第一次输入，下拉列表出现，你选择一个是正常的，然后你继续选择的时候，当你的鼠标移到这个下拉框上的时候，控制台就报错Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘insertBefore’)，截图如下
然后我看了这个错误看半天，表示自己从没在代码中有写过这些，然后我就去自己百度了下，百度说出现这种情况有如下几种原因：
1、v-if 导致
在 v-if 值为 false 时，如果操作了 v-if 控制的 DOM，可能会因为该 DOM 元素不存在而报错。
解决方案：v-show 替换 v-if
2、el-dialog 组件导致
默认弹框是关闭的，DOM中没有弹框中的内容。打开弹框再关闭后，弹框中的 DOM 元素没有被销毁，可能会因为不该存在的 DOM 元素而报错（我的报错就是由此导致）。
解决方案：给 el-dialog 组件增加 destroy-on-close 属性
3、el-table 组件导致
el-table-column渲染时报错，若 scope.row.field（field为任意字段值）不存在，对其直接执行 length、toString() 等方法而报错。
解决方案：scope.row.field?.length

看到以上的解决办法之后我就返回到我的代码中去看，发现果然在我的代码中有出现了一个v-if，而且这个v-if控制的DOM不存在，但是我却是去操作了它，所以导致了后面的一系列错误，而且还是时有时无的错误，我是通过注释，把代码一行一行的注释掉，才发现这个错误的，没办法，像这种类似DOM渲染出现问题的，就只能这样，一步一步来注释寻找问题，最后我把那个v-if改成v-show的就可以了，这也说明了v-if操作出现的问题还是挺严重的，而且又因为我那个页面是很多表格一起的，接口请求也多，刚开始我还以为是异步造成的，于是我通过(async和await这俩个)把异步操作全部转化成同步操作，但是后来发现不是这个问题，于是就退回去看之前的代码，才发现问题所在。及时处理好问题。
关于通过异步 .then(res=>{}) 转化成 同步 async 和 await 之如何转化，比如接口名字叫getListInfo
异步操作是：

getList(){
let data = {
id:item.id,
name:item.name
}
getListInfo(data).then(res=>{
if(res.code === 200){
// 你要进行的操作
console.log(res.data)
}
}).catch(err => {
console.log(err)
})
}
//其他地方调用getList这个方法
this.getList();

转化为同步操作(async和await)，代码如下

async getList(){
let data = {
id:item.id,
name:item.name
}
try{
let res = await getListInfo(data);
if(res.code === 200){
// 你要进行的操作
console.log(res.data)
}
}catch(err){
console.log(err)
}
}

以上是我的一些有遇到的关于的异步调用转化为同步调用，更多有关于异步和同步的文档，可以自行百度，我这里只是顺带一提。