2024年刚刚翻新前端vue面试题_2024 vue 常见面试题-优快云博客

本文链接：https://blog.youkuaiyun.com/panerchao/article/details/139146123

本文详细探讨了Vue.js面试中的常见问题，涵盖Vue指令、全家桶组件、数据双向绑定原理、生命周期钩子、组件设计、路由管理、优化策略等多个核心知识点。通过实例解析了Vue的v-if与v-show、v-model、vuex、Vue Router、虚拟DOM等特性的应用场景和实现机制，帮助读者深入理解Vue开发中的关键概念和技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、vue中常用的指令及作用？

v-text指令：用于更新标签包含的文本，它的作用跟双大括号效果是一样的
v-html指令：绑定一些包含html代码的数据在视图上
v-show指令：指令的取值为true/false，分别对应着显示/隐藏，改变的是元素css样式的display属性
v-if指令：取值为true/false，控制元素是否需要被渲染
v-else指令：和v-if指令搭配使用，没有对应的值。当v-if的值false，v-else才会被渲染出来。
v-for指令：遍历data中存放的数组数据，实现列表的渲染。
v-bind指令：用于动态绑定DOM元素的属性;例如标签的href属性，标签的src属性等。v-bind可以简写成“：”
v-on指令：可以绑定事件的监听器。通过v-on指令修饰click点击事件，指定事件响应后的处理函数为methods中定义的方法，v-on:简写为@
v-model指令：用于表单输入，实现表单控件和数据的双向绑定。只要给input控件添加v-model指令，并指定关联的数据content，就可以轻松把用户输入的内容绑定在content上。
v-once指令：只渲染一次，后面元素中的数据再更新变化，都不会重新渲染。

2、vue全家桶及react全家桶包含哪些？

vue全家桶：

vue（整体架构） + vuex（状态管理） + vue-router（路由） + vue_resource || axios（ajax请求） + mint-UI(移动端UI框架库) || antd-vue(PC端UI框架库)

react全家桶：

react（整体架构） + redux || mobx（状态管理） + react-router（路由） + axios（ajax请求） + antd || react-material || antd-model(UI框架库)

3、vue数据双向绑定的实现原理以及步骤分析

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

v-model的实现具体步骤共分为四步：

第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter

这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:

1、在自身实例化时往属性订阅器(dep)里面添加自己

2、自身必须有一个update()方法

3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

4、Vue的生命周期钩子函数

vue生命周期共分为四个阶段

一：实例创建

二：DOM渲染

三：数据更新

四：销毁实例

共有八个基本钩子函数

1.beforeCreate --创建前

触发的行为：vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。

在此阶段可以做的事情：加loading事件

2.created --创建后

触发的行为：vue实例的数据对象data有了，$el还没有

在此阶段可以做的事情：解决loading，请求ajax数据为mounted渲染做准备

3.beforeMount --渲染前

触发的行为：vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换

在此阶段可以做的事情：。。。

4.mounted --渲染后

触发的行为：vue实例挂载完成，data.filter成功渲染

在此阶段可以做的事情：配合路由钩子使用

5.beforeUpdate --更新前

触发的行为：data更新时触发

在此阶段可以做的事情：。。。

6.updated —更新后

触发的行为：data更新时触发

在此阶段可以做的事情：数据更新时，做一些处理（此处也可以用watch进行观测）

7.beforeDestroy —销毁前

触发的行为：组件销毁时触发

在此阶段可以做的事情：可向用户询问是否销毁

8.destroyed —销毁后

触发的行为：组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在

在此阶段可以做的事情：组件销毁时进行提示

5、vue的v-if与v-show的区别？

相同点：

v-if与v-show都可以动态控制dom元素显示隐藏

不同点：

v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css–display:none，dom元素还在。

手段：

v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；

编译过程：

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；

编译条件：

v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；

性能消耗：

v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

6、router-link-active是哪个组件的属性？

vue-router模块的router-link组件。

7、说说你对 SPA 单页面的理解，它的优缺点分别是什么？

SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。

优点：

用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；

基于上面一点，SPA 相对对服务器压力小；

前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；

缺点：

初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；

前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；

SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

8、computed 和 watch 的区别和运用的场景？

computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；

watch： 更多的是「观察」的作用，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作；

运用场景：

当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

9、直接给一个数组项赋值，Vue 能检测到变化吗？

由于 JavaScript 的限制，Vue 不能检测到以下数组的变动：

当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

为了解决第一个问题，Vue 提供了以下操作方法：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// vm.$set，Vue.set的一个别名
this.$set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

为了解决第二个问题，Vue 提供了以下操作方法：

// Array.prototype.splice
vm.items.splice(newLength)

10、Vue 的父组件和子组件生命周期钩子函数执行顺序？

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：

加载渲染过程

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

子组件更新过程

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

父组件更新过程

父 beforeUpdate -> 父 updated

销毁过程

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

11、在哪个生命周期内调用异步请求？

可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值;

推荐在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：

能更快获取到服务端数据，减少页面 loading 时间；
ssr 不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性；

12、谈谈你对 keep-alive 的了解？

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染，其有以下特性：

一般结合路由和动态组件一起使用，用于缓存组件；

提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存，其中 exclude 的优先级比 include 高；
对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。

13、能说下 vue-router 中常用的 hash 和 history 路由模式实现原理吗？

hash 模式的实现原理

hash 路由模式的实现主要是基于下面几个特性：

URL 中 hash 值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash 部分不会被发送；
hash 值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash 的切换；
可以通过 a 标签，并设置 href 属性，当用户点击这个标签后，URL 的 hash 值会发生改变；或者使用 JavaScript 来对 loaction.hash 进行赋值，改变 URL 的 hash 值；
我们可以使用 hashchange 事件来监听 hash 值的变化，从而对页面进行跳转（渲染）。

history 模式的实现原理

HTML5 提供了 History API 来实现 URL 的变化。其中做最主要的 API 有以下两个：history.pushState() 和 history.repalceState()。这两个 API 可以在不进行刷新的情况下，操作浏览器的历史纪录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录

history 路由模式的实现主要基于存在下面几个特性：

pushState 和 repalceState 两个 API 来操作实现 URL 的变化；
我们可以使用 popstate 事件来监听 url 的变化，从而对页面进行跳转（渲染）；
history.pushState() 或 history.replaceState() 不会触发 popstate 事件，这时我们需要手动触发页面跳转（渲染）。

14、Proxy 与 Object.defineProperty 优劣对比

Proxy 的优势如下:

Proxy 可以直接监听对象而非属性；
Proxy 可以直接监听数组的变化；
Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；
Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；
Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；

Object.defineProperty 的优势如下:

兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。

15、你有对 Vue 项目进行哪些优化？

1）代码层面的优化

v-if 和 v-show 区分使用场景
computed 和 watch 区分使用场景
v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
长列表性能优化
事件的销毁
图片资源懒加载
路由懒加载
第三方插件的按需引入
优化无限列表性能
服务端渲染 SSR or 预渲染

2）Webpack 层面的优化

Webpack 对图片进行压缩
减少 ES6 转为 ES5 的冗余代码
提取公共代码
模板预编译
提取组件的 CSS
优化 SourceMap
构建结果输出分析
Vue 项目的编译优化

3）基础的 Web 技术的优化

开启 gzip 压缩
浏览器缓存
CDN 的使用
使用 Chrome Performance 查找性能瓶颈

16、虚拟 DOM 的优缺点？

优点：

保证性能下限： 框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作，它的一些 DOM 操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虚拟 DOM 至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，即保证性能的下限；
无需手动操作 DOM： 我们不再需要手动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率；
跨平台： 虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关，相比之下虚拟 DOM 可以进行更方便地跨平台操作，例如服务器渲染、weex 开发等等。

缺点:

无法进行极致优化： 虽然虚拟 DOM + 合理的优化，足以应对绝大部分应用的性能需求，但在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化。

17、虚拟 DOM 实现原理？

虚拟 DOM 的实现原理主要包括以下 3 部分：

用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象；
diff 算法 — 比较两棵虚拟 DOM 树的差异；
pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。

18、Vue 中的 key 有什么作用？

key 是为 Vue 中 vnode 的唯一标记，通过这个 key，我们的 diff 操作可以更准确、更快速。

19、你使用过 Vuex 吗？

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

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

（2）改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

主要包括以下几个模块：

State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

20、组件中 data 为什么是一个函数？

因为组件是用来复用的，且 JS 里对象是引用关系，如果组件中 data 是一个对象，那么这样作用域没有隔离，子组件中的 data 属性值会相互影响
如果组件中 data 选项是一个函数，那么每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响；而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。

21、Class 与 Style 如何动态绑定？

Class 可以通过对象语法和数组语法进行动态绑定：

对象语法：

<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

data: {
  isActive: true,
  hasError: false
}

数组语法：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

Style 也可以通过对象语法和数组语法进行动态绑定：

对象语法：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

数组语法：

<div v-bind:style="[styleColor, styleSize]"></div>

data: {
  styleColor: {
     color: 'red'
   },
  styleSize:{
     fontSize:'23px'
  }
}

22、组件传值

1、父传子：父组件中通过v-bind绑定一个属性，子组件中通过props接收父组件中的绑定的属性

2、子传父：子组件通过广播的方式$emit将值传递给父组件，父组件中通过一个函数去接收子组件中传递过来的值

3、兄弟间传值：可以通过中间媒介父组件进行传递值得中转

4、使用vuex状态管理，可以实现数据的随意存储和获取

23、什么是MVVM？

MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

24、mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

mvc和mvvm其实区别并不大。

都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。

mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

区别：

vue数据驱动，通过数据来显示视图层而不是节点操作。

场景：

数据操作比较多的场景，更加便捷

25、为什么避免v-if 和 v-for 用在一起

当Vue 处理指令时，v-for 比 v-if 具有更高的优先级，通过v-if 移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，我们只检查它一次，且不会在 v-if 为否的时候运算 v-for。

26、构建的 vue-cli 工程都到了哪些技术，它们的作用分别是什么？

vue.js：vue-cli工程的核心，主要特点是双向数据绑定和组件系统。
vue-router：vue官方推荐使用的路由框架。
vuex：专为 Vue.js 应用项目开发的状态管理器，主要用于维护vue组件间共用的一些变量和方法。
axios（或者 fetch 、ajax ）：用于发起 GET 、或 POST 等 http请求，基于 Promise 设计。
vux等：一个专为vue设计的移动端UI组件库。
创建一个emit.js文件，用于vue事件机制的管理。
webpack：模块加载和vue-cli工程打包器。

27、请你详细介绍一些 package.json 里面的配置

常用对象解析：

(1) scripts：npm run xxx 命令调用node执行的 .js 文件

(2) dependencies：生产环境依赖包的名称和版本号，即这些依赖包都会打包进生产环境的JS文件里面

(3) devDependencies：开发环境依赖包的名称和版本号，即这些依赖包只用于代码开发的时候，不会打包进生产环境js文件里面。

28、对于Vue是一套渐进式框架的理解

渐进式代表的含义是：没有多做职责之外的事，vue.js只提供了vue-cli生态中最核心的组件系统和双向数据绑定，就好像 vuex、vue-router都属于围绕vue.js开发的库。

29、vue.js的两个核心是什么？

vue的两个核心：

1、数据驱动：

在vue中，数据的改变会驱动视图的自动更新。传统的做法是需要手动改变DOM来使得视图更新，而vue只需要改变数据。

2、组件

组件化开发，优点很多，可以很好的降低数据之间的耦合度。将常用的代码封装成组件之后（vue组件封装方法），就能高度的复用，提高代码的可重用性。一个页面/模块可以由多个组件所组成。

30、vue中的修饰符主要有哪些？分别是什么作用

事件修饰符

.stop: 阻止事件冒泡
.native: 绑定原生事件
.once: 事件只执行一次
.self:将事件绑定在自身身上，相当于阻止事件冒泡
.prevent: 阻止默认事件
.caption: 用于事件捕获

表单修饰符：

v-model.lazy - 取代 input 监听 change 事件

v-model.number - 输入字符串转为有效的数字

v-model.trim - 输入首尾空格过滤

31、v-on 可以监听多个方法吗？

v-on 可以监听多个方法，但是同一种事件类型的方法，v-on 只能监听一个

<div id="app">
        <input type="button" value="绑定多个事件" v-on="{ mousedown: doThis, mouseup: doThat }">
        <!-- v-on 可以同时绑定多个事件 -->
 </div>
       <script>
          new Vue({
          el: "#app",
          data() {
            return {
              msg: "llr"
            }
          },
          methods: {
            doThis() {
              console.log("mousedown")
            },
            doThat() {
              console.log("mouseup")
            }
          }
        })

32、$nextTick的使用

this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

33、$route和$router的区别？

$route是“路由信息对象”，包括 path , params ,hash ,query ， fullpath , matched ，name等路由信息参数$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

34、keep-alive生命周期有哪些？

keep-alive是vue提供的一个内置组件，用来对组件进行缓存——在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
如果为一个组件包裹了keep-alive，那么它会多出两个生命周期: deactivated 、activated。同时，beforeDestroy和destroyed就不会再被触发了，因为组件不会被真正销毁。
当组件被换掉时，会被缓存到内存中、触发deactivated生命周期;当组件被切回来时，再去缓存里找这个组件、触发activated钩子函数。

35、delete和Vue.delete删除数组的区别？

delete只是被删除的元素变成了empty/undefined其他的元素的键值还是不变。
vue.delete直接删除了数组改变了数组的键值。

36、assets文件夹和static文件夹的区别？

相同点:assets 和static两个都是存放静态资源文件。项目中所需要的资源文件图片，字体图标，样式文件等都可以放在这两个文件下，这是相同点

不相同点:assets中存放的静态资源文件在项目打包时，也就是运行npm run build时会将assets中放置的静态资源文

件进行打包上传，所谓打包简单点可以理解为压缩体积，代码格式化。而压缩后的静态资源文件最终也都会放置在static

文件中跟着|index.html一同上传至服务器。static中放置的静态资源文件就不会要走打包压缩格式化等流程，而是直接进

入打包好的目录，直接上传至服务器。因为避免了压缩直接进行上传，在打包时会提高一定的效率，但是static中的资源

文件由于没有进行压缩等操作，所以文件的体积也就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间。

建议:将项目中template需要的样式文件js文件等都可以放置在assets中，走打包这一流程。减少体积。而项目中引入的第三方的资源文件如iconfont.css 等文件可以放置在static中，因为这些引入的第三方文件已经经过处理，不再需要处理，直接上传。

37、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对象。

38、vuex的五个属性以及原理

state: vuex的基本数据，用来存储变量
getter:从基本数据(state)派生的数据，相当于state的计算属性
mutation:提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。
回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数，提交载荷作为第二个
action:和mutation的功能大致相同，不同之处在于==》

1.Action提交的是mutation，而不是直接变更状态。
2.Action可以包含任意异步操作。

modules:模块化vuex，可以让每一个模块拥有自己的state、 mutation、action、getters,使得结构非常清晰，方便管理。

39、axios是什么

1、什么是axios?

Axios是一个基于promise的异步ajax请求库，前端最流行的ajax请求库。简单的讲就是可以发送get 、post请求，负责与后端交互。

Vue、React等框架的出现，促使了Axios轻量级库的出现， react/vue官方都推荐使用axios发ajax请求。

因为Vue等，不需要操作Dom，所以不需要引入 jquery.js 了

2、axios的特点?

可以转换请求数据和响应数据，并对响应回来的内容自动转换成JSON类型的数据;
拦截请求和响应（就是前端发送请求前，可以设置自动拦截请求，相当于给请求加条件);
Axios是一个基于[promise的异步ajax请求库，支持promise所有的API ;
axios.all( promises):批量发送多个(异步)请求;
axios在览器端/node端都可以使用，在node环境使用http对象发送ajax请求;在浏览器端使用xMLHttpRequests对象发送ajax请求(XMLHttpRequest]-来实现发送和接收HTTP请求与响应信息)。即创建http请求，向后端发送请求并接收返回的数据;
安全性更高，客户端支持防御xSRF(跨站请求伪造)，就是让你的每个请求都带一个从cookie中拿到的key,根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略;