使用new Vue创建Vue 实例并使用$mount挂载到元素上(包括el选项和$mount区别)

1. new Vue({...}) 是创建一个新的 Vue 实例的方式。你可以通过传递一个选项对象来配置这个实例。常见的选项包括：
   •data：定义组件的数据属性。
   •el：指定 Vue 实例应该挂载到哪个 DOM 元素上（通常是一个选择器字符串，如 #app）。
   •methods：定义组件的方法。
   •computed：定义计算属性。
   •watch：定义观察者，监听数据的变化。
   •components：注册局部组件。
   •template 或 render：定义组件的模板或渲染函数。
2. $mount() 是 Vue 实例的一个方法，用于手动将 Vue 实例挂载到一个 DOM 元素上。它有两种使用方式：
   •$mount()：如果没有传入参数，Vue 会创建一个脱离文档流的元素，并将实例挂载到该元素上。你可以稍后将该元素插入到 DOM 中。
   •$mount(el)：传入一个 DOM 元素或选择器字符串（如 ‘#app’），Vue 会将实例挂载到指定的 DOM 元素上。
3. new Vue({...}).$mount() 的典型用法场景
   场景 1：动态创建并挂载组件假设你有一个 Vue 组件，但不想在页面加载时立即挂载它，而是根据某些条件动态创建并挂载。你可以使用 new Vue({…}).$mount() 来实现这一点。

// 动态创建并挂载组件
const MyComponent = {
  template: '<div>Hello, World!</div>',
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
};

// 创建 Vue 实例并挂载到 #app
new Vue({
  render: h => h(MyComponent)
}).$mount('#app');

在这个例子中，MyComponent 是一个 Vue 组件，我们通过 new Vue({...}).$mount('#app') 将它挂载到 #app 元素上。

场景 2：延迟挂载有时候你可能希望延迟挂载 Vue 实例，直到某个条件满足。你可以先创建 Vue 实例，然后在适当的时机调用 $mount() 来挂载它。

// 创建 Vue 实例，但不立即挂载
const vm = new Vue({
  data: {
    message: 'Hello, Vue!'
  },
  template: '<div>{{ message }}</div>'
});

// 延迟挂载
setTimeout(() => {
  vm.$mount('#app');
}, 2000);

在这个例子中，Vue 实例在 2 秒后才被挂载到 #app 元素上。

场景 3：挂载到脱离文档流的元素如果你不想立即将组件插入到 DOM 中，可以使用 $mount() 创建一个脱离文档流的元素，稍后再将其插入到 DOM 中。

// 创建 Vue 实例并挂载到一个脱离文档流的元素
const vm = new Vue({
  data: {
    message: 'Hello, Vue!'
  },
  template: '<div>{{ message }}</div>'
}).$mount();


// 稍后将该元素插入到 DOM 中
document.getElementById('app').appendChild(vm.$el);

在这个例子中，vm.$el 是 Vue 实例的根元素，你可以稍后将其插入到任何地方。

4. el 选项 vs $mount()
   在 Vue 2.x 中，el 选项和 $mount() 方法都可以用来挂载 Vue 实例，但它们有一些区别：
   •el 选项：当你在创建 Vue 实例时直接传递 el 选项，Vue 会立即挂载到指定的 DOM 元素上。这种方式适用于大多数简单的场景。

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  template: '<div>{{ message }}</div>'
});

•$mount() 方法：$mount() 提供了更多的灵活性，允许你在创建 Vue 实例后延迟挂载，或者挂载到脱离文档流的元素上。这在需要动态创建组件或延迟挂载的场景中非常有用。

const vm = new Vue({
  data: {
    message: 'Hello, Vue!'
  },
  template: '<div>{{ message }}</div>'
}).$mount('#app');

5. Vue 3 中的变化
   在 Vue 3 中，new Vue({...}) 的写法已经被移除，取而代之的是 createApp 函数。因此，在 Vue 3 中，你应该使用 createApp 来创建应用实例，并通过 mount 方法将其挂载到 DOM 元素上。

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');

如果你仍然想使用类似 new Vue({…}).$mount() 的写法，可以在 Vue 3 中使用 createApp 和 mount 的组合来实现类似的效果。