vue3比vue2的区别在哪主要有什么优势Vue2用 Object.defineProperty 监听对象属性缺点新增 / 删除属性监听不到、数组下标修改不响应、嵌套对象性能差Vue3用 ES6 Proxy 代理整个对象优点天然支持新增 / 删除属性、数组任意修改都响应、性能更强ref/reactive定义变量用来把「普通数据」变成「响应式数据」ref 用于 基本类型数字、字符串、布尔reactive 用于 引用类型对象、数组watch / watchEffect想精准监听 → watch想自动追踪、方便快捷 → watchEffectAPI 风格Vue2选项式 APIdata、methods、computed 分开写 配置一个页面Vue3组合式 API按业务逻辑组织代码 写一个页面script setup语法性能更好模板Vue2模板必须只有一个根节点Vue3模板可以多个根节点不用套无用的 div其他优势打包体积更小Tree-shaking 更好更好的 TypeScript 支持Vue3 用 自定义 Hook干净、透明、无副作用。Vue3新增的组件传值defineProps defineEmits defineModel延申问题 Object.defineProperty 与Proxy 的区别是什么Object.defineProperty 只能监听对象的 “某一个属性” Proxy 能直接监听 “整个对象”。延申问题Proxy 的底层实现逻辑是什么Proxy 是 ES6ES2015正式新增的原生语法Vue3 不支持 IE 浏览器 因为 Proxy 根本没法降级兼容。defineProperty 是提前给每个属性绑监听 Proxy 是监听整个对象的 “操作行为”。延申问题vue2要想实现Proxy 有哪几种方法Vue.set / this.$set解决新增属性Vue.delete / this.$delete解决删除属性延申问题script setup的逻辑是什么它是编译时语法糖不是运行时新特性所有代码都会被打包进 setup() 函数顶层声明自动暴露给模板无需 return它是 Vue3 最标准、最推荐的写法本质上是闭包的延申延申问题Tree-shaking 对 Vue2 的优化有哪些删除你自己写的、未使用的业务代码最主要删除未使用的 ES6 第三方库代码如 lodash-es删除 Vue2 内部极少的无用模块几乎没用延申问题watchEffect 的业务使用场景多条件搜索、筛选表单联动、多级选择多状态控制按钮权限数据变化自动重新渲染图表初始化 变化都要执行的请求VUE的组件传值父 → 子props子 → 父emit父 ↔ 子v-model /defineModel父 → 子ref / $parent子 → 父$attrs / $listeners爷孙组件透传兄弟provide / inject eventBus(VUE3没有)延申问题provide /inject的实现逻辑原型链查找机制 组件树递归向上遍历延申问题provide /inject是响应式的么怎么实现响应式本身非响应式传 ref/reactive 才响应式因为传递的是地址延申问题ref 和 reactive 区别ref 支持所有类型 reactive 只支持对象数组ref 要 .value reactive 不用ref 底层是对象包装 reactive 底层是 Proxyreactive 不能直接赋值 ref 可以业务基本类型用 ref对象用 reactive解构 reactive 会失去响应式延申问题如何解决解构 reactive 会失去响应式的问题本质上是问ref、 toRef、和toRefs的区别ref创建响应式变量独立复制值toRef将对象单个属性转为响应式关联源对象toRefs将 reactive 对象整体转 ref 集合用于解构toRefs 是 reactive 解构的唯一正确方式描述vue3的生命周期Vue3 把 beforeCreate /created 合并到 setup 里了其他生命周期前面加个 on 就行setup() —— 组件创建onBeforeMount —— 挂载前onMounted —— 挂载完成发请求、操作 DOMonBeforeUpdate —— 更新前onUpdated —— 更新完成onBeforeUnmount —— 销毁前onUnmounted —— 销毁完成清除定时器、事件延申问题Vue3 新增的生命周期性能 / 调试1. onActivated / onDeactivatedkeep-alive 缓存组件专用 进入 / 离开缓存组件时触发2. onErrorCaptured捕获子组件错误3. onRenderTracked / onRenderTriggered调试用看什么数据触发了渲染Pinia vs Vuex 的区别Vuex 核心结构state / getters / mutations / actions / modules | Pinia核心结构state / getters / actions无 mutations1. Pinia 没有 mutations最关键Vuex 改数据必须走 commit → mutations只能同步异步要走 dispatch → actions。Pinia 直接在 actions 里同步 / 异步随便写不用绕一层 mutations代码少一半。2. 模块化方式完全不同Vuex一个大 store里面套 modules命名空间容易乱。Pinia每个模块就是一个独立的 store直接 import互不干扰非常清爽。3. TypeScript 体验天差地别Vuex类型要自己写、嵌套模块类型难维护。Pinia自动类型推导写代码全程智能提示几乎不用写类型。Vue3 setup中如何获取组件实例vue2的$refsetup 中没有 this获取 DOM / 子组件用同名 ref onMounted 怎么写子组件必须用 defineExpose 暴露方法 / 属性最深的问题getCurrentInstance获取全局实例是什么怎么使用getCurrentInstance 获取当前组件实例可以拿到 proxy等价 this官方不推荐业务使用只用于开发 / 插件业务请用组合式 APIuseRouter、useRoute、useStoreVue3 最佳实践忘掉 thisgetCurrentInstance 仅供 开发 / 调试 / 插件 / 高级库使用 不推荐在业务代码中使用