常见前端面试之VUE面试题汇总九

  1. Vue-router 跳转和 location.href 有什么区别

使用 location.href= /url 来跳转,简单方便,但是刷新了页面;

使用 history.pushState( /url ) ,无刷新页面,静态跳转;

引进 router ,然后使用 router.push( /url ) 来跳转,使用了 diff 算法,实现了按需加载,减少了 dom 的消耗。其实使用 router 跳 转和使用 history.pushState() 没什么差别的,因为 vue-router 就 是用了 history.pushState() ,尤其是在 history 模式下。

  1. Vuex 的原理

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store(仓库)。"store" 基本上就是一个 容器,它包含着你的应用中大部分的状态 ( state )。

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

|-----|---------------------------------------|----------|
| 改 变 | store 中 的 状 态 的 唯 一 途 径 就 是 显 式 地 提 交 | (commit) |

mutation。这样可以方便地跟踪每一个状态的变化。

Vuex 为 Vue Components 建立起了一个完整的生态圈,包括开发中的 API 调用一环。

(1)核心流程中的主要功能:

Vue Components 是 vue 组件,组件会触发(dispatch)一些事件或 动作,也就是图中的 Actions;

在组件中发出的动作,肯定是想获取或者改变数据的,但是在 vuex 中,数据是集中管理的,不能直接去更改数据,所以会把这个动作提 交(Commit)到 Mutations 中;

然后 Mutations 就去改变(Mutate)State 中的数据;

当 State 中的数据被改变之后,就会重新渲染(Render)到 Vue Components 中去,组件展示更新后的数据,完成一个流程。

(2)各模块在核心流程中的主要功能:

Vue Components∶ Vue 组件。HTML 页面上,负责接收用户操作等交 互行为,执行 dispatch 方法触发对应 action 进行回应。

dispatch∶操作行为触发方法,是唯一能执行 action 的方法。

actions∶ 操作行为处理模块。负责处理 Vue Components 接收到的 所有交互行为。包含同步/异步操作,支持多个同名方法,按照注册 的顺序依次触发。向后台 API 请求的操作就在这个模块中进行,包括 触发其他 action 以及提交 mutation 的操作。该模块提供了 Promise 的封装,以支持 action 的链式触发。

commit∶状态改变提交操作方法。对 mutation 进行提交,是唯一能 执行 mutation 的方法。

mutations∶状态改变操作方法。是 Vuex 修改 state 的唯一推荐方法,其他修改方式在严格模式下将会报错。该方法只能进行同步操作,且 方法名只能全局唯一。操作之中会有一些 hook 暴露出来,以进行 state 的监控等。

state∶ 页面状态管理容器对象。集中存储 Vuecomponents 中 data 对象的零散数据,全局唯一,以进行统一的状态管理。页面显示所需 的数据从该对象中进行读取,利用 Vue 的细粒度数据响应机制来进行 高效的状态更新。

getters∶ state 对象读取方法。图中没有单独列出该模块,应该被 包含在了 render 中,Vue Components 通过该方法读取全局 state 对 象。

总结:

Vuex 实现了一个单向数据流,在全局拥有一个 State 存放数据,当 组件要更改 State 中的数据时,必须通过 Mutation 提交修改信息,Mutation 同时提供了订阅者模式供外部插件调用获取 State 数据 的更新。而当所有异步操作(常见于调用后端接口异步获取更新数据) 或批量的同步操作需要走 Action ,但 Action 也是无法直接修改 State 的,还是需要通过 Mutation 来修改 State 的数据。最后,根 据 State 的变化,渲染到视图上。

相关推荐
爱吃生蚝的于勒几秒前
QT开发第三章——常用控件
linux·服务器·开发语言·前端·javascript·c++·qt
xuankuxiaoyao14 分钟前
Axios-图书列表案例
开发语言·前端·javascript
meilindehuzi_a16 分钟前
深入理解 JavaScript 数据类型:从冯·诺依曼架构到八种数据类型
javascript
影寂ldy17 分钟前
C# 多播委托
前端·javascript·c#
dy171718 分钟前
Vue3 多文件上传
前端·javascript·vue.js
回眸&啤酒鸭18 分钟前
【回眸】低压电工证培训记录
职场和发展
带娃的IT创业者18 分钟前
深度解析 Bun:重新定义 JavaScript 运行时的性能边界
开发语言·javascript·node.js·ecmascript·bun·运行时
JAVA面经实录91725 分钟前
ZooKeeper 面试题完整标准答案(面试背诵版)
分布式·zookeeper·面试
文阿花27 分钟前
Echarts实现3D饼状图
前端·javascript·echarts·饼状图
芝士爱知识a30 分钟前
AI面试工具选型指南,考公人自用主流产品横向测评
人工智能·面试·结构化面试·事业编面试·公考面试