# 被挂载的应用不会替换元素
非兼容

# 概述

在 Vue 2.x 中,当挂载一个具有 template 的应用时,被渲染的内容会替换我们要挂载的目标元素。在 Vue 3.x 中,被渲染的应用会作为子元素插入,从而替换目标元素的 innerHTML

# 2.x 语法

在 Vue 2.x 中,我们传入一个 HTML 元素选择器到 new Vue()$mount

new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  template: `
    <div id="rendered">{{ message }}</div>
  `
})

// 或
const app = new Vue({
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  template: `
    <div id="rendered">{{ message }}</div>
  `
})

app.$mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

当我们把应用挂载到拥有匹配被传入选择器 (在这个例子中是 id="app") 的 div 的页面时:

<body>
  <div id="app">
    Some app content
  </div>
</body>
1
2
3
4
5

在渲染结果中,被提到的 div 将会被应用内容所替换:

<body>
  <div id="rendered">Hello Vue!</div>
</body>
1
2
3

# 3.x 语法

在 Vue 3.x 中,当我们挂载一个应用时,其渲染内容会替换我们传递给 mount 的元素的 innerHTML

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  template: `
    <div id="rendered">{{ message }}</div>
  `
})

app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12

当这个应用挂载到拥有匹配 id="app"div 的页面时,结果会是:

<body>
  <div id="app" data-v-app="">
    <div id="rendered">Hello Vue!</div>
  </div>
</body>
1
2
3
4
5

# 迁移策略

迁移构建标记:GLOBAL_MOUNT_CONTAINER

# 参考