Vue3中操作dom的四种方式总结(建议收藏!)

关于Vue3中操作dom的四种方式总结，建议收藏！这个主题，我们可以分成四个部分来介绍。

直接操作DOM（不推荐）

我们先来看第一种方式，直接操作DOM。在Vue3中，这种方式已经不再被推荐使用。由于直接操作DOM可能会造成状态和视图的不一致，可能还会影响性能。不过我们还是需要知道如何使用这种方式，以便我们可以避免它。

在Vue3中，我们可以使用 ref 来获取DOM元素，然后使用一些DOM操作方法来直接修改DOM。

示例：

<template>
  <div ref="box">示例DOM操作</div>
</template>
<script>
import {ref} from 'vue'
export default {
  setup(){
    const box = ref(null)
    setTimeout(() => {
      box.value.innerHTML = '我就是示例DOM操作'
    }, 1000)
    return {box}
  }
}
</script>

在这个示例中，我们通过 ref 获取了 template 中的 div 元素，并使用 setTimeout 方法在一秒钟后将 div 元素的 innerHTML 修改为“我就是示例DOM操作”。

通过 v-html 指令操作DOM

第二种方式是使用 v-html 指令来渲染HTML元素。在Vue3中，这种方式比直接操作DOM更加安全、灵活，并且不会影响性能。你可以使用这种方式将一段HTML代码渲染到指定的元素中。

示例：

<template>
  <div v-html="htmlCode"></div>
</template>
<script>
export default {
  data(){
    return {
      htmlCode: '<p>我就是示例v-html操作</p>'
    }
  }
}
</script>

在这个示例中，我们将 data 中的 htmlCode 属性绑定到 div 元素的 v-html 指令上，从而在div元素中渲染一段HTML代码“

我就是示例v-html操作

”。

需要注意的是，在使用 v-html 指令时，需要确保你所渲染的HTML代码是安全的，否则可能会有安全问题。

通过指令操作元素属性

第三种方式是使用指令来操作元素的属性。Vue3中的指令可以对元素的属性、class、style等进行操作，并且更加灵活、可扩展。

示例：

<template>
  <div v-color:red>我就是示例指令操作属性</div>
</template>
<script>
import {directive} from 'vue'
export default {
  directives: {
    color: {
      mounted(el, binding) {
        el.style.color = binding.value
      }
    }
  }
}
</script>

在这个示例中，我们定义了一个名为 color 的指令，该指令在挂载后会将元素的文字颜色修改为指令的 value 值（这个 value 的值为‘red’）。

需要注意的是，当我们使用指令时，必须先通过 import 引入 vue，然后使用 directive 方法来定义指令，并通过 directives 属性将指令绑定到组件上。

通过组件封装操作元素

最后一种方式是使用组件的方式封装操作元素的方法。通过组件的方式可以将DOM操作代码进行封装，使得代码更加可复用和可扩展。

示例：

<template>
  <button @click="handleClick">点我示例组件操作元素</button>
  <text-change text="这是文本"></text-change>
</template>
<script>
import TextChange from './components/TextChange'
export default {
  components: {
    TextChange
  },
  methods: {
    handleClick(){
      this.$refs.text.changeText('我就是示例组件操作元素')
    }
  }
}
</script>

在这个示例中，我们通过 components 属性将 TextChange 组件注册为当前组件的子组件，并在组件中使用 $refs 来获取到 TextChange 组件实例，在 handleClick 方法中调用 TextChange 组件的 changeText 方法来修改 TextChange 组件中的 text 属性。

需要注意的是，当我们将代码封装为组件时，需要确保每个组件的功能相对独立，并且需要遵守Vue组件设计原则。