一、Vue2与Vue3的区别1.API风格Vue2: Options API(选项式)data、methods、computed、watch分开写Vue3: 支持Options API Composition API(组合式)setup语法糖script setup主流2.响应式原理Vue2: Object.defineProperty(),无法监听新增/删除对象属性、数字下标修改需要Vue.setVue3: Proxy代理整个对象支持对象新增删除、数组下标修改Ref处理基本类型3.虚拟DOMVue3重写虚拟DOMPatchFlags标记动态节点diff的时候跳过静态节点提升编译运行性能4.生命周期Vue2组合式生命周期setup中使用onBeforeMount ➡ onMountedonBeforeUpdate ➡ onUpdatedonBeforeUnmount ➡ onUnmountedonErrorCaptured新增: onRenderTracked、onRenderTriggereddestoryed ➡ unmounted5.其他差异多根节点Vue3组件可以多个根标签Vue2只能单根标签碎片Fragment、Teleport传送组件、Suspense异步组件移除filter不再支持v-if优先级高于v-forVue2相反更好的TypeScript支持源码TS重写二、组合式APIComposition API1.ref/reactive 区别ref: 处理基本数据类型string/number/boolean)也可以存对象值放在.value模板中自动解包不需要.valuereactive:只接受对象/数组不能传基础类型不需要.value直接访问属性注意reactive直接整体重新赋值会丢失响应式refbuhui2.computed计算属性有缓存依赖不变就不会重新执行只读写法、可写get/setconst fullName computed(()name.valuelast.value) // 可写 const fullName computed({ get(){}, set(value){} })3.watch/watchEffectwatch: 需要明确监听哪个源可以拿到新值、旧值可以深度监听{deep:true},立即执行{immediatetrue}watchEffect: 自动收集内部依赖不用指定监听源没有旧值立即执行返回stop函数手动停止监听4.setupsetup是组合式入口Vue3.2之后script setup正式推荐优势代码更简洁不需要return,顶层变量直接模板使用编译时优化注意script setup没有thisimport的组件直接使用不需要注册defineProps、defineEmits、defineExpose、defineModel都是编译宏不需要导入三、Vue3响应式原理1.使用Proxy代理对象拦截get,set,deleteProperty2.依赖收集get访问数据的时候把当前激活的effect副作用函数收集到deps依赖桶3.触发更新set修改数据取出收集的effect执行更新视图4.RefImpl类实现ref,因为Proxy不能代理基础数据类型用类包装一层.value5.track()收集依赖trigger()触发更新effect()副作用函数Proxy与defineProperty相比的优点可监听对象新增、删除属性监听数组下标修改、数组长度变化代理整个对象不用遍历所有属性缺点Proxy不能兼容IE浏览器shallowRef/shallowReactive/readonlyshallowRef只对.value做响应式,内部对象不代理shallowReactive只代理第一层对象深层不响应readonly只读响应式对象不能修改四、Pinia1.Pinia对比Vuex区别没有Mutation直接修改state或者action修改不再强制同步没有modules嵌套每个store独立不需要命名空间类型推导好ts友好代码简洁state、getter、actions没有mutations2.核心APIdefineStoreid唯一state函数返回对象getters相当于computed;actions同步异步都支持3.Pinia刷新页面数据丢失Pinia是内存存储刷新重置需要pinia-plugin-persistedstate插件持久化到localstorage4.store解构会丢失响应式需要storeToRefs()保留响应式actions可以直接解构import { storeToRefs } from pinia const userStore useUserStore() const { token } storeToRefs(userStore) const { login } userStore五、Vite1.Vite与Webpack区别Webpack先打包全部文件再启动服务项目大冷启动慢Vite基于浏览器ESModule,启动不打包按需加载开发环境启动飞快生产环境还是rollup打包2.Vite原理开发服务器拦截浏览器es import请求实时编译单文件返回给浏览器不用打包整个项目3.vite配置alias别名、proxy代理环境变量import.meta.env六、组件通信1.父子props/emit;defineProps defineEmits2.父获取子ref defineExpose3.隔代传值 provide/inject;注意不是响应式要响应式传ref/reactive4.兄弟/跨组件全局状态Pinia5.简单事件总线mitt(Vue3移除new EventBus推荐mitt库)七、内置组件1.Teleport把dom挂载到body其他地方弹窗模态框脱离父组件样式限制2.Fragment多根节点不渲染真实DOM3.Suspense处理异步组件等待异步组件加载显示fallback占位内容八、性能优化编译层面1.Vue3编译自动标记PatchFlagsdiff跳过静态节点2.v-once标记静态内容只渲染一次代码层面1.v-memo缓存模板节点条件不变跳过diff2.列表渲染key不能用index;避免v-for和v-if写在同一个标签3.大数据列表虚拟列表vue-virtual-scroller只渲染可视区域DOM4.组件shallowRef/shallowReactive,深层不需要响应式就关闭减少代理开销5.路由懒加载-import(),分包6.大计算用computed缓存避免模板写复杂表达式7.销毁组件onUnMounted清除定时器、事件监听、取消axios请求防止内存泄漏打包优化1.按需导入tree-shaking剔除无用代码2.分包压缩资源图片压缩CDN引入第三方库减小打包体积其他防抖节流处理频繁触发事件输入框滚动