Vue.js Vue 3 向DOM中追加组件：最佳实践

在本文中，我们将介绍Vue.js Vue 3中向DOM中追加组件的最佳实践。在Vue 3版本中，新增了createApp和mountAPI，使得向DOM中追加组件变得更加简单和灵活。我们将通过一些示例来演示如何正确地使用这些API来追加组件到DOM中。

阅读更多：Vue.js 教程

创建Vue实例并追加到DOM中

在Vue 3中，我们使用createApp方法来创建Vue实例，并使用mount方法将Vue实例挂载到DOM节点上。以下是一个示例：

// 创建Vue实例
const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
})

// 将Vue实例挂载到DOM节点上
app.mount('#app')

在上面的示例中，我们创建了一个Vue实例，然后使用mount方法将该实例挂载到一个ID为app的DOM节点上。这样Vue实例中的组件就会被渲染到该DOM节点中。

动态追加组件到DOM中

有时我们需要在运行时动态地向DOM中追加组件，而不是在初始化时就将组件追加到DOM中。Vue 3提供了createApp().component()方法来实现动态追加组件到DOM中。以下是一个示例：

const app = Vue.createApp({})

app.component('my-component', {
  template: '<div>My Component</div>'
})

// 创建Vue实例
const vm = app.mount('#app')

// 动态追加组件到DOM中
const myComponent = Vue.createApp({}).component('my-component')
myComponent.mount(document.querySelector('#component-container'))

在上面的示例中，我们首先创建了一个Vue实例，并注册了一个名为my-component的组件。接下来，我们使用createApp().component()方法动态创建了一个my-component实例，并将它挂载到ID为component-container的DOM节点上。

追加组件到指定位置

除了动态追加组件到DOM中，有时候我们还需要将组件追加到特定的位置，而不是直接追加到根节点下。Vue 3的mount方法支持传入一个可选的target参数来指定挂载的目标节点。以下是一个示例：

const app = Vue.createApp({})

app.component('my-component', {
  template: '<div>My Component</div>'
})

// 创建Vue实例
const vm = app.mount('#app')

// 追加组件到指定位置
const targetNode = document.querySelector('#target-node')
vm.$mount(targetNode)

在上面的示例中，我们将Vue实例挂载到ID为app的DOM节点上。接下来，我们创建了一个目标节点target-node，然后使用vm.$mount(targetNode)将Vue实例追加到该节点下。

从DOM中移除组件

有时候我们需要将已经追加到DOM中的组件移除。Vue 3的unmount方法可以帮助我们实现将组件从DOM中移除的功能。以下是一个示例：

const app = Vue.createApp({})

// 创建Vue实例
const vm = app.mount('#app')

// 追加组件到DOM中
const myComponent = Vue.createApp({}).component('my-component')
myComponent.mount(document.querySelector('#component-container'))

// 从DOM中移除组件
myComponent.unmount()

在上面的示例中，我们首先将Vue实例挂载到ID为app的DOM节点上。然后，我们使用createApp().component().mount()方法将一个组件追加到ID为component-container的DOM节点上。最后，我们使用unmount方法将该组件从DOM中移除。