Vue 3 开发文档

vue upgrade --next

Vite

Vite 是一个想要用来代替 webpack 的 Web 开发构建工具，也是官方推荐使用的构建工具，使用 vite 将脱离 webpack

// ----------npm----------

npm init vite-app

cd

npm install

npm run dev

// ----------yarn----------

yarn create vite-app

cd

yarn

yarn dev

Composition API

---

简介

为什么会有 Composition API

创建Vue组件使我们能够将接口的可重复部分及其功能提取到可重用的代码段中。就维护性和灵活性而言，仅此一项就可以使我们的应用程序发展得相当远。

但是，经过大量的开发经验证明，仅凭这一项可能还不够，特别是当你的应用程序变得非常大时。

想象一下数百个组件的项目，在处理如此大的应用程序时，共享和重用代码变得尤为重要。

摘要自：https://v3.vuejs.org/guide/composition-api-introduction.html#why-composition-api

但是因为 Vue 2.x 中，以 组件 为最小颗粒的原因（PS：mixin 虽然可以达到复用的效果，但是它依然缺少独立性。比如：命名冲突、隐式依赖的问题），导致组件中的逻辑无法被进行 共享 和 重用

Composition API 概念

Composition API（组合式 API） 是一个概念，而非具体的实现。

在组件中，实际使用 Composition API 的地方，是 setup 函数。在它内部，我们可以描述一个组件所需要的 所有逻辑。

setup

简介

setup 函数是Composition API 的入口函数，也是它的核心函数。

但是要注意：setup 函数执行时，尚未创建组件实例，所以 this 中没有任何内容。这意味着，除了props，你将无法访问通过 this 来访问组件中声明的任何属性、本地状态、计算属性、方法。

参数

setup 函数有两个参数：

1. {Data} props：

2. props 是响应式的

3. 由于props是反应性的，你不能使用ES6解构，详见 对象的响应式

4. {SetupContext} context

5. context 是普通的 js 对象，所以他不是响应式的

6. context 下有三个属性：

7. attrs：包含父组件属性绑定、未识别出的为组件属性或自定义事件的事件

8. slots：插槽

9. emit：通知（发出的事件）

下面是官方的示例代码：

// Data 为 key:value 结构的对象

interface Data {

}

// context 为上下文，包含：

// attrs：包含父组件属性绑定、未识别出的为组件属性或自定义事件的事件

// slots：插槽

// emit：通知

interface SetupContext {

attrs: Data

slots: Slots

emit: (event: string, …args: unknown[]) => void

}

function setup(props: Data, context: SetupContext): Data

可访问的组件属性

当setup被执行时，该组件实例尚未建立。如此一来，您将只能访问以下属性：

• props

• attrs

• slots

• emit

换句话说，您将无权访问以下组件选项：

• data

• computed

• methods

模板使用 setup 中的数据

如果setup返回对象，则可以在组件的模板中访问对象的属性（注意代码中的备注）：

{ { readersNumber