前端面试之Vue2/3
最新回答
有多少爱能够胡来
2026-01-29 10:20:22
Vue3.0相比Vue2.0，引入了更高效的数据绑定机制，减少了内存使用，优化了渲染性能。同时，它还引入了组件库的接口改进，使得组件的创建和使用更加灵活。此外，Vue3.0还提供了更好的类型系统支持，以及更强大的响应式系统。
2.在vue中，修改数据后，视图并没有更新，是什么原因？
在Vue中，如果修改数据后视图没有更新，可能是因为修改的数据未被正确响应式处理。确保数据是响应式的，并且在正确的位置进行更新。
3.$nextTick在什么场景使用，他的实现原理是什么
在Vue中，$nextTick用于在DOM更新后执行回调函数。它的实现原理是通过在Vue实例的渲染过程中添加一个延迟的微任务，确保在DOM更新完成后执行回调，避免了在DOM更新期间调用回调可能引发的错误。
4.虚拟dom和真实dom区别，diff算法的理解?
虚拟DOM是浏览器渲染树的轻量级副本，用于跟踪更新和优化渲染性能。与真实DOM相比，虚拟DOM更小更轻，减少了与浏览器的交互。diff算法用于比较虚拟DOM与实际DOM的差异，仅更新发生变化的部分，提高效率。
5.通信传值的方法有哪些
在Vue中，通信传值可以通过props、事件总线、Vuex、或自定义事件等多种方法实现。每个方法都有其适用场景，如父子组件间通信通常使用props和自定义事件，跨组件通信则考虑使用事件总线或Vuex。
6.插槽、作用域插槽的理解
插槽是Vue组件的一种机制，允许组件在渲染时将子组件提供的内容插入到模板中。作用域插槽则允许组件根据外部数据渲染内容，使得子组件的输出更加灵活和动态。
7.随着项目扩大，vuex中出现重名的方法如何解决
为避免Vuex中的重名方法，可采用模块化组织，为每个功能创建独立的Vuex store模块。每个模块可以包含多个状态和方法，通过命名空间和导入/导出机制，确保方法的唯一性和清晰性。
8.methods,watch和computed
methods用于定义可调用的函数，watch用于监听数据变化并执行特定操作，computed则用于计算依赖于其他数据的值。它们在Vue中分别用于处理不同的编程逻辑。
9.Vue 中的 key的作用，什么时候使用key
key属性用于标识DOM元素在渲染时的变化，帮助Vue识别哪些元素需要更新或移除。通常在循环渲染列表时使用key，以提高性能和避免不必要的DOM操作。
10.$set、$once的理解
$set用于在响应式系统中安全地设置或更新数据，确保数据的响应式。$once则用于创建一个仅执行一次的自定义事件监听器，常用于需要执行一次性操作的场景。
11.生命周期中，updated的用法，什么场景用到他，如果在updated中写入值的改变，视图会更改吗
updated生命周期在组件数据更新后调用，用于在组件状态更新后执行特定逻辑。在updated中写入值的改变，视图会根据新数据进行更新。
12.在父子组件中，加载渲染、子组件更新时的生命周期执行顺序
在父子组件中，通常情况下，子组件的mounted生命周期在父组件的created之后，确保子组件渲染完成。子组件的更新时，首先执行beforeUpdate，然后执行updated，最后执行其他生命周期方法。
13.filters、computed、watch在哪一个生命周期执行
filters在渲染时执行，用于对数据进行格式化处理。computed和watch则在数据变化时执行，分别用于计算依赖于其他数据的值和监听数据变化。
14.keep-alive的理解，使用keep-alive缓存页面时，例如在页面跳转至查看商品列表，商品是实时更新的，返回再进入时，会渲染上一次缓存的页面数据，如何解决
keep-alive用于缓存组件实例，减少重新渲染的开销。在页面跳转后，缓存的组件数据不会更新。解决方法包括使用动态组件、懒加载或在返回时重新初始化组件。
16.vuex、cookie、localStorage、sessionStorage的区别，vuex的源码理解
Vuex用于状态管理，cookie用于存储小量数据，localStorage和sessionStorage用于存储数据在浏览器中，但sessionStorage在会话结束后数据丢失。Vuex源码涉及响应式系统、状态管理的优化实现。
17.vue如何获取并操作DOM元素
在Vue中，可以通过组件实例的$refs属性获取并操作DOM元素。使用ref属性为DOM元素或子组件提供引用，然后在Vue实例或生命周期钩子中访问这些引用。
18.vue的extends理解和使用
extends用于继承Vue组件的定义，实现复用代码和功能。通过extends属性，可以创建一个扩展父组件的新组件，子组件可以访问并重用父组件的属性、方法和生命周期方法。
19.双向绑定的实现
Vue的双向绑定通过Watcher对象实现，Watcher监听数据变化，并在数据改变时触发更新视图。Vue的响应式系统确保数据和视图始终保持同步。
20.ref是什么？
ref是Vue提供的用于引用DOM元素或组件实例的属性。在Vue中使用ref可以访问或操作DOM元素，或在生命周期钩子中访问组件实例。
21.Vue中怎么调用子组件的方法？
在Vue中，可以通过props传递方法给子组件，或使用自定义事件触发子组件的方法。在父组件中，可以通过$emit或事件总线调用子组件的事件监听器或方法。
22.scoped原理？
scoped用于限制CSS样式的作用范围，当元素上应用scoped类时，其内部样式仅应用于该元素及其子元素，避免了样式冲突。在Vue中，可以通过在CSS类名前添加scoped前缀实现。
23.设置代理
在Vue中，通过Vue.prototype.$http设置代理，可以实现对HTTP请求的集中管理和跨域访问。代理服务器接收请求，与目标服务器通信后返回响应给客户端。
24.打包出现空白页？为什么出现空白页？
打包出现空白页可能是由于代码错误、资源加载失败、配置问题或浏览器兼容性问题。检查错误日志、确保代码无误、资源路径正确、以及浏览器兼容性是解决此类问题的关键步骤。
25.代理和环境变量？
代理用于处理HTTP请求，允许在开发环境或部署时修改或重定向请求。环境变量用于在不同环境中配置应用参数，通过在代码中引用环境变量实现配置的动态化。
26.路由的模式
路由模式通常包括单页面应用（SPA）模式，用于管理应用的多个路由和状态。SPA模式下，应用使用单个HTML页面和动态加载组件，通过URL路径切换视图，减少了页面加载时间。
27.路由传值
路由传值可以通过URL中的参数、查询字符串或路由参数实现。在Vue中，通过设置路由的参数属性，可以在URL中传递值，或在组件中通过$route对象访问路由参数。
28.路由守卫
路由守卫用于控制路由的访问权限，可以是前置守卫（在路由跳转前执行）、后置守卫（在路由跳转后执行）或全局守卫（应用于所有路由）。守卫通常用于执行登录验证、权限检查等逻辑。
29.介绍一下SPA以及SPA有什么缺点？
Spa（单页面应用）是一种架构模式，通过动态加载组件实现页面的局部刷新，提供流畅的用户体验。SPA的优点包括快速的页面加载、良好的用户体验、代码复用等。缺点包括SEO优化难度、复杂性管理、浏览器兼容性问题等。
Vuex系列
1.Vuex有哪些属性？
Vuex属性包括state（状态）、mutations（修改状态的函数）、actions（异步操作）、getters（计算属性）、modules（模块化组织状态和逻辑）等，用于管理应用的全局状态。
2.mutation和actions的区别？
Mutation直接修改状态，是Vuex的核心操作，必须在同步上下文中执行。Actions用于执行异步操作，将结果提交给mutation进行状态更新，通常在异步上下文中执行。
3.Vuex是单向数据流还是双向数据流？
Vuex采用单向数据流模式，数据的流向是从父组件流向子组件，通过props传递，避免了组件之间的直接数据依赖，使得应用状态管理和调试更加清晰。
4.Vuex怎么做持久化数据？
Vue中使用Vuex存储持久化数据，通过Vuex插件（如vuex-persistedstate）或自定义解决方案实现。这些插件将Vuex状态存储在本地存储或cookie中，确保在浏览器重启后状态能够保持。
谈一下MVVM框架？
MVVM（Model-View-ViewModel）框架是一种软件架构模式，将应用分为模型、视图和视图模型三个部分。模型负责数据逻辑，视图负责显示数据，视图模型作为桥梁，处理视图与模型之间的交互，实现数据与界面的解耦。
热门标签
