Vue.js

# O aplicativo montado não substitui o elemento
breaking

# Visão Geral

No Vue 2.x, ao montar uma aplicação que tem um template, o conteúdo renderizado substitui o elemento em que montamos. No Vue 3.x, o aplicativo renderizado é anexado como filho de tal elemento, substituindo o innerHTML do elemento.

# Sintaxe v2.x

No Vue 2.x, passamos um seletor de elemento HTML para new Vue() ou $mount:

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

// ou
const app = new Vue({
  data() {
    return {
      message: 'Olá 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

Quando montamos esta aplicação na página que tem um div com o seletor passado (no nosso caso, é id="app"):

<body>
  <div id="app">
    Algum conteúdo de aplicativo
  </div>
</body>
1
2
3
4
5

no resultado renderizado, o div mencionado será substituído pelo conteúdo do aplicativo renderizado:

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

# Sintaxe v3.x

No Vue 3.x, quando montamos uma aplicação, seu conteúdo renderizado substituirá o innerHTML do elemento que passamos para mount:

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

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

Quando este aplicativo é montado na página que tem um div com id="app", isso resultará em:

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

# Estratégia de Migração

Sinalizador na compilação de migração: GLOBAL_MOUNT_CONTAINER

# Veja também

← propsData →