La différence entre les .$mount() et el [Vue JS]

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 dans l'utilisation de .$mount() au lieu de el ou vice-versa?

OriginalL'auteur yierstem | 2017-10-19

  1. 30

    $mount vous permet explicitement de monter la Vue de l'instance lorsque vous en avez besoin. Cela signifie que vous pouvez retarder le montage de votre vue instance jusqu'à ce qu'un élément particulier qui existe dans votre page ou certains asynchrone est terminée, ce qui peut être particulièrement utile lors de l'ajout de vue de l'héritage des applications qui injecter des éléments dans le DOM, j'ai aussi utilisé fréquemment dans les tests (Voir Ici) lorsque j'ai voulu utiliser la même vue de l'instance à travers de multiples 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/

    OriginalL'auteur craig_h

  2. 11

    Selon l'Vue.js les docs de l'API sur vm.$mount(), les deux sont fonctionnellement le même, sauf que $mount peut (éventuellement) être appelé sans un sélecteur d'élément, ce qui provoque la Vue de modèle afin d'être rendu distinct du document (de sorte qu'il peut être ajouté plus tard). Cet exemple est à partir 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)
    Bon point qui n'a pas été considérés dans l'acceptation de réponse
    Si vous avez utilisé la vue sous-classe (à Vue.étendre) avec el, vous obtenez dans la console: [Vue avertir]: option "el" ne peut être utilisé pendant la création de l'instance avec le new mot-clé. .$mont de ne pas afficher cet avertissement.

    OriginalL'auteur ContinuousLoad

  3. 3

    Dans l'exemple que vous fournissez, je ne crois pas qu'il y a vraiment beaucoup d'une différence ou d'avantage. Cependant, dans d'autres situations, il peut être un avantage. (Je n'ai jamais rencontré de telles situations suivantes).

    1. Avec $mount() vous avez plus de souplesse quel élément il sera
      monté sur si c'était à jamais nécessaire.

    2. De même vous si pour quelque raison vous avez besoin d'instancier la
      exemple avant de savoir quel élément il sera monté sur
      (peut-être un élément qui est créé dynamiquement) ensuite, vous pouvez monter
      plus tard à l'aide vm.$mount()

    3. Suivantes, de même que le ci-dessus, vous pouvez utiliser également l'utilisation de montage lorsque vous
      besoin de prendre une décision avant que la main de l'élément de support à l'
      en supposant qu'il peut y avoir deux ou plus de possibilités.

    Quelque chose comme...

    if(document.getElementById('some-element') != null){
      //perform mount here
}
    Point numéro 3 peut être fait sans $mount() trop.

    OriginalL'auteur skribe