1. 性能提升：打包更小、渲染更快

2. 更好支持 TS

3. 组合式 API（setup）

4. 响应式改用 Proxy（Vue2 用 Object.defineProperty）

Vue2 响应式局限：无法检测属性新增/删除；数组通过索引直接赋值或改 length 无效

静态模块打包工具，分析依赖并打包 html/css/js 等资源。

功能：转译（TS/SCSS）、压缩、代码分割、HMR 热更新。

与 Vite 区别：Webpack 先打包再启动（慢）；Vite 开发时用 ESModule 按需加载 + esbuild 预构建（快），生产仍用 Rollup 打包。

节流：固定时间内只执行一次。场景：滚动监听、鼠标拖拽、视频进度条。

防抖：停止触发后延迟执行，连续触发只执行最后一次。场景：搜索框输入、窗口大小改变resize。

hash：URL 带 #，hash 变化不请求服务器，兼容性好。

history：URL 无 # 更美观，基于 pushState；刷新或直接访问子路径需服务器 fallback 到 index.html，否则 404。

在下次 DOM 更新循环结束后执行回调，用于获取更新后的 DOM。

三者都是声明变量，核心区别如下：

1. 作用域

var：函数作用域（在函数内声明则只在函数内有效）

let / const：块级作用域（只在 {} 内有效，如 if、for、{} 代码块）

2. 变量提升

var：会提升，可在声明前访问，值为 undefined

let / const：会提升但存在「暂时性死区」，声明前访问会报错

3. 能否重复声明

var：同一作用域可重复声明

let / const：同一作用域不可重复声明

4. 能否重新赋值

var / let：可以重新赋值

const：声明后不能重新赋值（基本类型不能改，对象/数组不能换引用，但可改内部属性）

5. 声明时是否必须赋值

var / let：可以不赋初值

const：声明时必须赋值

6. 是否挂载到 window（浏览器环境）

var：会挂到 window

let / const：不会挂到 window

记忆口诀：

var 老语法，函数作用域，能提升能重复

let 新语法，块级作用域，可改不可重复

const 常量，块级作用域，声明必赋值，引用不可改

三类：

全局：beforeEach、beforeResolve、afterEach

路由独享：beforeEnter

组件内：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

原则上history模式前端会拦截，但是在请求服务器的时候，服务器不一定有对应的路由，所以需要nginx重定向为index.html，否则刷新页面就会出现404

异步请求，动态加载数据，不需要刷新浏览器

BOM：浏览器对象模型，顶层是 window，含 location、navigator、history 等。

DOM：文档对象模型，顶层是 document，操作页面元素。

存在小数点误差像素，不灵活

state：状态

mutations：同步修改 state

actions：异步操作，通过 commit 调用 mutations

getters：派生/计算状态

modules：模块化拆分 store

DNS 解析 → TCP 三次握手 → 发送 HTTP 请求 → 服务器响应 → 浏览器解析 HTML/CSS/JS → 构建 DOM/CSSOM → 渲染页面 → TCP 四次挥手

图片懒加载、减少数据请求、按需加载引入、减少图片或压缩图片大小

解析 CSS 生成 CSSOM；选择器匹配从右往左（减少无效遍历）；再将样式应用到对应 DOM 元素。

历史遗留 bug：null 在底层用全 0 指针表示，与 object 类型标签相同，typeof 按标签判断所以返回 'object'。

then、catch、finally、resolve、reject、all、race、allSettled

解析 HTML → DOM 树；解析 CSS → CSSOM → 合成渲染树 → 布局(layout) → 绘制(paint) → 合成(composite)

props、$emit、ref、$parent/$children、provide/inject、vuex/pinia、事件总线(mitt)、插槽

基本解构：[a,b]=arr

默认值：[a=1]=[]

剩余：const [a,...rest]=arr

交换变量：[a,b]=[b,a]

对象解构、嵌套解构、函数参数解构

attribute：HTML 标签上的特性，初始值来自源码，如 id、class、disabled。

property：DOM 对象的 JS 属性，可读写，部分与 attribute 同步（如 id），部分不同（如 input 的 value）。

组件之间切换时，把状态储存在内存中，防止重复渲染，提高用户体验。（例如：列表点击进入详情，从详情再返回到列表不再重新渲染）

let/const、箭头函数、模板字符串、解构赋值、扩展运算符、Symbol、Promise、class、模块化(import/export)、Set/Map、数组新方法(map/filter/reduce/find 等)

根组件 data 可以是对象；子组件 data 必须是函数，每次创建组件返回新对象，避免多实例共享同一数据。

ES5：原型链继承（prototype），存在引用共享、无法传参等问题。

ES6：class + extends + super，语法更清晰，本质是语法糖。

事件修饰符：.stop(阻止冒泡) .prevent(阻止默认) .capture(捕获阶段) .self(仅自身触发) .once(只触发一次)

按键修饰符：.enter 等

v-model 修饰符：.lazy .number .trim

Vue2 的 .sync：prop 双向绑定语法糖（Vue3 用 v-model:xxx）

支持缓存、计算属性、必须return一个值

defer/async 属性、动态创建 script、import() 动态导入、懒加载模块

export可导出多个，接收时候必须为{},export default只能导出一个

computed：有缓存，依赖变化才重算，必须 return，适合派生数据。

watch：无缓存，监听数据变化执行回调，适合异步或副作用操作。

原型是指把公共的方法和属性放在函数的原型对象prototype上，原型链是实例对象都有一个私有的__proto__属性，这个属性指向原型对象prototype，因此它也可以使用原型对象的方法和属性，可以通过此方法一直往上面查找，直到找到或者找到为null为止。

未清理的定时器/监听器、闭包持有大对象、意外的全局变量、脱离 DOM 仍被引用的节点

浏览器同源策略限制跨域请求。解决：CORS（主流）、开发代理(proxy)、nginx 反向代理、JSONP（仅 GET，已较少用）

前者是es6语法、后者为es7语法

promise为链条式调用，后者更简单，可读性更高，通过await实现异步阻拦

前者通过then、catch执行回调函数，后者可通过try/catch捕获失败

组件化开发、轻量简洁、双向数据绑定、响应式、渐进式

HTTP 明文传输；HTTPS = HTTP + TLS/SSL，数据加密传输 + 证书校验身份，防窃听和篡改。

axios 基于 XMLHttpRequest，用 Promise 封装，支持请求/响应拦截器、自动转 JSON、取消请求等；原生 ajax 需手动处理回调和封装。

link 是 HTML 标签，并行加载；@import 是 CSS 语法，会阻塞渲染、串行加载，兼容性更差。

三种事件模型：

1. 原始模型（DOM0）：只有冒泡，同一事件只能绑一个

2. IE 模型（已废弃）：只有冒泡，this 指向 window

3. DOM2 模型（标准）：支持捕获+冒泡，可绑多个监听

3次握手、4次挥手

虚拟dom是vue的一种性能优化手段，对比差异，更高效的实现局部视图刷新，

虚拟dom就是一个普通的js对象，vue通过diff算法对比新旧虚拟dom的差异，改变虚拟dom，改变的地方会应用到真实dom，不会更新全局视图

单一数据源；state 只读；只能通过指定函数修改（Redux 用 reducer，Vuex 用 mutations）

ref 可包装任意类型，访问需 .value；reactive 仅用于对象/数组，直接访问属性。底层都是 Proxy，ref 多包一层 .value。

嵌入式页面

跨域请求资源

更高效更新dom和排序

防止数据渲染混乱的情况出现

不支持ie9以下

单页面不利于SEO优化

TS 是 JS 超集，编译为 JS；TS 静态类型检查，编译期发现错误；JS 动态类型，运行时才能发现类型问题。

js原型链实现继承的作用

html自带样式，初始化之后对于标签的样式能统一管理

Vue2：Object.defineProperty 劫持数据 + 发布订阅；Vue3：Proxy 代理。input 等通过 v-model 监听 input 事件实现视图同步。

:hover、:focus、:active、:first-child、:nth-child()、:not() 等（::before/::after 是伪元素，不是伪类）

IEEE 754 浮点数精度问题。解决：先乘倍数转整数运算，或用 toFixed 格式化显示，或 decimal.js 等库。

Array.isArray(val)（推荐）、val instanceof Array、Object.prototype.toString.call(val) === '[object Array]'

1. 创建空对象 2. 链接原型（prototype）3. 绑定 this 执行构造函数 4. 若构造函数无 return 对象则返回新对象

接收多个 Promise，全部成功才 resolve（返回结果数组），任一失败立即 reject。

apply、call、bind ，apply和call区别传递参数类型不同

beforeCreate(父)、created(父)、beforeMount(父)、beforeCreate(子)、created(子)、beforeMount(子)、mounted(子)、mounted(父)

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted（Vue3；Vue2 为 beforeDestroy/destroyed）

子类 constructor 中必须先调用 super()，才能使用 this（本质是调用父类构造函数初始化实例）。

把变量赋值为null

关闭定时器

避免闭包的滥用

JS 是弱类型/动态类型语言：变量声明无需指定类型，运行时可随意改变类型。

同级比较 + 双端头尾指针；用 key 提升列表复用；返回 patch 记录差异后最小化更新真实 DOM。

完整 Vue3 项目搭建流程（Vite + Vue3 + TS 推荐）：

一、初始化项目

1. node 版本建议 18+

2. npm create vite@latest my-project -- --template vue-ts

3. cd my-project && npm install

二、目录结构规划

src/

api/ 接口请求

assets/ 静态资源

components/ 公共组件

composables/ 组合式函数

router/ 路由

stores/ pinia 状态

utils/ 工具函数

views/ 页面

App.vue

main.ts

三、基础配置

1. vite.config.ts：配置 @ 别名、dev server、proxy 代理

2. env 环境变量：.env.development / .env.production（VITE_API_BASE）

3. tsconfig：paths 与 @ 别名一致

四、核心依赖安装

npm i vue-router pinia axios

npm i -D sass less eslint prettier

五、路由 router

1. createRouter + createWebHistory

2. 路由懒加载 component: () => import('@/views/xxx.vue')

3. 路由守卫 beforeEach 做登录校验

4. main.ts 中 app.use(router)

六、状态管理 pinia

1. stores/user.ts、stores/app.ts 按模块拆分

2. main.ts 中 app.use(createPinia())

七、封装 axios

1. 创建 request 实例（baseURL、timeout）

2. 请求拦截器带 token

3. 响应拦截器统一处理错误码/登录过期

4. api 目录按业务拆分接口函数

八、公共能力

1. 封装 Layout（侧边栏/顶栏）

2. 公共组件（Button、Modal、Table）

3. utils（storage、format、validate）

4. composables（useUser、useLoading）

九、样式方案

1. 选 sass/less + CSS 变量做主题

2. 全局 reset/normalize

3. 移动端适配 rem 或 postcss-px-to-viewport

十、规范与部署

1. ESLint + Prettier 统一代码风格

2. npm run build 打包 dist

3. nginx 部署静态资源 + history fallback

4. 可选：husky 提交前 lint

首先是 effect 方法调用，然后触发调用 effectFn 函数本身，然后赋值 activeEffect，然后触发 componentUpdateFn 函数，读取 count，触发 get 再触发 track 建立 effect 和 key 依赖关系，然后修改 count，触发 set 方法调用 trigger 方法通知更新，effect 调用 scheduler 方法，触发 queueJob 方法，然后把任务加入 jobs 队列中，然后触发 flushJobs 方法，并更改 isFlushing 为 true，如果还有数据更改，执行同步任务，步骤如上一致，一直到同步任务没有了，触发微任务遍历执行任务的 .run() 方法。然后再去触发 effectFn 方法调用 fn() 函数，也就是 componentUpdateFn 这个方法，然后获取新的虚拟 dom，判断是否首次挂载，首次挂载创建节点并且 append。不是首次则通过 patch 方法对比差异，把 old 的虚拟 dom.el 赋值给新的虚拟 dom，再更改 newVNode.el.textContent 更新真实 DOM。这样就实现了响应式功能。

【初始化】

effect → effectFn → componentUpdateFn → 读 count → track → mount 真实 DOM

【改数据（同步）】

set → trigger → scheduler → queueJob（去重）→ 安排微任务

【微任务】

flushJobs → job.run() → 再跑 componentUpdateFn

【更新 DOM】

render 读最新 count → patch 对比 → el.textContent 改真实节点