Vue3 全局API

作者： /
Vue3全局API详解 – 编程小白也能懂

Vue3全局API详解

编程小白也能懂的Vue3全局API知识点汇总

你好！欢迎来到Vue3全局API的世界！我是你的学习助手。

Vue3的全局API是Vue框架提供的一些核心功能方法，它们可以直接在Vue实例或组件中使用。与Vue2不同，Vue3中的全局API经过重新设计，更加模块化，可以更好地支持Tree Shaking（减少打包体积）。

接下来，我会用最简单的大白话解释每个API的作用和用法，并附上代码示例和实际应用场景。

🚀

createApp

大白话解释： 这是创建Vue应用的起点，相当于你盖房子前先打好地基。

作用： 创建一个Vue应用实例，然后你可以在这个基础上添加各种功能。

基本用法

// 创建Vue应用实例 const app = Vue.createApp({ // 选项：数据、方法、生命周期钩子等 data() { return { message: ‘Hello Vue!’ } } }) // 将应用挂载到页面上的#app元素 app.mount(‘#app’)

💡 小贴士： 在Vue3中，不再使用new Vue()来创建应用，而是使用createApp()。这样做的好处是多个应用可以独立存在，互不干扰。

🛠️

defineComponent

大白话解释： 这是一个”类型定义助手”，主要作用是帮助TypeScript理解你的组件代码。

作用： 在TypeScript项目中提供更好的类型推断和代码提示。

基本用法

import { defineComponent } from ‘vue’ // 使用defineComponent定义组件 const MyComponent = defineComponent({ data() { return { count: 0 } }, methods: { increment() { this.count++ } } })

💡 小贴士： 即使你不使用TypeScript，也可以使用defineComponent，因为它能让你的代码更规范，并且在未来支持TypeScript时更加平滑过渡。

🔢

ref

大白话解释： 创建一个”响应式”的数据容器，当里面的值变化时，页面会自动更新。

作用： 让基本类型的数据（如数字、字符串等）变成响应式的。

基本用法

import { ref } from ‘vue’ // 在setup函数中使用 setup() { // 创建一个响应式的count变量，初始值为0 const count = ref(0) // 修改值需要使用.value function increase() { count.value++ } // 返回给模板使用 return { count, increase } }

💡 小贴士： 在模板中使用ref创建的变量时，不需要加.value，Vue会自动帮你处理。但在JavaScript代码中修改值时，需要加上.value。

实际效果演示：

计数器: {{ count }}

🔄

reactive

大白话解释： 创建一个”响应式”的对象，当对象属性变化时，页面会自动更新。

作用： 让对象类型的数据变成响应式的。

基本用法

import { reactive } from ‘vue’ // 在setup函数中使用 setup() { // 创建一个响应式对象 const user = reactive({ name: ‘张三’, age: 25, address: ‘北京市朝阳区’ }) // 修改属性值 function updateUser() { user.age = 30 user.address = ‘上海市浦东新区’ } return { user, updateUser } }

💡 小贴士： 与ref不同，reactive创建的对象在修改属性时不需要.value，直接修改属性即可。但对于基本类型，推荐使用ref。

实际效果演示：

姓名: {{ user.name }}

年龄: {{ user.age }}

地址: {{ user.address }}

🧮

computed

大白话解释： 创建一个”计算属性”，它会自动根据依赖的数据计算出新值。

作用： 当某个值需要根据其他值计算得出时使用，避免重复计算。

基本用法

import { ref, computed } from ‘vue’ setup() { const firstName = ref(‘张’) const lastName = ref(‘三’) // 创建计算属性 const fullName = computed(() => { return firstName.value + lastName.value }) return { firstName, lastName, fullName } }

💡 小贴士： 计算属性会缓存计算结果，只有当依赖的值发生变化时才会重新计算，这比在模板中使用方法更高效。

👀

watch

大白话解释： 这是一个”监听器”，当数据变化时执行一些操作。

作用： 监听数据变化并执行副作用操作，如发送请求、操作DOM等。

基本用法

import { ref, watch } from ‘vue’ setup() { const count = ref(0) // 监听count的变化 watch(count, (newValue, oldValue) => { console.log(`计数从 ${oldValue} 变为 ${newValue}`) if (newValue > 10) { alert(‘计数已超过10！’) } }) return { count } }

💡 小贴士： 对于监听多个数据源，可以使用数组：watch([ref1, ref2], ([newVal1, newVal2], [oldVal1, oldVal2]) => { … })

⏱️

nextTick

大白话解释： 等页面更新完成后执行某些操作。

作用： 在数据变化后，操作更新后的DOM。

基本用法

import { ref, nextTick } from ‘vue’ setup() { const message = ref(‘原始消息’) function changeMessage() { message.value = ‘更新后的消息’ // 等待DOM更新完成后执行 nextTick(() => { // 这里可以安全地操作更新后的DOM const element = document.getElementById(‘message’) element.style.color = ‘red’ }) } return { message, changeMessage } }

💡 小贴士： Vue是异步更新DOM的，所以数据变化后立即操作DOM可能得到的是旧的状态。nextTick就是解决这个问题的利器。

📤📥

provide & inject

大白话解释： 跨层级组件传递数据的方式，爷爷组件可以直接给孙子组件传递数据。

作用： 解决多级组件嵌套时props逐层传递的繁琐问题。

基本用法

// 祖先组件 import { provide } from ‘vue’ setup() { // 提供数据 provide(‘theme’, ‘dark’) // 提供响应式数据 const user = reactive({ name: ‘张三’ }) provide(‘user’, user) } // 后代组件 import { inject } from ‘vue’ setup() { // 注入数据 const theme = inject(‘theme’, ‘light’) // 第二个参数是默认值 // 注入响应式数据 const user = inject(‘user’) return { theme, user } }

💡 小贴士： 这对API特别适合开发全局配置、主题切换、用户信息共享等跨组件场景。

总结：Vue3全局API的核心概念

1. Vue3的全局API采用模块化设计，支持Tree Shaking

2. 响应式API：ref和reactive是创建响应式数据的核心

3. 组合式API：computed、watch等帮助组织组件逻辑

4. 工具类API：nextTick、provide/inject等解决特定场景问题

5. 学习建议：从createApp开始，逐步掌握各个API的使用场景

Vue3全局API知识总结 | 为编程小白量身定制 | 建议结合实际编码练习巩固知识

提示：本页面中的演示部分需要引入Vue3才能实际运行

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部