Vue3全局API调用

1. app.component：注册全局组件

Vue2 中的写法

// Vue2 中，使用 Vue.component 注册全局组件
Vue.component('MyComponent', MyComponent);

// 创建并挂载根实例
new Vue({
  render: h => h(App) // 渲染根组件 App
}).$mount('#app');  // 将应用实例挂载到 DOM 元素上

Vue3 中的写法

import { createApp } from 'vue';

// 创建应用实例
const app = createApp(App);

// 使用 app.component 注册全局组件
app.component('MyComponent', MyComponent);

// 将应用实例挂载到 DOM 元素上
app.mount('#app');

解释：

• 在Vue2中，全局组件通过Vue.component注册，并且可以在任何地方使用。
• 在Vue3中，全局组件通过应用实例的app.component方法注册。

---

2. app.config：配置全局选项

Vue2 中的写法

// Vue2 中，通过 Vue.config 配置全局选项，如错误处理
Vue.config.errorHandler = (err, vm, info) => {
  console.error(err, info); // 全局错误处理
};

// 创建并挂载根实例
new Vue({
  render: h => h(App) // 渲染根组件 App
}).$mount('#app');  // 将应用实例挂载到 DOM 元素上

Vue3 中的写法

import { createApp } from 'vue';

// 创建应用实例
const app = createApp(App);

// 配置全局选项，如错误处理
app.config.errorHandler = (err, vm, info) => {
  console.error(err, info); // 全局错误处理
};

// 将应用实例挂载到 DOM 元素上
app.mount('#app');

解释：

• 在Vue2中，全局配置通过Vue.config来设置，比如全局错误处理。
• 在Vue3中，全局配置通过应用实例的app.config来设置。

---

3. app.directive：注册全局自定义指令

Vue2 中的写法

// Vue2 中，通过 Vue.directive 注册全局自定义指令
Vue.directive('focus', {
  // 指令绑定时调用的函数，在元素插入 DOM 时触发
  inserted(el) {
    el.focus();  // 元素获得焦点
  }
});

// 创建并挂载根实例
new Vue({
  render: h => h(App) // 渲染根组件 App
}).$mount('#app');  // 将应用实例挂载到 DOM 元素上

Vue3 中的写法

import { createApp } from 'vue';

// 创建应用实例
const app = createApp(App);

// 使用 app.directive 注册全局自定义指令
app.directive('focus', {
  // 指令绑定时调用的函数，在元素挂载到 DOM 时触发
  mounted(el) {
    el.focus();  // 元素获得焦点
  }
});

// 将应用实例挂载到 DOM 元素上
app.mount('#app');

解释：

• 在Vue2中，全局自定义指令通过Vue.directive注册，并在元素插入DOM时触发inserted钩子。
• 在Vue3中，全局自定义指令通过app.directive注册，并在元素挂载到DOM时触发mounted钩子。

---

4. app.mount：挂载应用到 DOM

Vue2 中的写法

// Vue2 中，通过 new Vue 创建实例并挂载到 DOM 元素上
new Vue({
  render: h => h(App) // 渲染根组件 App
}).$mount('#app');  // 将应用实例挂载到 ID 为 #app 的 DOM 元素上

Vue3 中的写法

import { createApp } from 'vue';

// 创建应用实例，并挂载到 DOM 元素上
createApp(App).mount('#app');  // 将应用实例挂载到 ID 为 #app 的 DOM 元素上

解释：

• 在Vue2中，使用new Vue({...}).$mount('#app')的方式挂载应用到DOM。
• 在Vue3中，使用createApp(App).mount('#app')的方式挂载应用到DOM。

---

5. app.unmount：卸载应用实例

Vue2 中的写法

Vue2中没有直接等效的卸载应用实例的API，一旦挂载后，应用实例就会一直存在，直到页面关闭或手动删除DOM元素。

Vue3 中的写法

import { createApp } from 'vue';

// 创建应用实例
const app = createApp(App);

// 将应用实例挂载到 DOM 元素上
app.mount('#app');

// 卸载应用实例
app.unmount();  // 手动卸载应用实例，清理挂载到的 DOM 元素

解释：

• 在Vue2中，无法直接卸载应用实例，只能手动删除DOM元素。
• 在Vue3中，app.unmount提供了一个卸载应用实例的API，用于在应用不再需要时清理实例。

---

6. app.use：安装插件或中间件

Vue2 中的写法

// Vue2 中，通过 Vue.use 安装插件
Vue.use(MyPlugin);  // 安装插件 MyPlugin

// 创建并挂载根实例
new Vue({
  render: h => h(App) // 渲染根组件 App
}).$mount('#app');  // 将应用实例挂载到 DOM 元素上

Vue3 中的写法

import { createApp } from 'vue';

// 创建应用实例
const app = createApp(App);

// 使用 app.use 安装插件
app.use(MyPlugin);  // 安装插件 MyPlugin

// 将应用实例挂载到 DOM 元素上
app.mount('#app');

解释：

• 在Vue2中，插件通过Vue.use来安装。
• 在Vue3中，插件通过app.use来安装，应用实例需要在安装插件后挂载。

---

7. Vue3 和 Vue2 中的挂载原型比较

在Vue2中，通常通过Vue.prototype将全局方法或属性挂载到Vue实例的原型链上，这样所有组件都可以通过this来访问这些全局方法或属性。而在Vue3中，这个功能被转移到app.config.globalProperties上。以下是详细的对比和示例代码。

---

1. Vue2 中的挂载原型：Vue.prototype

用途：

在Vue2中，Vue.prototype用于将全局方法或属性挂载到Vue实例的原型链上，从而使得所有组件实例都可以通过this来访问这些全局方法或属性。

Vue2 示例：

import Vue from 'vue';

// 将全局方法挂载到 Vue 的原型上
// 这样，所有的组件实例都可以通过 this.$myGlobalMethod() 调用该方法
Vue.prototype.$myGlobalMethod = function () {
  console.log('This is a global method in Vue 2');
};

// 创建根组件实例
new Vue({
  render: h => h(App), // 渲染根组件 App
}).$mount('#app'); // 将 Vue 实例挂载到 id 为 "app" 的 DOM 元素上

在组件中访问全局方法：

<template>
  <div>
    <!-- 按钮点击时调用全局方法 -->
    <button @click="callGlobalMethod">Call Global Method</button>
  </div>
</template>

<script>
export default {
  // 组件挂载完成后调用的方法
  mounted() {
    // 使用 this 访问挂载在 Vue 原型上的全局方法
    this.$myGlobalMethod();
  },
  methods: {
    // 定义一个方法，供模板中按钮点击时调用
    callGlobalMethod() {
      // 使用 this 调用全局方法
      this.$myGlobalMethod();
    }
  }
};
</script>

解释：

• 在Vue2中，使用Vue.prototype将全局方法挂载到Vue实例的原型链上，这样每个组件实例都可以通过this来访问这些方法。

---

2. Vue3 中的挂载原型：app.config.globalProperties

用途：

在Vue3中，app.config.globalProperties用于将全局方法或属性挂载到应用实例的全局属性上。所有组件依然可以通过this来访问这些挂载的方法或属性，只不过使用this的环境限制有所变化。

Vue3 示例：

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

// 创建 Vue 应用实例
const app = createApp(App);

// 将全局方法或属性挂载到 app.config.globalProperties 上
// 这样，所有的组件实例都可以通过 this.$myGlobalMethod() 调用该方法
app.config.globalProperties.$myGlobalMethod = function () {
  console.log('This is a global method in Vue 3');
};

// 将 Vue 应用实例挂载到 id 为 "app" 的 DOM 元素上
app.mount('#app');

在组件中访问全局方法：

方式一：在 <script setup> 内部使用 getCurrentInstance 调用

<template>
  <div>
    <!-- 按钮点击时调用全局方法 -->
    <button @click="callGlobalMethod">Call Global Method</button>
  </div>
</template>

<script setup>
// 引入 getCurrentInstance 以获取当前组件实例
import { getCurrentInstance } from 'vue';

// 获取当前组件实例
const { proxy } = getCurrentInstance();

// 定义一个方法来调用全局方法
function callGlobalMethod() {
  // 通过 proxy 访问挂载的全局方法
  proxy.$myGlobalMethod();
}
</script>

方式二：在 <script setup> 外部使用 this 调用

<template>
  <div>
    <!-- 按钮点击时调用全局方法 -->
    <button @click="callGlobalMethod">Call Global Method</button>
  </div>
</template>

<script>
export default {
  // 组件挂载完成后调用的方法
  mounted() {
    // 使用 this 访问挂载在全局属性上的方法
    this.$myGlobalMethod();
  },
  methods: {
    // 定义一个方法，供模板中按钮点击时调用
    callGlobalMethod() {
      // 使用 this 调用全局方法
      this.$myGlobalMethod();
    }
  }
};
</script>

解释：

• 在Vue3中，app.config.globalProperties用于将全局方法或属性挂载到应用实例上。在<script setup>之外的环境中，仍可以通过this访问这些方法。
• 在<script setup>内部，由于this不可用，需要使用getCurrentInstance获取当前组件实例，并通过proxy来访问全局方法或属性。

---

3. 挂载原型总结

Vue3：使用 app.config.globalProperties

• 调用方式：

  • 在<script setup>内部，使用getCurrentInstance获取当前组件实例，通过proxy访问全局方法或属性。
  • 在setup之外的其他部分（如模板或生命周期钩子中），仍然可以使用this访问全局方法或属性。

• 优点：这种方式更加模块化，适合大型应用的结构管理，且通过getCurrentInstance可以明确访问组件实例。

Vue2：使用 Vue.prototype

• 调用方式：

  • 在Vue2中，通过Vue.prototype将全局方法挂载到Vue实例的原型链上，组件实例中的this可以直接访问这些方法。

• 优点：使用简单直观，符合传统的JavaScript原型链逻辑，便于小型项目或简单应用使用。