Vue.js是一款渐进式 JavaScript 框架，由尤雨溪于2014年创建，专门用于构建用户界面的渐进式 JavaScript 框架。与其他大型框架不同，Vue 设计的初衷是可以逐步引入。它的核心库只关注视图层，易于上手，同时也非常适合单页应用（SPA）的开发。
-
渐进式框架：可逐步集成到现有项目，也可构建完整单页应用
-
组件化开发：通过
.vue单文件组件实现高内聚、低耦合 -
响应式系统：自动追踪数据变化并更新视图
-
虚拟 DOM：优化渲染性能的差异化更新机制
-
是基于
Object.defineProperty实现数据劫持，通过 getter/setter 自动追踪依赖 -
存在对数组方法和对象属性增减的监测限制
虚拟 DOM
-
使用轻量级虚拟 DOM 进行差异比对
-
通过高效的 diff 算法最小化 DOM 操作
优点：
渐进式框架：Vue 可以作为一个简单的库引入到项目中，也可以扩展为一个功能齐全的框架。你可以根据需要逐步引入 Vue 的功能。
双向数据绑定：Vue 提供了简洁的双向数据绑定机制，使得视图和数据能够保持同步。
组件化：Vue 的组件系统允许开发者构建可复用的自定义元素，使得应用的开发和维护更加方便。
虚拟 DOM：Vue 使用虚拟 DOM 来优化性能，通过最小化实际 DOM 操作，提高渲染效率。
易于集成：Vue 可以轻松集成到现有项目中，也可以与其他库或框架结合使用。
缺点：
生态系统不够完善
可扩展性稍差
SPA(单页面应用)介绍：多页面应用有多个html文件，通过a标签的连接联通各个页面
开发起来太冗余，编译、压缩很耗时间
页面之间的跳转速度太慢，这个时候就会出现一个严重的问题，白屏
单页面应用(SPA)
不需要刷新页面，因为它就是一个页面
这个页面内容在切换
单页面内容之间的切换要想实现我们就是用路由了
如今我们的app、后台管理系统 ，可视化主要的开发形式就是spa
局限性
-
响应式系统对 ES6+ 数据结构支持有限
-
代码组织在大型项目中易显臃肿
-
TypeScript 支持不如 Vue 3 完善
Vue 3 于 2020 年 9 月发布，是 Vue.js 的重大升级版本，主要改进包括性能优化、新特性引入和更好的 TypeScript 支持。
1. Composition API
目的：解决逻辑复用和代码组织问题（替代 Options API 的局限性）。
核心：通过
setup()函数组织代码，支持逻辑的灵活组合。import { ref, computed } from 'vue';
export default {
setup() {
const count = ref(0);
const double = computed(() => count.value * 2);
const increment = () => count.value++;
return { count, double, increment };
}
};逻辑复用更简单（如使用
useFetch自定义 Hook）。代码按功能而非选项（data、methods）组织，提升可读性。
2.性能优化：
-
渲染快，虚拟 DOM 重写（优化 diff 算法），静态节点提升（Static Hoisting）和补丁标记（Patch Flags），减少运行时开销。
-
体积小：核心库体积减少约 40%（Tree-shaking 支持，按需引入模块）。
3.更好的 TypeScript 支持：源码使用 TypeScript 重写，提供完整的类型定义，开发体验更友好，IDE 提示更精准。
4. 新内置组件与 API
Teleport：将组件渲染到 DOM 任意位置（如模态框、Toast）。
<teleport to="#modal-container">
<div class="modal">内容</div>
</teleport>Suspense：优雅处理异步组件加载状态。
Fragment：支持多根节点模板。
自定义渲染器：支持非 DOM 环境（如 Canvas、WebGL）。
5.响应式系统升级
Proxy 替代 Object.defineProperty：支持数组和对象的新增/删除属性监听，性能更高，无需递归初始化。
独立的响应式 API：
import { reactive, effect } from 'vue';
const state = reactive({ count: 0 });
effect(() => console.log(state.count)); // 自动追踪依赖
