vue实现动态刷新
Vue 实现动态刷新方法
使用 v-if 或 v-show 控制显示
通过条件渲染指令动态切换组件或元素的显示状态，触发重新渲染。
<template>
<div>
<button @click="toggle">Toggle Content</button>
<div v-if="isVisible">动态内容</div>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true
}
},
methods: {
toggle() {
this.isVisible = !this.isVisible;
}
}
}
</script>使用 key 属性强制重新渲染
通过改变 key 值强制 Vue 重新创建组件实例。
<template>
<div>
<button @click="refresh">Refresh Component</button>
<ChildComponent :key="componentKey" />
</div>
</template>
<script>
export default {
data() {
return {
componentKey: 0
}
},
methods: {
refresh() {
this.componentKey += 1;
}
}
}
</script>使用 Vue.set 或 this.$set 响应式更新
确保对象或数组的更新是响应式的，触发视图刷新。
// 对象更新
this.$set(this.someObject, 'newProperty', 'value');
// 数组更新
this.$set(this.someArray, index, newValue);使用 watch 监听数据变化
通过监听数据变化执行自定义逻辑，间接实现动态刷新。
export default {
data() {
return {
counter: 0
}
},
watch: {
counter(newVal) {
console.log('Counter changed:', newVal);
// 执行刷新逻辑
}
},
methods: {
increment() {
this.counter += 1;
}
}
}使用 computed 计算属性
通过计算属性动态生成数据，依赖项变化时自动更新。
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`;
}
}
}使用 $forceUpdate 强制更新
直接调用该方法强制组件重新渲染，慎用。
export default {
methods: {
forceRefresh() {
this.$forceUpdate();
}
}
}使用异步更新队列
通过 nextTick 确保在 DOM 更新后执行操作。
export default {
methods: {
updateData() {
this.someData = 'new value';
this.$nextTick(() => {
// DOM 已更新
});
}
}
}使用 Provide/Inject 跨层级刷新
通过依赖注入机制触发深层嵌套组件的更新。
// 父组件
export default {
provide() {
return {
refreshData: this.refreshData
}
},
methods: {
refreshData() {
// 更新逻辑
}
}
}
// 子组件
export default {
inject: ['refreshData'],
methods: {
handleClick() {
this.refreshData();
}
}
}
