Vue.js面试题及答案（贴近实战版）.docx

Vue.js面试题及答案（贴近实战版）

一、基础篇（考察Vue核心概念理解）

问：Vue的双向绑定原理是什么？实际用v-model时遇到过什么问题？怎么解决的？

答：核心是“数据劫持+发布订阅”。Vue2用Object.defineProperty监听data里的属性，Vue3换成了Proxy（能监听到数组变化和新增属性），再配合Watcher订阅数据变化，通知DOM更新。

实际踩过的坑：比如用v-model绑表单时，输入数字却变成字符串（因为默认绑定value是字符串），解决是加v-model.number修饰符；还有绑自定义组件时，子组件要通过model选项指定prop和event，不然父组件改值不生效。

问：Vue的生命周期钩子，你在项目里常用哪些？分别做什么事？

答：常用的就几个：

created：组件实例刚创建，能访问data和methods，但DOM还没渲染，一般在这发初始化请求（比如列表数据），不用等DOM加载。

mounted：DOM渲染完成，能操作DOM了，比如初始化第三方插件（像ECharts图表、拖拽组件），但要注意如果是子组件，父组件mounted里不一定能拿到子组件DOM，得用$nextTick。

beforeUnmount：组件销毁前，主要做清理工作，比如清除定时器、解绑事件（比如之前addEventListener绑的事件，不清理会内存泄漏）。

很少用beforeCreate（拿不到data）和updated（容易触发死循环，改数据又触发updated）。

问：v-for里为什么要加key？不加会有什么问题？

答：key是给Vue的虚拟DOM做“唯一标识”的，diff算法靠key判断节点是不是同一个，从而决定复用还是重新创建。

不加key的话，Vue会“就地复用”节点，比如列表里有输入框，删一条数据后，输入框的值会乱掉（比如删第2条，第3条的输入框会复用原来第2条的DOM，值不变）。之前做表单列表时踩过这坑，加了key（一般用数据的唯一ID，别用index，index变了key也变，等于没加）就好了。

二、进阶篇（考察组件与状态管理）

问：组件间通信有哪些方式？分别适合什么场景？

答：实际项目里常用的就这几种：

父子通信：父传子用props（别直接改props，要通过$emit通知父组件改），子传父用$emit（比如子组件按钮点击，this.$emit(handleClick,data)，父组件用@handleClick接收）。

兄弟通信：小项目用eventBus（Vue2里新建个Vue实例当总线，bus.$emit发，bus.$on收；Vue3里用mitt库），大项目直接用Pinia（更方便，还能管理状态）。

跨层级通信：用provide/inject，比如父组件provide(theme,this.theme)，深层子组件inject(theme)就能拿到，但要注意它不是响应式的，想响应式得传个对象（比如provide(theme,{value:this.theme})）。

别用$parent或$children，耦合太高，子组件变了父组件就崩了。

问：Vue3的CompositionAPI比OptionsAPI好在哪？实际项目里怎么用的？

答：OptionsAPI的问题是“逻辑分散”，比如一个表单功能，数据在data，方法在methods，监听在watch，组件大了找代码要跳来跳去。

CompositionAPI能把“相关逻辑聚在一起”，比如把表单处理抽成useForm函数（里面包含表单数据、验证方法、提交方法），然后在组件里引入const{form,validate,submit}=useForm()，复用性也高（别的组件也能引这个useForm）。

比如做多个页面的搜索表单，用CompositionAPI抽个useSearch，里面处理搜索关键词、防抖、请求逻辑，每个页面直接用，不用重复写代码。

问：Pinia和Vuex有什么区别？你项目里为什么选Pinia？

答：最直观的是Pinia简单多了：

没了mutations！Vuex里改状态必须通过mutation（同步）和action（异步），Pinia里直接在action里改状态（同步异步都能），少写一层代码。

支持TypeScript更友好，Vuex要写一堆类型定义（比如State、MutationTree），Pinia不用，直接定义state类型就行，自动推导。

模块化简单，Vue