[vue] 第1361天 在vue3中如何操作DOM？

[haizhilin2013]

第1361天 在vue3中如何操作DOM？

3+1官网

我也要出题

[927884591]

一般推荐使用ref去操作原生DOM

<template>
  <div ref="divRef"></div>
</template>
<script setup>
  //导入ref
 //...
  const divRef = ref(null)
  console.log(divRef)
</script>

[xcGoGo2]

ref

[wenjieObject]

ref

[hellowolrds]

对元素添加了ref属性，声明一个与ref属性名称相同的变量xxxRef，然后我们通过 xxxRef.value 的形式即可获取该div元素

[ShihHsing]

在Vue 3中，操作DOM的方式与Vue 2有所不同。Vue 3使用了新的API——Composition API，它提供了一些新的函数和钩子，可以更方便地操作DOM。

下面是一些在Vue 3中操作DOM的方法：

1. ref

ref 是一个新的函数，用于在模板中引用DOM元素或组件实例。在组件中使用 ref 时，它会返回一个响应式的对象，该对象包含了DOM元素或组件实例。可以通过该对象来访问DOM元素或组件实例的属性和方法。

<template>
  <div>
    <button ref="myButton" @click="handleClick">Click me</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const myButton = ref(null);

    function handleClick() {
      myButton.value.innerText = 'Button clicked';
    }

    return {
      myButton,
      handleClick,
    };
  },
};
</script>

在上面的代码中，使用 ref 函数来引用按钮元素，并在 setup 函数中定义了一个 handleClick 函数，当按钮被点击时，它会将按钮的文本内容修改为 'Button clicked'。

2. reactive

reactive 是一个新的函数，用于创建响应式的对象。可以使用 reactive 函数来创建一个包含DOM元素属性的响应式对象，然后在组件中使用该对象来操作DOM元素。

<template>
  <div>
    <input v-model="myInput.value" />
    <p>{{ myInput.value }}</p>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const myInput = reactive({
      value: '',
    });

    return {
      myInput,
    };
  },
};
</script>

在上面的代码中，使用 reactive 函数来创建一个包含 value 属性的响应式对象 myInput，然后在模板中使用 v-model 指令来绑定输入框的值，并在模板中使用 myInput.value 来显示输入框的值。

3. onMounted

onMounted 是一个新的钩子函数，用于在组件挂载后执行一些操作。可以使用 onMounted 函数来操作DOM元素，例如添加事件监听器、修改DOM元素的样式等。

<template>
  <div>
    <button ref="myButton">Click me</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const myButton = ref(null);

    onMounted(() => {
      myButton.value.addEventListener('click', () => {
        console.log('Button clicked');
      });
    });

    return {
      myButton,
    };
  },
};
</script>

在上面的代码中，使用 ref 函数来引用按钮元素，并在 onMounted 钩子函数中添加了一个点击事件监听器，当按钮被点击时，它会在控制台中输出 'Button clicked'。

总结

在Vue 3中，可以使用 ref、reactive 和 onMounted 等新的函数和钩子来操作DOM元素。这些新的API使得操作DOM更加方便和灵活。