如何正确强制 Vue 组件重新渲染 v-if 和 forceupdate 和 key
Vue 是一个多功能且可逐步采用的 JavaScript UI 框架, 只要 JavaScript 状态发生变化，Vue 就会自动更新 DOM。然而，在某些情况下，我们可能需要重新渲染各个组件，避免重新加载整个页面。
1. 什么时候应该在 Vue 中强制更新？
有时，有必要在 Vue 中强制更新，以确保 UI 反映最新的数据或状态更改。让我们回顾一下在 Vue 中强制更新可能合适的一些常见场景或用例。
External events 外部事件
Custom watchers 自定义观察者
Third-party integration 第三方集成
Dynamic styling 动态造型
Changes to non-reactive data 对非反应性数据的更改
Performance optimization 性能优化
Legacy codebase 遗留代码库
Direct DOM manipulation 直接 DOM 操作
2. 热重载
热重可以更新该组件的所有实例，而不刷新页面，有下面三个方法
v-if 指令（常用）
只有当 v-if 的条件为 true 时，才会渲染这个组件。
<template> <MyComponent v-if="renderComponent" /> </template>
脚本为
export default {
data() {
return {
renderComponent: true,
};
},
methods: {
async forceRender() {
// Remove MyComponent from the DOM
this.renderComponent = false;
// Then, wait for the change to get flushed to the DOM
await this.$nextTick();
// Add MyComponent back in
this.renderComponent = true;
}
}
};vue 内置 forceUpdate 方法
正如 Vue 官方文档所推荐的，内置forceUpdate方法是手动更新组件的最佳方法之一。
export default {
methods: {
ForcesUpdateComponent() {
// our code
this.$forceUpdate(); // Notice we have to use a $ here
// our code
}
}
}该方法仅存在于组件实例上，因此我们需要发挥一点创意来使用 Vue 3 的 Composition API 来调用它：
import { getCurrentInstance } from 'vue';
const methodThatForcesUpdate = () => {
// our code
const instance = getCurrentInstance();
instance.proxy.forceUpdate();
// our code
};使用 key （常用）
我们给组件提供一个 key 属性来通知 Vue 特定组件连接到特定数据。 如果 key保持不变，则组件不会更改。如果 key 发生变化，Vue 就会知道它需要删除以前的组件并生成一个新组件。
<template>
<MyComponent :key="componentKey" />
</template>
export default {
data() {
return {
componentKey: 0,
};
},
methods: {
forceRender() {
this.componentKey += 1;
}
}
}摘自
https://blog.logrocket.com/correctly-force-vue-component-re-render/
0顶
0 踩
共 0 条评论