Vue Doc 随手记 —— 核心功能和特点

2023.07.31 174

背景

最近需要使用 Vue + Composition API 开发项目需求，所以再过下相关文档，做一下记录。

开始

Vue：Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。

Vue 的两个核心功能

声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
早年间流行的 jQuery 就是典型的命令式框架。命令式框架的一大特点就是关注过程。例如，我们把下面这段话翻译成对应的代码：
```
01 - 获取 id 为 app 的 div 标签
02 - 它的文本内容为 hello world
03 - 为其绑定点击事件
04 - 当点击时弹出提示：ok
```
对应的代码为：
```
01 $('#app') // 获取 div
02   .text('hello world') // 设置文本内容
03   .on('click', () => { alert('ok') }) // 绑定点击事件
```
可以看到，自然语言描述能够与代码产生一一对应的关系，代码本身描述的是“做事的过程”，这符合我们的逻辑直觉。

与命令式框架更加关注过程不同，声明式框架更加关注结果。结合 Vue.js，我们来看看如何实现上面自然语言描述的功> 能：
```
01 <div @click="() => alert('ok')">hello world</div>
```
这段类 HTML 的模板就是 Vue.js 实现如上功能的方式。可以看到，我们提供的是一个“结果”，至于如何实现这个“结果”，我们并不关心，这就像我们在告诉 Vue.js：“嘿，Vue.js，看到没，我要的就是一个 div，文本内容是 hello world，它有个事件绑定，你帮我搞定吧。”至于实现该“结果”的过程，则是由 Vue.js 帮我们完成的。换句话说，Vue.js 帮我们封装了过程。因此，我们能够猜到 Vue.js 的内部实现一定是命令式的，而暴露给用户的却更加声明式。
响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

特点和特性：

响应式数据绑定：Vue.js的核心特性之一是其响应式数据绑定系统。它建立了 JavaScript 代码和 HTML 模板之间的连接，因此当数据发生变化时，UI 会自动更新以反映这些变化。这简化和优化了更新 DOM 的过程。
组件化架构：Vue.js 遵循组件化架构，其中用户界面被拆分为可重用和自包含的组件。每个组件封装了自己的模板、JavaScript 逻辑和样式，使得管理和维护大型应用程序变得更容易。
虚拟DOM：Vue.js使用虚拟DOM来优化渲染性能。虚拟DOM是实际DOM的抽象副本，当数据发生变化时，Vue会计算虚拟DOM与真实DOM之间的差异（diff），然后只更新必要的更改，从而实现更快的渲染。
指令：Vue 提供了内置指令，如v-if、v-for、v-bind、v-on等。这些指令用于向 DOM 元素添加功能。它们允许您以声明式的方式条件性地渲染元素、绑定数据和处理事件。
模板：Vue.js 使用基于 HTML 的模板语法，允许开发人员以声明式的方式描述 UI。模板语法简单易懂，有助于快速开发。
Vue Router：Vue Router 是 Vue.js 应用程序的官方路由库。它提供了强大灵活的路由系统，允许开发人员创建具有多个视图和导航的单页面应用程序。
Vuex：Vuex 是 Vue.js 的官方状态管理库。它提供了一个集中式存储来管理应用程序状态，使得更容易管理在多个组件之间共享的数据。
轻量级：Vue.js 相对较轻量，并且学习曲线较小，使其成为初学者和经验丰富的开发人员的优秀选择。
灵活性：Vue.js 被设计为可增量采用的。您可以根据需要使用尽可能多或尽可能少的框架，将其整合到现有项目中或从头开始构建完整的 SPA。
活跃的社区：Vue.js 拥有充满活力和活跃的社区，不断为框架的发展做出贡献，提供支持，并创建各种第三方库和插件。

API 风格分为组合式（Composition API）和选项式（Options API）两种。

Vue API 之所以分为组合式和选项式，是为了满足不同开发场景下的需求，并提供更好的开发体验和代码组织方式。

选项式（Options API）：
- 选项式是 Vue 早期版本使用的 API 风格，也是许多开发者熟悉和使用的方式。
- 在选项式中，组件的逻辑被组织在一个包含各种选项的对象中（如data、methods、computed、watch等），每个选项都代表不同的功能。
- 这种风格在简单的组件中表现良好，但随着组件复杂度的增加，逻辑可能会难以维护，组件选项可能会过于庞大，降低代码的可读性和维护性。
组合式（Composition API）：
- 组合式是 Vue 3.0 引入的新特性，提供了一种基于函数的 API 风格，使得组件的逻辑可以更灵活地组织和重用。
- 在组合式中，逻辑被封装在函数内部，每个函数负责处理一个特定的功能，而不再需要将所有逻辑都放在单个选项中。
- 组合式可以更好地解决逻辑复用的问题，使得代码更加模块化，可读性和可维护性得到提升。
- 另外，组合式还使得在逻辑之间进行更好的代码组织和抽象，有助于更好地拆分和管理大型组件。

选择哪种 API 风格取决于开发者的偏好和项目的需求。选项式适合较简单的组件和小型项目，因为其在这些场景下使用起来简单直观。而组合式则更适合大型和复杂的项目，可以更好地管理和重用组件逻辑，提高代码的可维护性和可扩展性。

需要注意的是，虽然 Vue 3.0 引入了组合式 API，但并未废弃选项式 API，开发者可以根据项目需求选择使用不同的 API 风格，或者在同一个项目中同时使用两种风格。

vue