Différence entre .$mount() et el [Vue JS].

Question

Quelle est la différence entre ce code :

new Vue({
    data () {
        return {
            text: 'Hello, World'
        };
    }
}).$mount('#app')

et celui-ci :

new Vue({
    el: '#app',
    data () {
        return {
            text: 'Hello, World'
        };
    }
})

Je veux dire, quel est l'avantage d'utiliser .$mount() au lieu de el ou vice versa ?

Answer 1

$mount vous permet de monter explicitement l'instance Vue lorsque vous en avez besoin. Cela signifie que vous pouvez retarder le montage de votre instance Vue. vue jusqu'à ce qu'un élément particulier existe dans votre page ou qu'un processus asynchrone soit terminé, ce qui peut être particulièrement utile lorsque l'on ajoute Vue à des applications existantes qui injectent des éléments dans le DOM. J'ai également utilisé cette fonction fréquemment dans les tests ( Voir ici ) lorsque j'ai voulu utiliser la même instance Vue dans plusieurs tests :

// Create the vue instance but don't mount it
const vm = new Vue({
  template: '<div>I\'m mounted</div>',
  created(){
    console.log('Created');
  },
  mounted(){
    console.log('Mounted');
  }
});

// Some async task that creates a new element on the page which we can mount our instance to.
setTimeout(() => {
   // Inject Div into DOM
   var div = document.createElement('div');
   div.id = 'async-div';
   document.body.appendChild(div);

  vm.$mount('#async-div');
},1000)

Voici le JSFiddle : https://jsfiddle.net/79206osr/

Answer 2

Selon la documentation de l'API Vue.js sur vm.$mount() les deux sont fonctionnellement les mêmes, sauf que $mount puede (facultativement) être appelé sans sélecteur d'élément, ce qui entraîne le rendu du modèle Vue séparément du document (afin qu'il puisse être ajouté ultérieurement). Cet exemple est tiré de la documentation :

var MyComponent = Vue.extend({
  template: '<div>Hello!</div>'
})
// create and mount to #app (will replace #app)
new MyComponent().$mount('#app')

// the above is the same as:
new MyComponent({ el: '#app' })
// or, render off-document and append afterwards:
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

Answer 3

Dans l'exemple que vous donnez, je ne pense pas qu'il y ait vraiment de différence ou d'avantage. Cependant, dans d'autres situations, il peut y avoir un avantage. (Je n'ai jamais rencontré de situations comme celle qui suit).

1. Avec $mount() vous avez plus de flexibilité quant à l'élément sur lequel il sera sur lequel il sera monté si cela s'avérait nécessaire.

2. De même, si, pour une raison quelconque, vous devez instancier l'élément avant que vous ne sachiez réellement sur quel élément elle sera montée (peut-être un élément qui est créé dynamiquement), alors vous pourriez le monter plus tard en utilisant vm.$mount()

3. Dans le prolongement de ce qui précède, vous pouvez également utiliser mount lorsque vous devez décider à l'avance de l'élément à monter. devez décider à l'avance de l'élément sur lequel vous allez monter en partant du principe qu'il peut y avoir deux possibilités ou plus.

Quelque chose comme...

if(document.getElementById('some-element') != null){
      // perform mount here
}

Answer 4

La meilleure réponse est suffisante. J'ai juste laissé un commentaire ici car je n'ai pas assez de points de réputation. Alternativement :

 setTimeout(() => {
   const element = document.createElement('div');
   document.body.appendChild(element);

   vm.$mount(element);
}, 0)