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

.$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 문서에 따르면 두 개의 API는 기능적으로 동일하지만$mount 요소 선택기 없이 (선택사항) 호출할 수 있습니다. 그러면 Vue 모델이 문서와 별도로 렌더링되므로 나중에 추가할 수 있습니다.다음 예시는 docs에서 나온 것입니다.

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)

언급URL : https://stackoverflow.com/questions/46831452/difference-between-mount-and-el-vue-js