Vue.js

# Монтируемое приложение не заменяет элемент
кардинальное изменение

# Обзор

Во Vue 2.x при монтировании приложения у которого есть template, отрисованное содержимое будет заменять элемент, к которому монтируется. Во Vue 3.x отрисованное приложение добавляется дочерним к такому элементу, заменяя у элемента innerHTML.

# Синтаксис в 2.x

Во Vue 2.x передаётся селектор HTML-элемента в new Vue() или $mount:

new Vue({
  el: '#app',
  data() {
    return {
      message: 'Привет Vue!'
    }
  },
  template: `
    <div id="rendered">{{ message }}</div>
  `
})

// или
const app = new Vue({
  data() {
    return {
      message: 'Привет 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

При монтировании такого приложения на страницу, на которой будет div с указанным селектором (в данном случае id="app"):

<body>
  <div id="app">
    Какая-то информация приложения
  </div>
</body>
1
2
3
4
5

в результате указанный div будет заменён на содержимое отрисовываемого приложения:

<body>
  <div id="rendered">Привет Vue!</div>
</body>
1
2
3

# Синтаксис в 3.x

Во Vue 3.x при монтировании приложения его отрисовываемое содержимое будет заменять innerHTML элемента, который передаётся в mount:

const app = Vue.createApp({
  data() {
    return {
      message: 'Привет Vue!'
    }
  },
  template: `
    <div id="rendered">{{ message }}</div>
  `
})

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

При монтировании такого приложения на страницу, на которой будет div с указанным селектором (в данном случае id="app"), результат будет следующим:

<body>
  <div id="app" data-v-app="">
    <div id="rendered">Привет Vue!</div>
  </div>
</body>
1
2
3
4
5

# Стратегия миграции

Флаг сборки для миграции: GLOBAL_MOUNT_CONTAINER

# См. также

← Удалена опция propsData →