当前位置：首页 > VUE

vue 实现动态更新dom

2026-02-24 19:00:10VUE

Vue 动态更新 DOM 的方法

Vue 的核心特性之一是响应式数据绑定，能够自动根据数据变化更新 DOM。以下是几种常见的动态更新 DOM 的方式：

数据驱动视图更新

Vue 通过响应式系统监听数据变化，当数据发生变化时，自动重新渲染相关的 DOM 部分。

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

<script>
export default {
  data() {
    return {
      message: '初始消息'
    }
  },
  methods: {
    updateMessage() {
      this.message = '更新后的消息'
    }
  }
}
</script>

条件渲染

使用 v-if、v-else 和 v-show 指令可以根据条件动态显示或隐藏 DOM 元素。

vue 实现动态更新dom

<template>
  <div>
    <p v-if="showMessage">显示的消息</p>
    <button @click="toggleMessage">切换显示</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMessage: true
    }
  },
  methods: {
    toggleMessage() {
      this.showMessage = !this.showMessage
    }
  }
}
</script>

列表渲染

使用 v-for 指令可以动态渲染列表数据，当列表数据变化时，DOM 会自动更新。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="addItem">添加项目</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' }
      ]
    }
  },
  methods: {
    addItem() {
      this.items.push({ id: this.items.length + 1, name: `项目${this.items.length + 1}` })
    }
  }
}
</script>

动态组件

使用 <component> 标签和 is 属性可以动态切换组件。

vue 实现动态更新dom

<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="toggleComponent">切换组件</button>
  </div>
</template>

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

export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  },
  components: {
    ComponentA,
    ComponentB
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'
    }
  }
}
</script>

强制更新

在极少数情况下，可能需要强制 Vue 重新渲染组件，可以使用 $forceUpdate 方法。

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="forceUpdate">强制更新</button>
  </div>
</template>

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

使用 `key` 强制重新渲染

通过改变 key 的值，可以强制 Vue 重新渲染组件或元素。

<template>
  <div>
    <p :key="keyValue">{{ message }}</p>
    <button @click="reRender">重新渲染</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '初始消息',
      keyValue: 0
    }
  },
  methods: {
    reRender() {
      this.keyValue += 1
    }
  }
}
</script>