web-dev-qa-db-fra.com

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

Quelle est la différence entre ce code:

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

et celui-là:

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?

vue.jsvuejs2
49
yierstem

$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 jusqu’à ce qu’un élément particulier existe dans votre page ou certains processus asynchrones sont terminés, ce qui peut être particulièrement utile lors de l'ajout de vue aux applications héritées qui injectent des éléments dans le DOM), je l'ai également utilisé fréquemment lors des tests ( voir ici ) quand 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/

44
craig_h

Selon les documents de l'API Vue.js sur vm.$mount() , les deux sont identiques d'un point de vue fonctionnel, sauf que $mount peut (éventuellement) être appelé sans sélecteur d’élément, ce qui rend le modèle Vue séparé de le document (il peut donc être ajouté plus tard). 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)
20
ContinuousLoad

Dans l'exemple que vous donnez, je ne crois pas qu'il y ait vraiment beaucoup 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-ci).

  1. Avec $mount() vous avez plus de flexibilité sur l'élément sur lequel il sera monté si cela devait être nécessaire.

  2. De même, si, pour une raison quelconque, vous devez instancier l’instance avant de savoir sur quel élément elle sera montée (peut-être un élément créé de manière dynamique), vous pourrez le monter ultérieurement à l’aide de vm.$mount().

  3. En plus de ce qui précède, vous pouvez également utiliser mount si vous devez décider au préalable quel élément monter, en supposant qu’il puisse y avoir deux possibilités ou plus.

Quelque chose comme...

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