Vue 3 基础：语法和核心 API 指南

简介

作为 Vue.js 框架的最新版本，Vue 3 带来了激动人心的新特性和 API，增强了开发人员的体验和应用程序的功能。本文旨在提供 Vue 3 语法和核心 API 的全面指南，重点介绍其与 Vue 2 的差异，并提供有用的示例和代码片段。

响应式 API

``

在 Vue 3 中，ref 和 reactive 是用于创建响应式数据的两个核心方法：

• ref 创建一个可变的响应式引用，它包装原始值。
• reactive 创建一个响应式的对象或数组。

const nameRef = ref('John');
const user = reactive({ name: 'Jane', age: 30 });

``

Vue 3 响应式系统利用 JavaScript Proxy 对象，允许在获取或设置响应式数据时触发更新。与 Vue 2 中的 Object.defineProperty 不同，Vue 3 提供了更简单、更直接的 API：

// 获取响应式数据的属性
const name = user.name;

// 设置响应式数据的属性
user.name = 'John';

Composition API

Composition API 是一项革命性的功能，允许开发人员将逻辑与模板分离。它引入了两个关键概念：

• Composition 函数： 可重用的函数，返回一个包含响应式数据和方法的对象。
• setup 函数： 组件生命周期的特殊函数，用于初始化响应式状态和组合 composition 函数。

const setup = () => {
  const name = ref('John');

  return { name };
};

Setup 语法糖

Setup 语法糖是一种简化 setup 函数的便捷语法。它允许直接返回响应式对象，并省略 return

const setup = () => ({ name: ref('John') });

其他核心 API

``

provide 和 inject 允许组件在组件树中提供和访问数据，无需显式传递 props。

// 在父组件中提供数据
provide('user', { name: 'John' });

// 在子组件中注入数据
const user = inject('user');

``

watch 允许开发人员监听响应式数据的变化，并根据这些变化执行回调函数。

watch(user, (newValue, oldValue) => {
  console.log(`User name changed from ${oldValue} to ${newValue}`);
});

``

computed 用于创建响应式 getter，该 getter 从其他响应式数据派生其值。

const fullName = computed(() => `${user.name} Doe`);

与 Vue 2 的差异

• 响应式系统： Vue 3 使用 Proxy 对象来提供更简单的响应式 API，而 Vue 2 使用 Object.defineProperty。
• Composition API： Vue 3 引入了 Composition API，允许分离逻辑和模板。
• 语法糖： Vue 3 提供了 setup 语法糖来简化 setup 函数。
• 指令： Vue 2 中的某些内置指令（例如 v-model）在 Vue 3 中需要额外的包。
• API 重构： 一些核心 API 在 Vue 3 中进行了重构，例如 $attrs 和 $scopedSlots。

结论

Vue 3 的语法和核心 API 增强了 Vue 开发体验，提供了更大的灵活性、可扩展性和易用性。了解这些功能对于开发出健壮且可维护的 Vue 3 应用程序至关重要。随着 Vue 3 的持续发展，预计还会出现更多激动人心的新特性和改进。