【整理分享】一些Vue高频面试题

本次给大家分享一些关于Vue的常见面试题，带你梳理基础知识，增强Vue知识储备，值得收藏，快来看看吧！

如何快速入门VUE3.0：进入学习

分享的是一些Vue的常见面试题，是不代表全部。如果文章有不对的地方欢迎指出，有疑惑 或者有其他面试题的小伙伴也可以在评论区留言分享，大家一起交流探讨，谢谢！

1. vue2.0组件通信⽅式有哪些？

• 父子组件通信：props 和 event、v- model、 .sync、 ref、 $parent 和 $children。（学习视频分享：vue视频教程）

• 非父子组件通信：$attr 和 $listeners、 provide 和 inject、eventbus、通过根实例$root访问、vuex、dispatch 和 brodcast

2. v-model是如何实现双向绑定的？

• vue 2.0v-model 是⽤来在表单控件或者组件上创建双向绑定的，他 的本质是 v-bind 和 v-on 的语法糖，在 ⼀个组件上使⽤ v-model ，默认会为组件绑定名为 value 的 prop 和名为 input 的事件。

• Vue3.0 在 3.x 中，⾃定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的update:modelValue 事件

3. Vuex和单纯的全局对象有什么区别？

Vuex和全局对象主要有两种区别：

• Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发⽣变 化，那么相应的组件也会相应地得到⾼效更新。

• 不能直接改变 store 中的状态。改变 store 中的状态的唯⼀途径就是显式地提交 (commit)mutation。这样使得我们可以⽅便地跟踪每⼀个状态的变化，从⽽让我们能够实现⼀些⼯ 具帮助我们更好地了解我们的应⽤。

4. Vue 的⽗组件和⼦组件⽣命周期钩⼦执⾏顺序是什么？

渲染过程：⽗组件挂载完成⼀定是等⼦组件都挂载完成后，才算是⽗组件 挂载完，所以⽗组件的mounted在⼦组件mouted之后

⽗beforeCreate -> ⽗created -> ⽗beforeMount -> ⼦beforeCreate -> ⼦created -> ⼦beforeMount -> ⼦mounted -> ⽗mounted

⼦组件更新过程：

1. 影响到⽗组件： ⽗beforeUpdate -> ⼦beforeUpdate->⼦updated -> ⽗ updted
2. 不影响⽗组件： ⼦beforeUpdate -> ⼦updated

⽗组件更新过程：

1. 影响到⼦组件： ⽗beforeUpdate -> ⼦beforeUpdate->⼦updated -> ⽗ updted
2. 不影响⼦组件： ⽗beforeUpdate -> ⽗updated

销毁过程：⽗beforeDestroy -> ⼦beforeDestroy -> ⼦ destroyed -> ⽗destroyed

看起来很多好像很难记忆，其实只要理解了，不管是哪种情况，都⼀定是⽗组件等待⼦组件完 成后，才会执⾏⾃⼰对应完成的钩⼦，就可以很容易记住

5. v-show 和 v-if 有哪些区别？

• v-if 会在切换过程中对条件块的事件监听器和⼦组件进⾏销毁和重建，如果初始条件是false，则什么都不做，直到条件第⼀次为true时才开始渲 染模块。

• v-show 只是基于css进⾏切换，不管初始条件是 什么，都会渲染。

所以， v-if 切换的开销更⼤，⽽ v-show 初始化渲染开销更 ⼤，在需要频繁切换，或者切换的部分dom很复杂时，使⽤ v-show 更合 适。渲染后很少切换的则使⽤ v-if 更合适。

6. Vue 中 v-html 会导致什么问题

在⽹站上动态渲染任意 HTML，很容易导致 XSS 攻击。所以只能在可信内 容上使⽤ v-html，且永远不能⽤于⽤户提交的内容上。

7. v-for 中 key 的作⽤是什么？

key 是给每个 vnode 指定的唯⼀ id ，在同 级的 vnode diff 过程中，可以根据 key 快速的对⽐，来判断是 否为相同节点，并且利⽤ key 的唯⼀性可以⽣成 map 来更快的获 取相应的节点。

另外指定 key 后，就不再采⽤“就地复⽤”策略了，可以保证渲染的准确性 。

8. 为什么 v-for 和 v-if 不建议⽤在⼀起

• 当 v-for 和 v-if 处于同⼀个节点时， v- for 的优先级⽐ v-if 更⾼，这意味着 v-if 将分别重复 运⾏于每个 v-for 循环中。如果要遍历的数组很⼤，⽽真正要展示的数据很少时 ，这将造成很⼤的性能浪费。
• 这种场景建议使⽤ computed ，先对数据进⾏过滤。

9. vue-router hash 模式和 history 模式有什么区别？

区别：

• url 展示上，hash 模式有 "#"，history 模式没有

• 刷新⻚⾯时，hash 模式可以正常加载到 hash 值对应的⻚⾯，⽽ history 没有处 理的话，会返回404，⼀般需要后端将所有⻚⾯都配置重定向到⾸⻚路由。

• 兼容性。hash 可以⽀持低版本浏览器和 IE

10. vue-router hash 模式和 history 模式是如何实现的？

• hash 模式：

# 后⾯ hash 值的变化，不会导致浏览器向服务器发出请求，浏览器不发出请 求，就不会刷新⻚⾯。同时通过监听 hashchange 事件可以知道 hash 发⽣了哪些变化，然后根据 hash 变化来实现更新⻚⾯部分内容的操作。

• history 模式：

history 模式的实现，主要是 HTML5 标准发布的两个 API， pushState 和 replaceState ，这两个 API 可以在改变 url，但是不会发送请求。这样就可以监 听 url 变化来实现更新⻚⾯部分内容的操作。

11. vue3.0 相对于 vue2.x 有哪些变化？

• 监测机制的改变（Object.defineProperty —> Proxy）
• 模板
• 对象式的组件声明⽅式 （class）
• 使⽤ts
• 其它⽅⾯的更改：⽀持⾃定义渲染器、 ⽀持 Fragment（多个根节点）和 Protal（在 dom 其他部分渲染组建内容）组件、基于 treeshaking 优化，提供了