章
目
录
本文主要讲解关于几个Vue常见精选面试题及答案相关内容,让我们来一起学习下吧!
1.Vue 如何实现单页面应用
通常的 url 地址由以下内容构成:协议名 域名 端口号 路径 参数 哈希值,当哈希值改变,页面不会发生跳转,单页面应用就是利用了这一点,给 window 注册 onhashchange 事件,当哈希值改变时通过 location.hash 就能获得相应的哈希值,然后就能跳到相应的页面。
- hash 通过监听浏览器的 onhashchange()事件变化,查找对应的路由规则
- history 原理: 利用 H5 的 history 中新增的两个 API pushState() 和 replaceState() 和一个事件 onpopstate 监听 URL 变化
2.如何理解虚拟 dom
虚拟 DOM(Virtual DOM)是一种用于优化页面渲染性能的技术。它的核心思想是通过在内存中维护一份虚拟的DOM树来代替真实的DOM树,通过比较虚拟DOM树的变化并最小化对真实DOM的操作,从而提高页面渲染的效率。
虚拟 DOM 的工作原理可以分为以下几个步骤:
- 初始渲染:当页面加载时,虚拟 DOM 会通过JS对象表示整个页面的结构,这个虚拟 DOM 树是一种轻量级的数据结构,它可以很快地进行创建和修改。
- 更新触发:当页面状态发生改变时,比如用户交互、数据更新等,会触发重新渲染。在这个过程中,应用会生成新的虚拟 DOM 树。
- 虚拟 DOM 比较:新生成的虚拟 DOM 树会和之前的虚拟 DOM 树进行比较,找出两者之间的差异。
- 最小化操作:通过比较,找出需要更新的部分,然后将这些差异应用到真实的DOM树上,从而最小化对真实DOM的操作。
这种方式可以减少对真实 DOM 的频繁操作,提高页面渲染性能。因为直接操作真实 DOM 是非常昂贵的,而虚拟 DOM 可以通过批量更新的方式来减少对真实 DOM 的操作次数。
虚拟 DOM 技术的流行得益于其能够提高前端开发效率和页面性能的双重优势。许多流行的前端框架和库,如React和Vue,都采用了虚拟 DOM 技术来进行页面渲染和更新。
3.你是如何 理解 vue 里 key 属性的
在Vue中,key
属性通常用于在Vue的列表渲染中,用于唯一标识列表中的每个子元素。当列表中的元素发生变化时,Vue会根据key
属性来决定是否重新渲染元素,以及如何更新元素。
具体来说,key
属性的作用包括:
- 提高性能:通过
key
属性,Vue能够更准确地追踪每个列表项的变化,从而减少不必要的DOM操作,提高渲染性能。 - 保持状态:当列表中的元素重新排序或发生变化时,使用
key
属性可以帮助Vue保持每个元素的状态,避免重新创建或销毁元素。
总之,key
属性在Vue中扮演着重要的角色,能够帮助Vue更高效地处理列表渲染中的变化和更新。
4.data 为什么是一个函数
在 Vue 组件中,data
选项必须是一个函数,而不能直接是一个对象。 这是因为 Vue 组件可以同时存在多个实例,如果直接使用对象形式的data
选项,那么所有的实例将会共享同一个 data
对象,这样就会造成数据互相干扰的问题。 因此,将 data
选项设置为函数可以让每个实例都拥有自己独立的 data
对象
5.vuex 的五个 核心模块
State(状态)
State即应用程序中需要管理的状态,可以理解为存储数据的地方。在Vuex中,所有的状态都被存储在单一的数据源中,即store。这样做的好处是可以方便地跟踪状态的变化,以及在需要时进行调试和监控。
Getters(获取器) Getters可以理解为store的计算属性,它们的作用是从state中派生出一些状态,类似于Vue组件中的计算属性。通过getters,我们可以对state进行一些复杂的计算或筛选,然后在组件中使用这些派生出的状态。
Mutations(变化)
Mutations是唯一允许修改state的地方。每个mutation都有一个字符串类型的事件类型(type)和一个回调函数,回调函数接受state作为第一个参数。在mutation中,我们可以对state进行同步的修改操作。
Actions(动作)
Actions类似于mutations,不同之处在于actions可以包含异步操作。通过actions,我们可以提交mutation来间接地对state进行修改。这样做的好处是可以将一些异步操作放在actions中,使得我们的代码更加清晰和易于维护。
Modules(模块)
当应用变得非常复杂时,单一的store可能会变得难以维护。Vuex允许我们将store分割成模块(module),每个模块拥有自己的state、getters、mutations和actions。这样做的好处是可以更好地组织代码,使得应用的状态管理更加清晰和可维护。
以上就是关于几个Vue常见精选面试题及答案相关的全部内容,希望对你有帮助。欢迎持续关注潘子夜个人博客(www.panziye.com),学习愉快哦!