vue-强制更新组件

使用 ：key

1. 常用的使用方法v-for 结合使用

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

唯一的key值在做虚拟DOM算法时尤为重要

2. 触发子组件并进行更新组件让其发生变化

 <childrenComponents v-model="files" :key="uploadKey" />

在页面子组件加载完成之后，在特殊情况下更改files，子组件内部监听不到files的变化。在其子组件上面加上 :key="uploadKey" 

uploadKey = Date.now()  通过获取当前的实时时间作为唯一值来触发子组件的更新或局部重新加载

 

使用v-if

1. 在对应组件上添加<components  v-if="show"></components>

const show = ref(true);

const update = () => {
    show.value = false;
    setTimeout(() => {
        show.value = true;
    }, 0);
};

使用异步操作动态加载组件渲染与重载

总结：在Vue中，通常不需要强制更新组件，因为Vue的响应式系统会自动追踪依赖并在数据变化时自动更新视图。然而，基于时间、条件等现实情况下，我们有时迫不得已需要强制更新组件，解决一些难以处理的问题。主要方法就是使用v-if或者更新组件的key值