. $ mount ()와 el [Vue JS]의 차이점

이 코드의 차이점은 무엇입니까?

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

그리고 이것:

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

.$mount()대신 사용 el하거나 그 반대로 사용하면 어떤 이점이 있습니까?

$mount필요할 때 Vue 인스턴스를 명시 적으로 마운트 할 수 있습니다. 즉, vue페이지에 특정 요소가 존재하거나 일부 비동기 프로세스가 완료 될 때까지 인스턴스 마운트를 지연 할 수 있습니다. 이는 DOM에 요소를 삽입하는 레거시 앱에 vue를 추가 할 때 특히 유용 할 수 있습니다. 여러 테스트에서 동일한 vue 인스턴스를 사용하고 싶을 때 자주 테스트 ( 여기 참조 ) :

// 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)

다음은 JSFiddle입니다 : https://jsfiddle.net/79206osr/

의 Vue.js API 문서에 따르면 vm.$mount()둘은 기능적으로 동일합니다. 단 , 요소 선택기없이 (선택적으로) 호출 $mount 할 수 있다는 점을 제외 하면 Vue 모델이 문서와 별도로 렌더링되므로 나중에 추가 할 수 있습니다. . 이 예제는 문서에서 가져온 것입니다.

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)

귀하가 제공하는 예에서 실제로 많은 차이나 이점이 있다고 생각하지 않습니다. 그러나 다른 상황에서는 이점이있을 수 있습니다. (다음과 같은 상황을 경험 한 적이 없습니다).

1. 으로 $mount()당신이 이제까지 필요하다고했다 그 경우에 장착됩니다 어떤 요소에 더 많은 유연성을 가지고있다.

2. 마찬가지로 어떤 이유로 인스턴스가 마운트 될 요소 (동적으로 생성되는 요소 일 수 있음)를 실제로 알기 전에 인스턴스를 인스턴스화해야하는 경우 나중에 다음을 사용하여 마운트 할 수 있습니다. vm.$mount()

3. 위와 함께 두 개 이상의 가능성이 있다고 가정하여 마운트 할 요소를 미리 결정해야 할 때도 마운트를 사용할 수 있습니다.

뭔가 ...

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

최고의 답변으로 충분합니다. 평판 포인트가 충분하지 않아 여기에 댓글을 남겼습니다. Alternativley :

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

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