在js中的appendChild在vue3中如何使用

在Vue 3中，可以使用 `setup()` 函数中的 `ref` 和 `reactive` 来创建响应式数据，并在模板中使用它们。要向DOM中添加元素，可以使用 `createApp()` 函数的返回值中的 `$el` 属性来获取根DOM节点，并使用原生JS的 `appendChild()` 方法将新元素添加到根节点中。

示例代码如下：

<template>
  <div ref="root"></div>
</template>

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

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

    // 在mounted钩子中向root节点添加元素
    const mounted = () => {
      const newElement = document.createElement('div');
      newElement.innerHTML = 'Hello World';
      root.value.appendChild(newElement);
    };

    return {
      root,
      mounted
    };
  },

  mounted() {
    this.mounted();
  }
};
</script>

在上述示例中，我们在 `setup()` 函数中创建了一个 `ref` 类型的 `root` 变量，它引用了模板中的根节点。然后，我们定义了一个 `mounted()` 函数，在组件挂载后调用该函数，并使用 `appendChild()` 方法向根节点添加了一个新元素。最后，在 `mounted()` 钩子中调用了 `mounted()` 函数以触发添加元素的操作。