v-loading=“loading“与v-if不要同时用

在 Vue 中，v-loading 是一个自定义指令，它可以用于在数据加载的过程中显示一个 loading 状态。和 v-if 指令不同的是，v-loading 指令并不会影响组件或元素的显示或隐藏，而是用来控制 loading 状态的显示或隐藏。

因此，如果你同时使用 v-loading 和 v-if 指令，会导致两个指令互相干扰，从而出现意想不到的结果。

例如，如果你在一个组件中使用了 v-if 指令来控制组件的显示和隐藏，并且在该组件中使用了 v-loading 指令来控制加载状态的显示和隐藏，那么在组件需要重新渲染时，v-if 指令会先将该组件从 DOM 中移除，然后再重新渲染该组件。这个过程会导致 v-loading 指令失效，从而出现 loading 状态无法正常显示的问题。

为了避免这种情况的发生，你应该尽量避免在同一个组件或元素上同时使用 v-loading 和 v-if 指令。如果你需要在组件中控制 loading 状态的显示和隐藏，可以考虑使用其他的方法，例如在组件中添加一个 loading 组件，或者使用父子组件之间的通信来实现。

//可以再嵌套一层div来写loading，如下：

<div v-loading="loading">
	<div v-if="list.length">
	</div>
</div>