Skip to content
The translation is synced to the docs on of which the commit hash is 8a7fb04.

Mudanças da API de Montagem
rutura

Visão Geral

A aplicação montada não substitui o elemento.

Na Vue 2.x, quando montamos uma aplicação que tem um template, o conteúdo interpretado substitui o elemento para qual montámos. Na Vue 3.x, a aplicação interpretada é anexada como um filho de tal elemento, substituindo a innerHTML do elemento.

Sintaxe da 2.X

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

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

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

app.$mount('#app')

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

html
<body>
  <div id="app">
    Some app content
  </div>
</body>

no resultado interpretado, o div mencionado será substituído com o conteúdo da aplicação interpretada:

html
<body>
  <div id="rendered">Hello Vue!</div>
</body>

Sintaxe da 3.x

Na Vue 3.x, quando montamos uma aplicação, o seu conteúdo interpretado substituído a innerHTML do elemento passamos à mount:

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

app.mount('#app')

Quando esta aplicação é montada à página que tem um div com o id="app", isto resultará em:

html
<body>
  <div id="app" data-v-app="">
    <div id="rendered">Hello Vue!</div>
  </div>
</body>

Estratégia de Migração

Opção da Construção de Migração: GLOBAL_MOUNT_CONTAINER

Consulte Também