什么是 Vue.js？

官网：https://cn.vuejs.org/index.html

其实官网已经说的很清楚了，Vue.js 是一个用于创建用户界面的渐进式 JavaScript 框架。

这里的渐进式指的是，Vue.js 可以自底向上逐层应用在用户界面上。

下面我们对 Vue.js 的核心特性做概述，更多细节可以查看官网的介绍。

渐进式

Vue.js 是一个轻量化的渐进式框架，并且 Vue 的核心库只有 20kb 的大小，而通过插件的方式支持更多功能。这意味着我们可以从简单的开始使用 Vue.js，然后逐步增加更多的功能和特性。

我们可以用不同的方式使用 Vue：

无需构建步骤，渐进式增强静态的 HTML
在任何页面中作为 Web Components 嵌入
单页应用 (SPA)
全栈 / 服务端渲染 (SSR)
Jamstack / 静态站点生成 (SSG)
开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

例如，我们可以在一个简单的 HTML 文件中使用 Vue.js 来渲染一个简单的消息：

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
  </head>
  <body>
    <div id="app">
      <h1>{{ message }}</h1>
      <input type="text" v-model="message" />
      <button @click="sendMessage">send message</button>
    </div>
  </body>
  <script type="module">
    import {
      createApp,
      ref,
    } from 'https://cdn.jsdelivr.net/npm/vue@3.5.11/dist/vue.esm-browser.prod.min.js';

    createApp({
      setup() {
        const message = ref('Hello, Vue.js!');
        const sendMessage = () => {
          alert(message.value);
        };
        return {
          message,
          sendMessage,
        };
      },
    }).mount('#app');
  </script>
</html>

声明式

什么是声明式编程？

要理解 Vue.js 的声明式特性，我们需要先理解什么是声明式编程。

声明式编程是一种编程范式，它允许开发者表达逻辑而无需明确描述控制流。也就是说，我们可以用简洁的代码来描述我们要做什么，而不是如何去做。这种编程方式更接近自然语言，因为它描述了预期的结果，而不是实现这些结果的具体步骤。

声明式编程的特点：

简洁性：代码更简洁，因为不需要编写控制流逻辑。
可读性：代码更易于理解，因为它直接表达了开发者的意图。
可维护性：由于代码的意图清晰，维护和修改也变得更容易。

例如：

在 SQL 中查询数据库就是一个典型的声明式编程的例子。你只需要声明你想要什么数据（SELECT 语句），而不需要告诉数据库如何去获取这些数据（数据库自己会处理）。

Vue.js 中的声明式

Vue 的声明式特性主要是指声明式渲染。声明式渲染是指 Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。

通过这套模板语法编写的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。

在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。

Vue 的模板语法包括以下核心的特性：

插值语法：可以在模板中插入变量，使用语法。
指令系统：Vue 提供了一系列基础指令，使得我们可以声明式的条件渲染、循环渲染和双向数据绑定等。并且支持自定义指令。
元素属性约定：Vue 对 HTML 元素的一些特定属性进行约定，如 key、ref、slot 等。这些约定属性赋予了 Vue 模板语法更多的意义。
元素属性绑定：Vue 对于 HTML 元素属性绑定提供了一系列约定的语法糖，使得我们可以声明式的绑定 HTML 元素的属性。比如类与样式支持对象、数组和函数绑定，属性可用于组件通信，属性穿透到子孙组件等。
事件绑定：Vue 提供了基于 HTML 元素的事件绑定提供了一系列约定的语法糖，使得我们可以声明式的处理事件。比如支持修饰符和按键码的监听器等。
插槽：这允许我们将一个组件的布局结构拆分出来，在父组件中声明子组件的插入位置。并且支持作用域插槽。
组件系统：Vue 提供了组件系统的 API，使得我们可以将界面拆分成一个个小的、可复用的个体。
内置组件：Vue 提供实用的内置组件，从框架层面提供通用的功能，。如 <transition>、<keep-alive>、<teleport>、<suspense> 等。

组件化

首先我们需要理解什么是组件？组件是描述了 UI 的一部分，组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。例如按钮或复选框。它既可以提高可维护性，也允许代码重用。而多个组件也可以组合成更大的组件。

Vue 的组件化：其实就是是对项目进行自上而下的拆分，把通用的、可复用的功能中的模型（Model）、视图（View）和视图模型（ViewModel）以黑盒的形式封装到一个组件中，然后暴露一些开箱即用的函数和属性配置供外部组件调用，实现与业务逻辑的解耦，来达到代码间的高内聚、低耦合，实现功能模块的可配置、可复用、可扩展。除此之外，还可以再由这些组件组合更复杂的组件、页面。

注意：组件化 ≠ 模块化。模块化是从文件层面上，对代码或资源进行拆分；而组件化是从设计层面上，对用户界面进行拆分。前端组件化更偏向 UI 层面，更多把逻辑放到页面中，使得 UI 元素复用性更高。

并且 Vue 推荐使用单文件组件，一个 Vue 单文件组件 (SFC)，通常使用 *.vue 作为文件扩展名，它是一种使用了类似 HTML 语法的自定义文件格式，用于定义 Vue 组件。一个 Vue 单文件组件在语法上是兼容 HTML 的。

每一个 *.vue 文件都由三种顶层语言块构成：<template>、<script> 和 <style>，以及一些其他的自定义块：

html

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
  export default {
    data() {
      return {
        msg: 'Hello world!',
      };
    },
  };
</script>

<style>
  .example {
    color: red;
  }
</style>

<custom1> This could be e.g. documentation for the component. </custom1>

为什么要使用单文件组件

使用单文件组件必须使用构建工具，但作为回报带来了以下优点：

使用熟悉的 HTML、CSS 和 JavaScript 语法编写模块化的组件
让本来就强相关的关注点自然内聚
预编译模板，避免运行时的编译开销
组件作用域的 CSS
在使用组合式 API 时语法更简单
通过交叉分析模板和逻辑代码能进行更多编译时优化
更好的 IDE 支持，提供自动补全和对模板中表达式的类型检查
开箱即用的模块热更新 (HMR) 支持

单文件组件是 Vue 框架提供的一个功能，并且在下列场景中都是官方推荐的项目组织方式：

单页面应用 (SPA)
静态站点生成 (SSG)
任何值得引入构建步骤以获得更好的开发体验 (DX) 的项目

响应式

什么是响应式？前端的响应式其实是指当数据发生变化时，UI 也会自动更新。Vue.js 的响应式系统让我们的应用数据变化可以驱动视图的变化。这也是为什么说 Vue 是 MVVM 框架的原因。

Vue 的响应式系统很巧妙地利用对象的 setter 和 getter 特性，通过在 getter 进行依赖收集，在 setter 触发更新，从而实现数据变化时发生副作用。

在 Vue2.x 是通过 Object.defineProperty() 实现响应式系统，在 Vue3.x 中使用 ES6 的 Proxy 实现响应式系统。

Vue 的响应式系统提供以下核心部件：

响应式 API：Vue.js 提供了一系列的 API，如 ref、reactive、computed 等，使得我们可以声明式地创建响应式数据。
响应式工具：Vue.js 提供了一系列的工具函数，如 watch、watchEffect 等，使得我们可以声明式地监听数据变化。
副作用：Vue.js 的响应式系统提供了副作用的概念，使得我们可以声明式的处理数据变化时需要执行的操作。

选项式

Vue 的选项式 API 是 Vue.js 2.x 中引入的编程范式，它是一种组织 Vue 组件逻辑的方式，它将组件的属性、方法、生命周期钩子等定义在一个选项对象中。这种方式类似于配置一个对象，其中包含了组件的各种配置项。它的核心设计理念是使用配置对象来创建组件实例。

Vue 的选项式 API 提供以下核心部件：

data：Vue.js 提供了 data，使得我们可以声明式的定义组件的响应式数据。
props：Vue.js 提供了 props，使得我们可以声明式的定义组件的对外接口。
方法：Vue.js 提供了方法，使得我们可以声明式的处理组件的方法。
watch 和 computed：Vue.js 提供了 watch 和 computed，使得我们可以声明式的监听和计算数据变化。
生命周期钩子：Vue.js 提供了生命周期钩子，使得我们可以声明式的处理组件的生命周期事件。
components：Vue.js 提供了 components，使得我们可以声明式的定义组件的内部结构。

选项式 API 的特点：

组织清晰：对于初学者来说，选项式 API 的组织方式直观且易于理解。
易于理解：每个选项的作用都很明确，易于学习和使用。
适用于小型到中型项目：对于结构不是特别复杂的项目，选项式 API 可以很好地组织代码。

选项式 API 的局限性：

代码分散：随着组件逻辑的增加，选项式 API 可能导致代码分散在多个选项中，难以维护。
难以追踪状态：在复杂的组件中，状态和逻辑的追踪可能变得困难。
类型推导困难：在复杂的组件中，类型推导可能变得困难。

组合式

Vue 3 引入的组合式 API（Composition API）是一种新的编写组件逻辑的方式，它提供了一种更灵活、更模块化的代码组织方法。组合式 API 允许开发者将组件的响应式状态、计算属性、方法、生命周期钩子等逻辑以函数的形式组织起来，从而使得代码更加灵活和可复用。

组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。它是一个概括性的术语，涵盖了以下方面的 API：

响应式 API：例如 ref() 和 reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。
生命周期钩子：例如 onMounted() 和 onUnmounted()，使我们可以在组件各个生命周期阶段添加逻辑。
依赖注入：例如 provide() 和 inject()，使我们可以在使用响应式 API 时，利用 Vue 的依赖注入系统。

虽然这套 API 的风格是基于函数的组合，但组合式 API 并不是函数式编程。组合式 API 是以 Vue 中数据可变的、细粒度的响应性系统为基础的，而函数式编程通常强调数据不可变。

组合式 API 的优势

更好的逻辑复用：组合式 API 通过组合函数（Composable functions）实现了逻辑的复用，解决了 mixins 在 Options API 中的缺陷，促进了代码的重用和维护。
更灵活的代码组织：组合式 API 允许开发者将相关的逻辑组合在一起，形成一个可复用的代码块，这使得代码更加模块化，易于理解和维护。
更好的类型推导：对于使用 TypeScript 的开发者，组合式 API 提供了更好的类型推导支持，因为它主要利用基本的变量和函数，这些本身就是类型友好的。
更小的生产包体积：使用组合式 API 和 <script setup> 语法的代码更高效，对代码压缩也更友好，因为模板可以直接访问 <script setup> 中定义的变量，无需从实例中代理。

`组合式 API` vs `选项式 API`

组合式 API 不像选项式 API 那样会手把手教你该把代码放在哪里。但反过来，它却让你可以像编写普通的 JavaScript 那样来编写组件代码。这意味着你能够，并且应该在写组合式 API 的代码时也运用上所有普通 JavaScript 代码组织的最佳实践。如果你可以编写组织良好的 JavaScript，你也应该有能力编写组织良好的组合式 API 代码。

选项式 API 确实允许你在编写组件代码时“少思考”，这是许多用户喜欢它的原因。然而，在减少费神思考的同时，它也将你锁定在规定的代码组织模式中，没有摆脱的余地，这会导致在更大规模的项目中难以进行重构或提高代码质量。在这方面，组合式 API 提供了更好的长期可维护性。

组合式函数（Hook）

在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。

当构建前端应用时，我们常常需要复用公共任务的逻辑。例如为了在不同地方格式化时间，我们可能会抽取一个可复用的日期格式化函数。这个函数封装了无状态的逻辑：它在接收一些输入后立刻返回所期望的输出。复用无状态逻辑的库有很多，比如你可能已经用过的 lodash 或是 date-fns。

相比之下，有状态逻辑负责管理会随时间而变化的状态。一个简单的例子是跟踪当前鼠标在页面中的位置。在实际应用中，也可能是像触摸手势或与数据库的连接状态这样的更复杂的逻辑。

约定和最佳实践

命名：组合式函数应该以 use 开头，表明它们是可复用的。
参数：组合式函数接收任意数量的参数，并且应该使用解构来获取它们。
副作用：组合式函数应该避免直接修改传入的参数，而是应该返回一个包含副作用的函数。
返回值：组合式函数应该返回一个包含副作用的函数，或者直接修改传入的参数。
组合式函数只能在 <script setup> 或 setup() 钩子中被调用。

与 Mixin 的对比

mixins 也让我们能够把组件逻辑提取到可复用的单元里。然而 mixins 有三个主要的短板：

不清晰的数据来源：当使用了多个 mixin 时，实例上的数据属性来自哪个 mixin 变得不清晰，这使追溯实现和理解组件行为变得困难。这也是我们推荐在组合式函数中使用 ref + 解构模式的理由：让属性的来源在消费组件时一目了然。
命名空间冲突：多个来自不同作者的 mixin 可能会注册相同的属性名，造成命名冲突。若使用组合式函数，你可以通过在解构变量时对变量进行重命名来避免相同的键名。
隐式的跨 mixin 交流：多个 mixin 需要依赖共享的属性名来进行相互作用，这使得它们隐性地耦合在一起。而一个组合式函数的返回值可以作为另一个组合式函数的参数被传入，像普通函数那样。

虚拟 DOM

虚拟 DOM（Virtual DOM）是一种编程概念，意为将目标所需的 UI 通过数据结构“虚拟”地表示出来，用于提高 Web 应用的性能和效率。它是实际 DOM 树的轻量级、非真实存在的表示，通常用一个普通的 JavaScript 对象来表示。

虚拟 DOM 的核心思想

性能优化：
- 直接操作真实 DOM 是昂贵的，因为每次 DOM 操作都可能引起浏览器的重新渲染，导致性能问题，尤其是在复杂的应用中。
- 虚拟 DOM 允许开发者在内存中操作一个轻量级的 DOM 副本，只有在确定需要更新时，才将这些更改批量应用到真实 DOM 上，从而减少 DOM 操作的次数。
数据驱动的视图：
- 在数据驱动的框架中（如 React、Vue 等），视图是根据数据的状态来构建的。虚拟 DOM 提供了一种高效的方式来比较当前数据状态和之前状态的视图差异。
差异比较（Diffing）：
- 当应用的状态改变时，虚拟 DOM 会创建一个新的虚拟 DOM 树，并与旧的虚拟 DOM 树进行比较，这个过程称为“差异比较”或“Diffing”。
- 通过比较，虚拟 DOM 算法可以找出两棵树之间的最小差异，即哪些部分发生了变化，而不需要重新渲染整个组件。
批量更新：
- 一旦确定了需要更新的部分，虚拟 DOM 将这些更改批量应用到真实 DOM 上，这通常通过一系列高效的 DOM 操作来完成，从而提高性能。

虚拟 DOM 的工作流程

状态变更：
- 当应用的状态发生变化时，开发者会更新组件的状态。
渲染新的虚拟 DOM：
- 根据新的状态，框架会创建一个新的虚拟 DOM 树。
差异比较：
- 新的虚拟 DOM 树与旧的虚拟 DOM 树进行比较，以找出差异。
更新真实 DOM：
- 根据差异比较的结果，框架会生成一个最小的更新操作列表，然后应用这些操作到真实 DOM 上，从而更新视图。
视图更新：
- 真实 DOM 更新后，用户看到的视图也会相应地更新。

Vue 的虚拟 DOM 的实现

编译：Vue 模板被编译为渲染函数：即用来返回虚拟 DOM 树的函数。这一步骤可以通过构建步骤提前完成，也可以通过使用运行时编译器即时完成。
挂载：运行时渲染器调用渲染函数，遍历返回的虚拟 DOM 树，并基于它创建实际的 DOM 节点。这一步会作为响应式副作用执行，因此它会追踪其中所用到的所有响应式依赖。
更新：当一个依赖发生变化后，副作用会重新运行，这时候会创建一个更新后的虚拟 DOM 树。运行时渲染器 Diff 算法，将它与旧树进行比较，然后将必要的更新应用到真实 DOM 上去。

带编译时信息的虚拟 DOM

在 Vue 中，框架同时控制着编译器和运行时。这使得它可以为紧密耦合的模板渲染器应用许多编译时优化。编译器可以静态分析模板并在生成的代码中留下标记，使得运行时尽可能地走捷径。与此同时，Vue 仍旧保留了边界情况时用户想要使用底层渲染函数的能力。这种混合解决方案称为带编译时信息的虚拟 DOM。

这种技术可以提高虚拟 DOM 运行时性能，编译时信息主要包括下面几方面：

静态提升：在编译时，编译器会识别出哪些元素是静态的，这意味着它们不会随着状态改变而改变。所以 Vue 编译器自动地会提升这部分 vnode 创建函数到这个模板的渲染函数之外，并在每次渲染时都使用这份相同的 vnode，渲染器知道新旧 vnode 在这部分是完全相同的，所以会完全跳过对它们的差异比对。
更新类型标记：对于单个有动态绑定的元素来说，编译器可以在编译时推断出该元素的更新类型，例如：动态属性、动态类或动态样式。每一个类型都有对应的更新类型标记，编译是会在渲染函数中注入对应的标记，以便在运行时能够在更新带有动态绑定的元素时做最少的操作。
树结构打平：Vue 编译时引入一个概念*区块（block）*：内部结构是稳定的一个部分可被称之为一个区块。每一个块都会追踪其所有带更新类型标记的后代节点 (不只是直接子节点)。当这个组件需要重渲染时，只需要遍历这个打平的树而非整棵树。这也就是我们所说的树结构打平，这大大减少了我们在虚拟 DOM 协调时需要遍历的节点数量。模板中任何的静态部分都会被高效地略过。

虚拟 DOM 的优点

性能提升：通过减少真实 DOM 操作，可以显著提高应用的性能。
跨平台能力：虚拟 DOM 可以被渲染到不同的平台，不仅限于 Web 浏览器，还可以是原生移动应用或其他 UI 框架。
易于测试：由于虚拟 DOM 是 JavaScript 对象，可以在没有真实 DOM 的环境中进行测试。

虚拟 DOM 的缺点

内存占用：虚拟 DOM 需要额外的内存来存储虚拟 DOM 树，对于非常大型的应用，这可能会成为一个问题。
学习曲线：对于初学者来说，理解虚拟 DOM 的概念和工作原理可能需要一定的时间。

虚拟 DOM 是现代前端框架如 React 和 Vue 的核心特性之一，它为构建高性能的 Web 应用提供了一种有效的方法。

工具化

Vue.js 是一套完整的构建工具，它提供了从创建项目到部署应用的一整套解决方案。Vue.js 的核心库只包含响应式、组件化和工具化的基本功能，而其他的功能则通过插件或第三方库来实现。

Vue.js 的工具化特性包括：

CLI：Vue.js 提供了一个命令行工具（Command Line Interface），可以用来创建项目、运行开发服务器、构建应用等。
构建工具：Vue.js 提供了一整套构建工具，包括 webpack、Rollup 和 Parcel 等。这些工具可以帮助我们创建项目、打包应用、优化性能等。
插件：Vue.js 提供了一系列的插件，可以用来扩展 Vue.js 的功能。例如，vue-router、vuex 和 vue-i18n 等都是常用的工具化插件。
VueUse：VueUse 是一个基于 Vue.js 的实用函数集合，它提供了许多常用的功能，例如状态管理、数据获取、副作用管理等。
生态系统：Vue.js 的生态系统非常庞大，并且不断增长。Vue.js 提供了大量的插件、工具和资源，可以帮助我们更高效地开发应用。

跨平台能力

Vue.js 的跨平台能力主要体现在以下几个方面：

多端运行：Vue.js 开发的单页面应用（SPA）可以在多个平台运行，包括 Web、iOS、Android 等。通过使用 Vue.js 开发的跨平台框架，如 uni-app，开发者可以使用一套代码部署到不同的平台。
虚拟 DOM：Vue.js 利用虚拟 DOM 技术，提高了应用的性能。虚拟 DOM 允许 Vue.js 在内存中操作一个轻量级的 DOM 副本，从而减少直接操作真实 DOM 的次数，这在跨平台开发中尤为重要，因为不同的平台可能有不同的 DOM 实现。
组件化开发：Vue.js 的组件化开发方式使得代码更容易维护和复用。开发者可以创建可复用的组件，这些组件可以在不同的平台和项目中使用。
响应式数据绑定：Vue.js 的响应式数据绑定机制，使得当数据发生变化时，视图会自动更新。这种机制在跨平台开发中非常有用，因为它减少了手动更新视图的工作。
插件和工具支持：Vue.js 拥有丰富的插件和工具生态系统，如 Vuex 状态管理、Vue Router 路由管理等，这些工具和插件可以在不同的平台上提供一致的体验。
社区支持：Vue.js 拥有一个庞大的社区，提供了大量的教程、示例和插件，帮助开发者解决问题和提高开发效率。
跨平台框架：除了 Vue.js 本身，还有一些基于 Vue.js 的跨平台框架，如 uni-app，它允许开发者使用 Vue.js 的语法编写一次代码，然后将其编译成不同平台的原生代码。
原生组件支持：一些跨平台框架，如 uni-app，支持原生组件的调用，这意味着开发者可以使用原生平台的特性和功能，同时保持代码的跨平台兼容性。

通过上述特性，Vue.js 及其相关框架和工具为开发者提供了强大的支持，使得使用 Vue.js 开发跨平台应用变得更加高效和便捷。

安全机制

Vue.js 为应用提供了多种安全机制，并提供多种安全策略，以保护应用免受 XSS 攻击和数据泄露等威胁。Vue.js 的安全机制包括：

要使用无法信赖的模板：使用 Vue 时最基本的安全规则就是不要将无法信赖的内容作为你的组件模板。使用无法信赖的模板相当于允许任意的 JavaScript 在你的应用中执行。更糟糕的是，如果在服务端渲染时执行了这些代码，可能会导致服务器被攻击。
自动转义 HTML 内容：无论是使用模板还是渲染函数，动态 attribute 以及 HTML 内容都是自动转义的。
以防 HTML 注入：Vue 的 v-html 指令允许你渲染 HTML 字符串，但必须非常小心，因为这会带来 XSS 的风险。在渲染 HTML 字符串时，必须确保它是可信的，并且没有恶意代码。
以防 URL 注入：当一个 URL 允许通过 javascript: 执行 JavaScript，即没有进行无害化处理，那么就会有一些潜在的安全问题。可以使用一些库来解决此类问题，比如 sanitize-url，但请注意：如果你发现你需要在前端做 URL 无害化处理，那你的应用已经存在一个更严重的安全问题了。任何用户提供的 URL 在被保存到数据库之前都应该先在后端做无害化处理。
以防 style 注入：当使用 v-bind:style 时，应该确保 style 的值是可信的。
以防 JS 注入：我们强烈建议任何时候都不要在 Vue 中渲染 <script>，因为模板和渲染函数不应有其他副作用。但是，渲染 <script> 并不是插入在运行时执行的 JavaScript 字符串的唯一方法。
使用 Vue 提供的 API：Vue 提供了一些安全相关的 API，如 v-html、v-bind:style 等，可以帮助开发者避免 XSS 攻击和数据泄露。

一个最基本的规则就是只要你允许执行未经无害化处理的、用户提供的内容 (无论是 HTML、JavaScript 还是 CSS)，你就可能面临攻击。无论是使用 Vue、其他框架，或是不使用框架，道理都是一样的。

总结

Vue.js 是一个非常流行的 JavaScript 框架，它提供了许多强大的功能和特性，包括组合式函数、虚拟 DOM、工具化、跨平台能力、安全机制等。这些特性使得 Vue.js 成为构建高性能、可维护的 Web 应用的首选框架之一。

Vue.js 的组合式函数、虚拟 DOM、工具化、跨平台能力、安全机制等特性为开发者提供了丰富的选择和灵活性，帮助我们在开发过程中更加高效和便捷地构建应用。

最后，Vue.js 是一个非常值得学习和使用的框架，它提供了许多有用的功能和特性，帮助我们构建高效、可维护的 Web 应用。

什么是 Vue.js？ ​

渐进式 ​

声明式 ​

什么是声明式编程？ ​

Vue.js 中的声明式 ​

组件化 ​

响应式 ​

选项式 ​

组合式 ​

组合式 API 的优势 ​

组合式 API vs 选项式 API ​

组合式函数（Hook） ​

虚拟 DOM ​

虚拟 DOM 的核心思想 ​

虚拟 DOM 的工作流程 ​

Vue 的虚拟 DOM 的实现 ​

虚拟 DOM 的优点 ​

虚拟 DOM 的缺点 ​

工具化 ​

跨平台能力 ​

安全机制 ​

总结 ​