Vue2-$mount与$destroy$mount 是 Vue 实例的一个方法，用于手动将 Vue 实例挂载到指定的元

1# `$mount` 与 `$destroy`

$mount 是 Vue 实例的一个方法，用于手动将 Vue 实例挂载到指定的元素上。通过调用 $mount 方法，可以更灵活地控制 Vue 实例的挂载位置，并触发相关的生命周期钩子函数（ beforeMount 和 mounted），实现对挂载过程的精细控制。

语法：vm.$mount([elementOrSelector])

它接受一个可选的参数 elementOrSelector，用于指定要挂载的元素或选择器：

如果提供了选择器，则在实例创建时会自动查找该元素并进行挂载；
如果未提供选择器，则需要手动调用 $mount 并传入元素。

$destroy 是 Vue 实例的一个方法，用于手动销毁 Vue 实例。调用 $destroy 方法会清除实例与 DOM 之间的关联，触发 beforeDestroy 和 destroyed 生命周期钩子函数，并释放实例占用的所有资源。使用 $destroy 方法可以确保正确地销毁 Vue 实例，避免内存泄漏和其他潜在问题。

语法：vm.$destroy()

2# 使用示例

<body>
  <div id="app"></div>

  <script>
    let myComponent = Vue.extend({
      template: `<p>{{message}}</p>`,
      data: function() {
        return {
          message: 'Hello, Vue!'
        };
      },
      beforeMount() {
        console.log('myComponent 组件即将被挂载');
      },
      mounted() {
        console.log('myComponent 组件已被挂载');
      },
      beforeDestroy() {
        console.log('myComponent 组件即将被销毁');
      },
      destroyed() {
        console.log('myComponent 组件已被销毁');
      }
    });

    let vm = new myComponent();

    // 调用 $mount() 方法挂载组件
    vm.$mount('#app'); // 传入选择器
    // 或者可以通过手动创建元素再进行挂载
    // const el = document.createElement('div');
    // document.getElementById('app').appendChild(el);
    // vm.$mount(el); // 传入元素

    // 调用 $destroy() 方法销毁组件（3s后调用）
    setTimeout(() => {
      vm.$destroy();
    }, 3000);
  </script>
</body>

Vue2-$mount与$destroy

1# $mount 与 $destroy

2# 使用示例

1# `$mount` 与 `$destroy`