Vue 3.0新特性与使用（二）

2023-12-25 19:03:57

Vue 3.0 的新特性与用法

Reactivity API

Vue 3.0 的 Reactivity API 是一个强大的工具，它允许我们创建更具响应性和动态性的组件。它有几个核心概念：

Ref ：ref 是一个指向值的引用。它可以是一个基本值，如字符串或数字，也可以是一个对象或数组。我们使用 ref() 函数来创建 ref。例如：

const name = ref('John Doe');

Setup ：setup 是一个函数，它在组件创建时被调用。它返回一个对象，其中包含组件的数据和方法。例如：

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

  const sayHello = () => {
    alert(`Hello, ${name.value}!`);
  };

  return {
    name,
    sayHello,
  };
};

Watch ：watch API 允许我们观察数据的变化并做出反应。它有两种形式：
- watch() ：watch() 函数允许我们观察单个数据的变化。例如：
```
watch(name, (newValue, oldValue) => {
  console.log(`Name changed from "${oldValue}" to "${newValue}".`);
});
```
- watchEffect() ：watchEffect() 函数允许我们观察多个数据的变化。例如：
```
watchEffect(() => {
  console.log(`Name is "${name.value}".`);
});
```

Composition API

Composition API 是 Vue 3.0 中一个新的 API，它允许我们以一种更具组合性的方式来编写组件。它有几个核心概念：

Composition Functions ：Composition functions 是可以被组合在一起以创建组件的函数。它们通常返回一个对象，其中包含组件的数据和方法。例如：

const useName = () => {
  const name = ref('John Doe');

  const sayHello = () => {
    alert(`Hello, ${name.value}!`);
  };

  return {
    name,
    sayHello,
  };
};

Setup ：setup 是一个函数，它在组件创建时被调用。它返回一个对象，其中包含组件的数据和方法。例如：

const setup = () => {
  const { name, sayHello } = useName();

  return {
    name,
    sayHello,
  };
};

Template ：template 是一个字符串，它定义了组件的结构。它可以使用插值表达式来动态地渲染数据。例如：

<template>
  <h1>{{ name }}</h1>
  <button @click="sayHello">Say Hello</button>
</template>

其他新特性

Vue 3.0 还有一些其他新特性，包括：

Virtual DOM ：Virtual DOM 是一个内存中的组件表示。它比真实 DOM 更轻量级，因此可以更快地更新。
Compiler ：Compiler 是一个将模板编译成 JavaScript 代码的工具。
Single File Components (SFC) ：SFC 是一个包含 HTML、CSS 和 JavaScript 代码的文件。它允许我们使用一个文件来定义整个组件。