vue实现部分刷新

Vue 实现部分刷新的方法

使用 v-if 或 v-show 控制显示

通过条件渲染动态切换 DOM 元素的显示与隐藏，避免整个页面重新加载。

<template>
  <div>
    <button @click="toggleContent">切换内容</button>
    <div v-if="showContent">需要刷新的内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showContent: false
    }
  },
  methods: {
    toggleContent() {
      this.showContent = !this.showContent
    }
  }
}
</script>

利用 computed 计算属性

计算属性会根据依赖的响应式数据自动更新，适合处理需要动态计算的数据。

<template>
  <div>
    <input v-model="inputValue" />
    <p>{{ computedValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  computed: {
    computedValue() {
      return this.inputValue.toUpperCase()
    }
  }
}
</script>

使用 watch 监听数据变化

通过监听特定数据的变化，执行相应操作实现局部更新。

<template>
  <div>
    <input v-model="searchQuery" />
    <div>{{ searchResults }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      searchResults: ''
    }
  },
  watch: {
    searchQuery(newVal) {
      this.searchResults = `正在搜索: ${newVal}`
    }
  }
}
</script>

动态组件切换

使用 <component :is="currentComponent"> 实现不同组件的动态加载和切换。

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">组件A</button>
    <button @click="currentComponent = 'ComponentB'">组件B</button>
    <component :is="currentComponent" />
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: { ComponentA, ComponentB },
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  }
}
</script>

使用 Vuex 管理状态

通过 Vuex 集中管理应用状态，组件可以响应状态变化实现局部更新。

// store.js
import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

<!-- 组件中使用 -->
<template>
  <div>
    <p>{{ $store.state.count }}</p>
    <button @click="$store.commit('increment')">增加</button>
  </div>
</template>

通过 $forceUpdate 强制更新

在极少数需要强制重新渲染组件的情况下使用，不推荐常规使用。

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '原始消息'
    }
  },
  methods: {
    updateMessage() {
      this.message = '新消息'
      this.$forceUpdate()
    }
  }
}
</script>

使用 key 属性强制重新渲染

通过改变 key 值强制组件重新渲染，适用于需要完全重置组件状态的场景。

<template>
  <div>
    <ChildComponent :key="componentKey" />
    <button @click="refreshComponent">刷新组件</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  data() {
    return {
      componentKey: 0
    }
  },
  methods: {
    refreshComponent() {
      this.componentKey += 1
    }
  }
}
</script>