【Vue面试题系列】五
vue-loader做了哪些事情？
使用vue-loader之前，我们需要安装一些必要的loader。
必要的loader包括：vue-loader、vue-style-loader、vue-template-compiler、css-loader。 可能需要的 loader 包含：sass-loader、less-loader、url-loader 等。
vue-loader工作原理：
通过vue-loader，webpack可以将.vue文件转化为浏览器可识别的JavaScript。
vue-loader的工作流程，简单来说，分为以下几个步骤：
- 将一个.vue文件切割成template、script、styles三个部分。
- template部分通过compile生产render、staticRenderFns
- 获取script部分返回的配置项对象scriptExports。
- styles部分，会通过css-loader、vue-style-loader，添加到head中，或者通过css-loader、MiniCssExtractPlugin提取到一个公共的css文件中。
- 使用vue-loader提供的normalizeComponent方法，合并scriptExports、render、staticRenderFns，返回构建vue组件需要的配置项对象 -options。
Vue 中，假设 data 中有一个数组对象，修改数组元素时，是否会触发视图更新？
不会。
当你把一个普通的JavaScript对象传给vue实例的data选项，vue将遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为getter/setter。Object.definePropty是ES5中一个无法shim的特性，这也就是为什么Vue不支持IE8以及更低版本浏览器的原因。用户看不到getter/setter，但是在内部他们让Vue追踪依赖，在属性被访问和修改时通知变化，这里需要注意的问题是浏览器控制台在打印数据对象时getter/setter的格式化并不同，所以你可能需要安装vue-devtools来获取更加友好的检查接口。每个组件实例都有相应的watcher实例对象，他会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。
触发视图更新的方法：
Vue.set
可以设置对象或数组的值，通过key或数组索引，可以触发视图更新。
Vue.set(array, indexOfItem, newValue)
Vue.set(obj, keyOfItem, newValue)
Vue.delete
删除对象或数组中的元素，通过key或数组索引，可以触发视图更新。
Vue.delete(array, indexOfItem)
Vue.delete(obj, keyOfItem)
数组对象直接修改属性，可以触发视图更新
数组赋值为新数组，可以触发视图更新
Vue提供了如下的数组的变异方法，可以触发视图更新
Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。
这些被包裹过的方法包括：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
vuex中的辅助函数怎么使用？
在实际开发中，我们经常会用到vuex来对数据进行管理，随着数据越来越多，我们逐渐开始使用一些语法糖来帮助我们快速开发。即vuex中的mapState、mapGetters、mapMutations、mapActions等辅助函数是我们经常用到的。
通过辅助函数mapState、mapActions、mapMutations，把vuex.store中的属性映射到vue实例身上，这样在vue实例中就能访问vuex.store中的属性了，对于操作vuex.store就很方便了。
state辅助函数为mapState，actions辅助函数为mapActions，mutations辅助函数为mapMutations。（Vuex实例身上有mapState、mapActions、mapMutations属性，属性值都是函数）
Vuex有几种属性？
五种，分别是State、Getter、Mutation、Action、Module
State
Vuex使用单一状态树，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源（SSOT）”而存在。这也意味着，每个应用将仅仅包含一个store实例。单一状态树让我们能够直接地定位任意特定的状态片段，在调试过程中也能轻易地取得整个当前应用状态的快照。
State属性是Vuex的单一状态树。
Getter
有时候我们需要从store中的state中派生出一些状态，例如对列表进行过滤并计数。
Getter类似于Vue的computed对象。是根据业务逻辑来处理State，使得生成业务所需的属性。
Mutation
更改Vuex的store中的状态的唯一方法是提交mutation。Vuex中的mutation非常类似于事件：每个mutation都有一个字符串的事件类型（type）和一个回调函数（handler）。
Mutation是唯一用来更改Vuex中状态的方法。
Action
类似于mutation，不同在于：
- Action提交的是mutation，而不是直接变更状态
- Action可以包含任意异步操作
Action是用来解决异步操作而产生的，它提交的是Mutation
Module
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂的时候，store对象就有可能变得相当臃肿。为了解决这个问题，vuex允许我们将store分割成module，每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。
Module是将vuex模块化的对象，目的是更好的维护。
Vuex是什么？
Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方法发生变化。
简单点总结，Vuex是一种状态管理模式，存在的目的是共享可复用的组件状态。
谈谈对vue中keep-alive的理解？
什么是keep-alive
在平常开发中，有部分组件没有必要多次初始化，这时我们需要将组件进行持久化，使组件的状态维持不变，在下一次展示时，也不会进行重新初始化组件。
也就是说，keep-alive是vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染，也就是所谓的组件缓存。
keep-alive是vue的内置组件，能在组件切换的过程中将状态保留在内存中，防止重复渲染DOM。
< keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 < transition> 相似，< keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。
include和exclude指定是否缓存某些组件
使用keep-alive的钩子函数执行顺序问题
首先使用了keep-alive的组件以后，组件上就会自动加上了activated钩子和deactivated钩子。
- activated 当组件被激活（使用）的时候触发 可以简单理解为进入这个页面的时候触发
- deactivated 当组件不被使用（inactive状态）的时候触发 可以简单理解为离开这个页面的时候触发
初始进入和离开 created —> mounted —> activated --> deactivated
后续进入和离开 activated --> deactivated
keep-alive的应用场景举例
- 查看表格某条数据详情页，返回还是之前的状态，比如还是之前的筛选结果，还是之前的页数等。
- 填写的表单的内容路由由跳转返回还在，比如input框、下拉选择框、开关切换等用户输入了一大把东西，跳转回来不能清空，不能让用户再写一遍。