如何正确强制 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 条评论