Vue3中操作dom的四种方式，建议收藏！！！

在Vue 3中，操作DOM可以通过以下四种方式实现：

1. 模板指令: 使用内置指令如 v-if, v-for, v-show 等来操作DOM元素的显示。

<template>
  <div>
    <p v-if="show">This will be displayed if show is true</p>
    <p v-show="show">This will be displayed no matter what</p>
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      show: true,
      items: ['Item 1', 'Item 2', 'Item 3']
    };
  }
};
</script>

2. Ref属性: 使用ref属性在模板中标记一个元素，并通过组件的$refs对象访问该DOM元素。

<template>
  <div>
    <input ref="inputRef" type="text">
    <button @click="focusInput">Focus Input</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    focusInput() {
      this.$refs.inputRef.focus();
    }
  }
};
</script>

3. Composition API: 使用setup函数内的ref和onMounted等函数来操作DOM。

<template>
  <div>
    <input ref="inputRef" type="text">
  </div>
</template>
 
<script>
import { ref, onMounted } from 'vue';
 
export default {
  setup() {
    const inputRef = ref(null);
 
    onMounted(() => {
      inputRef.value.focus();
    });
 
    return { inputRef };
  }
};
</script>

4. 原生JavaScript: 在模板中使用事件监听器调用原生JavaScript函数来操作DOM。

<template>
  <div>
    <input type="text" @focus="handleFocus">
  </div>
</template>
 
<script>
export default {
  methods: {
    handleFocus(event) {
      // 操作DOM
      console.log(event.target.value);
    }
  }
};
</script>

以上四种方式是Vue 3中操作DOM的常见手段，开发者可以根据实际情况选择合适的方法。