vue3 响应式原理响应式就是会自动跟踪依赖的变化，当依赖发生改变时会触发所有追踪该依赖的副作用函数执行，在 JS 中，没有办法直接对变量的变更进行追踪，但可以对对象属性的读写进行追踪，有两种劫持 property 的访问方式，分别是 getter / setter 和 Proxies ，对属性依赖进行劫持后可以进行响应式依赖化，每当检测到响应式依赖变更时会自动查找订阅该依赖的副作用函

vue双向绑定双向绑定其实就是 mvvm 中的数据到视图以及视图到数据双向驱动的一个形式，其中数据到视图的绑定依赖于JS中的属性劫持，可以通过响应式对象依赖的变化触发对应的订阅者副作用函数执行，达到数据到视图的单向绑定，视图到数据的单向绑定则是通过 Compile 编译器编译模板节点中带有v-model 或者 v-on 之类的指令，生成对应的带有模板事件的节点，以及这些节点相关依赖的副作用函数集合

watch 和 watchEffectwatchwatch() 有三个参数第一个是 name 监听对象名称第二个是副作用函数 (curVal,preVal)=>{ 要做的事 }第三个是配置选项 options: 包括是否深度监听等 watchEffectwatchEffect 有两个参数，第一个参数是 effect 副作用函数回调，创建就会立即执行，当 effect 函数中依赖的响

单向数据流指的是vue 组件中的数据传递方式只能是父组件向子组件传递，不允许反向传递 优点： 简化数据流动，单向数据可以帮助我们更好的理解数据的流动方向，避免了数据乱流导致的混乱和复杂性 提高代码可维护性，由于数据是单向的，因此数据改变时只需要查找受影响的组件即可，提高了代码的可维护性 增强代码可预测性，由于数据是单向的，那么就可以更好的预测数据的流动，从而更准确的追踪问题，排查错误

指令 Directive & 修饰符基本概念12<div v-text="x"></div><div v-html="x"></div> 在 Vue 中以 v- 开头的东西就是指令 语法12v-指令名:参数=值，v-on:click=add 如果值里没有特殊字符，则可以不加引号有些指令没有参数和值，如

TypeScriptkeyof返回一个由对象 key 组成的联合类型 123type ObjectTypeA = { a: number; b: string; c: boolean };type UnionTypeA = keyof ObjectTypeA; //"a" | "b" | "c"const unionT

Tree Shakingvue3 中 Tree Shaking 特性vue3 中的 tree shaking主要是借助了 ES6 的模块语法（import和export），基于 ES6 模块的静态编译思想，在编译时就能确定模块的依赖关系，以及输入和输出的变量无非就是做了两件事： 编译阶段利用 ES Module 判断哪些模块已经加载 判断哪些模块和变量未被使用或者引用，进而删除对应代码

Vitecreate-vite 脚手架内置了 vite 以及一些 presetpnpm create vite 实际上就等于使用 create-vite 脚手架创建项目 Vite 基础out of box 开箱即用在依赖预构建处理过程中如果遇到了非绝对或相对路径的引用，则会尝试开启路径补全，以此方式自动引入 node_modules 模块，并且对依赖的引用进行集成，避免浏览器对第三方依赖的死亡式引

webpack & vite 区别开发服务构建webpackwebpack 兼容性更好，支持多模块化转换，提供 AST 模块语法分析，可以直接使用 cjs 模块语法webpack 会在资源打包后启动开发服务的，也因为支持多模块语法，所以一开始构建时就需要把所有模块的语法转换成统一的模块化语法进行解析，这就导致了项目体积越大，这个统一模块化过程所花费的时间就越多 vitevite 是使用基于

webpack优化为什么要用（场景）它是什么怎么用1.提升开发体验SourceMap用来生成源代码与构建后代码一一映射的方案构建完会生成对应的 .map 文件方便调试查找错误位置 2.提升打包构建速度HotModuleReplacement可以通过配置 HMR 实现热模块替换，webpack5 是默认配置了 HMR，当没有配置 HMR 的开发服务时，项目中的模块一旦更新，整个项目就会被重新构建并刷