Vue3 学习教程，从入门到精通，Vue 3 全局 API 语法知识点及案例详解(32）

发布于：2025-08-13 ⋅ 阅读:(16) ⋅ 点赞:(0)

Vue 3 全局 API 语法知识点及案例详解

Vue 3 提供了丰富的全局 API，用于创建应用实例、注册全局组件、指令、插件等。以下将详细介绍 Vue 3 的主要全局 API，并结合详细的案例代码进行说明。每个案例代码都包含中文注释，帮助初学者更好地理解。

目录

  1. createApp
  2. app.mount()
  3. app.unmount()
  4. app.component()
  5. app.directive()
  6. app.use()
  7. app.config.globalProperties
  8. Vue.nextTick()
  9. Vue.set() 和 Vue.delete()
  10. Vue.computed()
  11. Vue.observable()
  12. Vue.mixin()
  13. Vue.version

1. createApp

语法

import { createApp } from 'vue';
const app = createApp(rootComponent, rootProps);

说明

createApp 用于创建一个新的 Vue 应用实例。它接受一个根组件和一个可选的根 props 对象作为参数。

案例代码

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue 3 createApp 示例</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body>
  <div id="app"></div>
  <script>
    // 导入 createApp
    const { createApp } = Vue;

    // 定义根组件
    const App = {
      template: `
        <div>
          <h1>{{ message }}</h1>
          <button @click="updateMessage">点击更新消息</button>
        </div>
      `,
      data() {
        return {
          message: 'Hello, Vue 3!'
        };
      },
      methods: {
        updateMessage() {
          this.message = '消息已更新！';
        }
      }
    };

    // 创建 Vue 应用实例
    const app = createApp(App, { /* rootProps */ });

    // 挂载应用
    app.mount('#app');
  </script>
</body>
</html>

解释

  • 导入 createApp: 从 Vue 中导入 createApp 函数。
  • 定义根组件: 使用一个包含模板、数据和方法的对象定义根组件。
  • 创建应用实例: 使用 createApp 创建一个新的 Vue 应用实例，并传入根组件。
  • 挂载应用: 使用 app.mount('#app') 将应用挂载到页面的 #app 元素上。

2. app.mount()

语法

app.mount('#app');

说明

app.mount() 用于将 Vue 应用挂载到一个 DOM 元素上。它接受一个选择器字符串或一个实际的 DOM 元素作为参数。

案例代码

（与 createApp 示例相同）

解释

  • 挂载应用: app.mount('#app') 将 Vue 应用挂载到 <div id="app"></div> 上。

3. app.unmount()

语法

app.unmount();

说明

app.unmount() 用于卸载一个已挂载的 Vue 应用，销毁所有相关的组件和事件监听器。

案例代码

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue 3 app.unmount 示例</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body>
  <div id="app"></div>
  <button id="unmount">卸载应用</button>
  <script>
    const { createApp } = Vue;

    const App = {
      template: `
        <div>
          <h1>{{ message }}</h1>
          <button @click="updateMessage">点击更新消息</button>
        </div>
      `,
      data() {
        return {
          message: 'Hello, Vue 3!'
        };
      },
      methods: {
        updateMessage() {
          this.message = '消息已更新！';
        }
      }
    };

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

    // 卸载应用按钮点击事件
    document.getElementById('unmount').addEventListener('click', () => {
      app.unmount();
      alert('Vue 应用已卸载');
    });
  </script>
</body>
</html>

解释

  • 卸载应用: 点击“卸载应用”按钮后，调用 app.unmount() 卸载 Vue 应用，销毁所有组件和事件监听器。

4. app.component()

语法

app.component('组件名', 组件选项);

说明

app.component() 用于全局注册一个组件，使其在应用的任何地方都可以使用。

案例代码

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue 3 app.component 示例</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body>
  <div id="app">
    <my-button></my-button>
  </div>
  <script>
    const { createApp } = Vue;

    // 定义全局组件 MyButton
    const MyButton = {
      template: `
        <button @click="handleClick">点击我</button>
      `,
      methods: {
        handleClick() {
          alert('按钮被点击了！');
        }
      }
    };

    // 创建应用并注册全局组件
    const app = createApp({
      template: `
        <div>
          <h1>全局组件示例</h1>
          <my-button></my-button>
        </div>
      `
    });

    app.component('my-button', MyButton);
    app.mount('#app');
  </script>
</body>
</html>

解释

  • 定义全局组件: 使用 app.component('my-button', MyButton) 全局注册组件 MyButton。
  • 使用全局组件: 在根组件的模板中使用 <my-button></my-button>，无需额外导入。

5. app.directive()

语法

app.directive('指令名', 指令选项);

说明

app.directive() 用于全局注册一个自定义指令，使其在应用的任何地方都可以使用。

案例代码

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue 3 app.directive 示例</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
  <style>
    .focused {
      border: 2px solid blue;
    }
  </style>
</head>
<body>
  <div id="app">
    <input v-focus type="text" placeholder="请输入内容">
  </div>
  <script>
    const { createApp } = Vue;

    // 定义全局指令 focus
    const app = createApp({
      data() {
        return {
          message: 'Hello, Vue 3!'
        };
      }
    });

    app.directive('focus', {
      mounted(el) {
        el.focus();
      },
      updated(el) {
        el.focus();
      }
    });

    app.mount('#app');
  </script>
</body>
</html>

解释

  • 定义全局指令: 使用 app.directive('focus', { ... }) 全局注册指令 v-focus。
  • 指令逻辑: mounted 和 updated 钩子中调用 el.focus()，使元素获得焦点。
  • 使用指令: 在模板中使用 v-focus 指令，元素加载时会自动获得焦点。

6. app.use()

语法

app.use(plugin, options);

说明

app.use() 用于安装 Vue 插件。插件可以添加全局功能，如全局指令、组件、混入等。

案例代码

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue 3 app.use 示例</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
  <script src="https://unpkg.com/vue-router@4"></script>
</head>
<body>
  <div id="app"></div>
  <script>
    const { createApp, ref } = Vue;
    const { createRouter, createWebHistory } = VueRouter;

    // 定义插件
    const myPlugin = {
      install(app, options) {
        app.config.globalProperties.$myMethod = () => {
          console.log('插件方法被调用');
        };
      }
    };

    // 创建应用并使用插件
    const app = createApp({
      template: `
        <div>
          <h1>{{ message }}</h1>
          <button @click="invokePlugin">点击调用插件方法</button>
        </div>
      `,
      data() {
        return {
          message: 'Hello, Vue 3!'
        };
      },
      methods: {
        invokePlugin() {
          this.$myMethod();
        }
      }
    });

    app.use(myPlugin);
    app.mount('#app');
  </script>
</body>
</html>

解释

  • 定义插件: 创建一个插件 myPlugin，在 install 方法中为 app.config.globalProperties 添加 $myMethod 方法。
  • 使用插件: 使用 app.use(myPlugin) 安装插件。
  • 调用插件方法: 在组件的方法中通过 this.$myMethod() 调用插件中定义的方法。

7. app.config.globalProperties

语法

app.config.globalProperties.$propertyName = value;

说明

app.config.globalProperties 用于向 Vue 应用实例添加全局属性，使其在所有组件中都可以访问。

案例代码

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue 3 app.config.globalProperties 示例</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ $greeting }}</h1>
    <button @click="showGreeting">点击显示问候语</button>
  </div>
  <script>
    const { createApp } = Vue;

    const app = createApp({
      data() {
        return {
          message: 'Hello, Vue 3!'
        };
      },
      methods: {
        showGreeting() {
          alert(this.$greeting);
        }
      }
    });

    // 添加全局属性 $greeting
    app.config.globalProperties.$greeting = '欢迎使用 Vue 3!';

    app.mount('#app');
  </script>
</body>
</html>

解释

  • 添加全局属性: 使用 app.config.globalProperties.$greeting = '欢迎使用 Vue 3!' 添加全局属性 $greeting。
  • 访问全局属性: 在组件中通过 this.$greeting 访问全局属性。

8. Vue.nextTick()

语法

Vue.nextTick(callback);

说明

Vue.nextTick() 接受一个回调函数，在下一次 DOM 更新循环之后执行该回调函数。常用于在数据变化后操作 DOM。

案例代码

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue 3 Vue.nextTick 示例</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body>
  <div id="app">
    <h1 ref="title">{{ message }}</h1>
    <button @click="updateMessage">点击更新消息</button>
  </div>
  <script>
    const { createApp, ref, nextTick } = Vue;

    const app = createApp({
      setup() {
        const message = ref('Hello, Vue 3!');
        const title = ref(null);

        const updateMessage = () => {
          message.value = '消息已更新！';
          nextTick(() => {
            console.log('DOM 已更新');
            console.log(title.value.innerText);
          });
        };

        return {
          message,
          updateMessage,
          title
        };
      }
    });

    app.mount('#app');
  </script>
</body>
</html>

解释

  • 使用 nextTick: 在 updateMessage 方法中更新数据后，使用 nextTick 确保 DOM 已更新，然后进行后续操作，如访问更新后的 DOM 内容。

9. Vue.set() 和 Vue.delete()

语法

Vue.set(target, propertyName/index, value);
Vue.delete(target, propertyName/index);

说明

Vue.set() 和 Vue.delete() 用于向响应式对象中添加或删除属性，确保这些操作是响应式的。

案例代码

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue 3 Vue.set 和 Vue.delete 示例</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ user.name }}</h1>
    <h2>{{ user.age }}</h2>
    <button @click="addAge">添加年龄</button>
    <button @click="removeAge">删除年龄</button>
  </div>
  <script>
    const { createApp, reactive, Vue } = Vue;

    const app = createApp({
      data() {
        return {
          user: reactive({ name: '张三' })
        };
      },
      methods: {
        addAge() {
          Vue.set(this.user, 'age', 25);
        },
        removeAge() {
          Vue.delete(this.user, 'age');
        }
      }
    });

    app.mount('#app');
  </script>
</body>
</html>

解释

  • 添加属性: 使用 Vue.set(this.user, 'age', 25) 向响应式对象 user 中添加 age 属性。
  • 删除属性: 使用 Vue.delete(this.user, 'age') 从 user 中删除 age 属性。
  • 响应式更新: 这些操作确保 user 对象的变化是响应式的，视图会自动更新。

10. Vue.computed()

语法

const computedProperty = computed(() => { /* 计算逻辑 */ });

说明

Vue.computed() 用于创建计算属性，基于依赖进行缓存，只有在相关依赖发生变化时才会重新计算。

案例代码

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue 3 Vue.computed 示例</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ fullName }}</h1>
    <button @click="changeName">更改名字</button>
  </div>
  <script>
    const { createApp, reactive, computed } = Vue;

    const app = createApp({
      setup() {
        const user = reactive({
          firstName: '李',
          lastName: '四'
        });

        const fullName = computed(() => {
          return `${user.firstName} ${user.lastName}`;
        });

        const changeName = () => {
          user.firstName = '王';
        };

        return {
          user,
          fullName,
          changeName
        };
      }
    });

    app.mount('#app');
  </script>
</body>
</html>

解释

  • 定义计算属性: 使用 computed 定义 fullName 计算属性，基于 user.firstName 和 user.lastName 计算。
  • 响应式更新: 当 user.firstName 或 user.lastName 发生变化时，fullName 会自动更新。

11. Vue.observable()

语法

const observableObject = Vue.observable({ /* 对象 */ });

说明

Vue.observable() 用于将一个普通对象转换为响应式对象，使其在 Vue 应用中具有响应式特性。

案例代码

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN>
<head>
  <meta charset="UTF-8">
  <title>Vue 3 Vue.observable 示例</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ state.count }}</h1>
    <button @click="increment">点击增加</button>
  </div>
  <script>
    const { createApp, Vue } = Vue;

    const state = Vue.observable({ count: 0 });

    const app = createApp({
      setup() {
        const increment = () => {
          state.count++;
        };

        return {
          state,
          increment
        };
      }
    });

    app.mount('#app');
  </script>
</body>
</html>

解释

  • 创建响应式对象: 使用 Vue.observable({ count: 0 }) 创建一个响应式对象 state。
  • 修改状态: 通过 state.count++ 修改 count 的值，视图会自动更新。

12. Vue.mixin()

语法

Vue.mixin(mixin);

说明

Vue.mixin() 用于全局混入一个对象，混入对象的选项会被合并到每个组件的选项中。

案例代码

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue 3 Vue.mixin 示例</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <h2>{{ sharedData }}</h2>
  </div>
  <script>
    const { createApp, Vue } = Vue;

    // 定义混入对象
    const myMixin = {
      data() {
        return {
          sharedData: '这是混入的数据'
        };
      },
      created() {
        console.log('混入的 created 钩子');
      }
    };

    const app = createApp({
      mixins: [myMixin],
      data() {
        return {
          message: 'Hello, Vue 3!'
        };
      },
      created() {
        console.log('组件的 created 钩子');
      }
    });

    app.mount('#app');
  </script>
</body>
</html>

解释

  • 定义混入对象: 使用 myMixin 定义一个包含 data 和 created 钩子的混入对象。
  • 使用混入: 在组件中通过 mixins: [myMixin] 使用混入对象。
  • 合并逻辑: 混入对象的 data 和 created 钩子会被合并到组件中，共享数据 sharedData 可以在组件中使用。

13. Vue.version

语法

console.log(Vue.version);

说明

Vue.version 返回当前 Vue 版本的字符串。

案例代码

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue 3 Vue.version 示例</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body>
  <div id="app">
    <h1>当前 Vue 版本: {{ version }}</h1>
  </div>
  <script>
    const { createApp, ref, Vue } = Vue;

    const app = createApp({
      setup() {
        const version = ref(Vue.version);

        return {
          version
        };
      }
    });

    app.mount('#app');
  </script>
</body>
</html>

解释

  • 获取版本号: 使用 Vue.version 获取当前 Vue 版本，并将其赋值给 version 变量。
  • 显示版本号: 在模板中显示 version 的值。

总结

以上介绍了 Vue 3 的主要全局 API 及其用法。通过这些 API，开发者可以更高效地构建和管理 Vue 应用。理解并掌握这些全局 API 对于深入学习 Vue 3 是至关重要的。希望这些示例代码和解释能帮助你更好地理解 Vue 3 的全局 API。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布