Vue.js 简介

概述

Vue.js（发音为“view”）是一个旨在简化构建交互式 Web 界面的 JavaScript 框架。2.7 版本，代号为“Swan Song”，是 Vue 2.x 系列在 2023 年 12 月 31 日达到生命周期结束前的最后一个功能发布版本。

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. It is designed from the ground up to be incrementally adoptable, and can easily scale between a library and a framework depending on different use cases. It consists of an approachable core library that focuses on the view layer only, and an ecosystem of supporting libraries that helps you tackle complexity in large Single-Page Applications.

来源：README.md42-44

Vue.js 2.7 的显著之处在于，它将 Vue 3 的一些核心功能（包括 Composition API）回溯到 Vue 2 中，同时保持了与现有 Vue 2 应用程序的向后兼容性。

主要功能

声明式渲染：Vue 通过模板语法扩展了标准 HTML，用于声明输出
基于组件的架构：将 UI 组件与其自身的逻辑、样式和标记封装在一起
响应式数据绑定：当底层数据更改时，自动更新 DOM
虚拟 DOM：通过轻量级的虚拟 DOM 实现高效地更新真实 DOM
渐进式框架：可用于页面的一小部分，也可扩展以支持完整的 SPA
Composition API：提供了一种更灵活的方式来组织组件逻辑（在 2.7 版本中从 Vue 3 回溯）
单文件组件 (SFC)：将模板、脚本和样式组合在一个 .vue 文件中

来源：README.md42-44 CHANGELOG.md270-283

浏览器兼容性

Vue.js 支持所有符合 ES5 标准的浏览器，包括所有现代浏览器以及 Internet Explorer 9 及以上版本。

来源：README.md46-48

架构

Vue.js 遵循清晰的架构，支持其响应式的、面向组件的 UI 开发方法。

高层架构

来源：.github/CONTRIBUTING.md98-117 README.md42-44

架构由几个核心子系统组成

核心运行时：与平台无关的代码，可在任何 JavaScript 环境中运行
响应式系统：跟踪数据变化并触发更新
组件系统：管理组件生命周期和组合
虚拟 DOM：创建和更新 DOM 的轻量级表示
编译器系统：将 Vue 模板转换为渲染函数
全局 API：提供应用程序级别的功能

响应式系统

来源：.github/CONTRIBUTING.md108

Vue 的响应式系统基于观察者模式。当在渲染过程中访问 Vue 数据时，会跟踪依赖关系，当数据发生变化时，依赖于该数据的组件会自动更新。

在开发模式下，Vue 使用 JavaScript 的 Proxy（如果可用）来提供访问未定义属性时的有用警告。

来源：src/core/instance/proxy.ts16-25

分发和构建格式

Vue.js 以多种格式分发，以适应不同的使用场景。

可用构建格式

构建格式	文件	描述	用例
UMD	`dist/vue.js`	包含编译器的完整构建	通过 `<script>` 标签直接在浏览器中使用
UMD 运行时	`dist/vue.runtime.js`	仅运行时构建	当使用预编译模板时
CommonJS	`dist/vue.common.js`	包含编译器的完整构建	适用于 webpack/browserify 等打包工具
CommonJS 运行时	`dist/vue.runtime.common.js`	仅运行时构建	适用于带有预编译模板的打包工具
ES 模块	`dist/vue.esm.js`	包含编译器的完整构建	适用于现代打包工具
ES 模块运行时	`dist/vue.runtime.esm.js`	仅运行时构建	适用于带有预编译模板的现代打包工具
ES Module Node	`dist/vue.runtime.mjs`	Node.js 运行时	适用于支持 ESM 的 Node.js

来源：package.json6-9 package.json19-38

构建流程图

来源：package.json41-62 .github/CONTRIBUTING.md82-95

“完整版”和“仅运行时版”之间的区别

完整版：包含模板编译器，支持在浏览器中编译模板
仅运行时版：无法在浏览器中编译模板，但体积更小

生态系统和核心软件包

Vue.js 拥有广泛的官方和社区维护的软件包生态系统，以满足各种应用程序的需求。

官方核心软件包

包	描述	仓库
vue-router	单页应用路由	vuejs/vue-router
vuex	大规模状态管理	vuejs/vuex
vue-cli	项目脚手架和构建工具	vuejs/vue-cli
vue-loader	webpack 的单文件组件加载器	vuejs/vue-loader
vue-server-renderer	服务器端渲染支持	Vue.js 主仓库的一部分
vue-class-component	基于类的 API 的 TypeScript 装饰器	vuejs/vue-class-component
vue-devtools	浏览器 DevTools 扩展	vuejs/vue-devtools

来源：README.md52-86

配套软件包

Vue 2.7 包含几个与主包一起分发的配套软件包

@vue/compiler-sfc：Vue 单文件组件（.vue 文件）的编译器
来源：packages/compiler-sfc/package.json1-14
vue-server-renderer：服务器端渲染能力
来源：packages/server-renderer/package.json1-35
vue-template-compiler：用于构建时工具的模板编译
来源：packages/template-compiler/package.json1-8

Vue 2.7 与 Vue 3 的关系

Vue 2.7 代表了 Vue 2 和 Vue 3 之间的过渡版本，它将 Vue 3 的一些关键功能回溯，同时保持与 Vue 2 API 的兼容性。

Vue 3 回溯功能

Vue 2.7 包含以下来自 Vue 3 的功能：

Composition API：提供了一种更灵活的方式来组织组件逻辑
SFC <script setup>：简化的单文件组件语法
SFC CSS v-bind：使用响应式值进行动态 CSS 属性设置

来源：CHANGELOG.md270-283

与 Vue 3 的行为差异

虽然 Vue 2.7 带来了许多 Vue 3 的功能，但在实现上存在一些重要的差异。

Vue 2.7 使用原始的 Vue 2 基于 getter/setter 的响应式系统，而不是 Vue 3 的基于 Proxy 的系统。
Vue 2 的变更检测注意事项仍然适用（例如，添加新属性需要使用 Vue.set()）。
响应式 API 直接转换对象，而不是创建代理。

来源：CHANGELOG.md298-316

项目结构

Vue.js 代码库组织在几个关键目录中

来源：.github/CONTRIBUTING.md97-129

许可与贡献

Vue.js 在 MIT 许可下发布，主要由 Evan You 和 Vue.js 社区维护。

The MIT License (MIT)

Copyright (c) 2013-present, Yuxi (Evan) You

来源：LICENSE1-3

欢迎根据项目贡献指南为 Vue.js 做出贡献，贡献指南可在项目的 GitHub 存储库中找到。

来源：.github/CONTRIBUTING.md1-9 .github/PULL_REQUEST_TEMPLATE.md1-36