Sự khác biệt giữa. $ Mount () và el [Vue JS]

Sự khác biệt giữa mã này là gì:

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

và cái này nữa:

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

Ý tôi là lợi ích của việc sử dụng .$mount()thay vì elhoặc ngược lại là gì?

$mountcho phép bạn mount instance Vue một cách rõ ràng khi bạn cần. Điều này có nghĩa là bạn có thể trì hoãn việc gắn phiên bản của mình vuecho đến khi một phần tử cụ thể tồn tại trong trang của bạn hoặc một số quá trình không đồng bộ kết thúc, điều này có thể đặc biệt hữu ích khi thêm vue vào các ứng dụng kế thừa đưa các phần tử vào DOM, tôi cũng đã sử dụng điều này thường xuyên trong thử nghiệm ( Xem Tại đây ) khi tôi muốn sử dụng cùng một phiên bản vue trong nhiều thử nghiệm:

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

Đây là JSFiddle: https://jsfiddle.net/79206osr/

Theo tài liệu API Vue.js trên vm.$mount(), cả hai đều giống nhau về mặt chức năng, ngoại trừ $mount có thể (tùy chọn) được gọi mà không có bộ chọn phần tử, điều này khiến mô hình Vue được hiển thị tách biệt với tài liệu (vì vậy nó có thể được thêm vào sau) . Ví dụ này là từ tài liệu:

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)

Trong ví dụ bạn cung cấp, tôi không tin rằng thực sự có nhiều khác biệt hoặc lợi ích. Tuy nhiên, trong các tình huống khác có thể có một lợi ích. (Tôi chưa bao giờ gặp phải những trường hợp như sau).

1. Với việc $mount()bạn linh hoạt hơn, nó sẽ được gắn vào phần tử nào nếu điều đó là cần thiết.

2. Tương tự như vậy, nếu vì lý do nào đó bạn cần khởi tạo phiên bản trước khi bạn thực sự biết nó sẽ được gắn trên phần tử nào (có thể là một phần tử được tạo động) thì bạn có thể gắn nó sau bằng cách sử dụng vm.$mount()

3. Cùng với những điều trên, bạn cũng có thể sử dụng mount khi bạn cần đưa ra quyết định trước khi sử dụng phần tử nào để gắn kết với giả định rằng có thể có hai hoặc nhiều khả năng.

Cái gì đó như...

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

Câu trả lời hàng đầu là đủ tốt. chỉ để lại một bình luận ở đây vì tôi không có đủ điểm danh tiếng. Alternativley:

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

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