9 2知识总结

1、vue路由有⼏种模式?有什么区别?原理是什么?
vue的路由模式⼀共有三种，分别是哈希，history，abstract他们的区别是
hash模式，不会包含在http请求当中，并且hash不会重新加载⻚⾯
history模式，如果前端的url和后端发起请求的url不⼀致的话，会报404错误，所以使⽤history模块的话我们需要和后端进⾏配合
abstract :  支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式
history的原理就是利⽤html5新增的两个特性⽅法，分别是pushState和replaceState来完成的
pushstate可以改变URL地址且不会发送请求
replicestate可以读取历史记录，还可以对浏览器进行修改
当堆栈的路径发生改变会触发onpopstate()事件来监听路径变化，hash是通过onhashchange()事件来监听hash路径的变化

2、为什么vue中data必须是⼀个函数
如果data是⼀个函数的话，这样每复⽤⼀次组件，就会返回⼀份新的data，类似于给每个组件实例创建⼀个私有的数据空间，让各个组件实例维护各⾃的数据。⽽单纯的写成对象形式，就使得所有组件实例共⽤了⼀份data，就会造成⼀个变了全都会变的结果
所以说vue组件的data必须是函数。这都是因为js的特性带来的，跟vue本身设计⽆关

3、说一下对keep-alive的理解
keep-alive是vue内置的⼀个组件，⽽这个组件的作⽤就是能够缓存不活动的组件，在搭建 vue 项⽬时，有某些路由组件没必要多次渲染，所以需要将组件在内存中进⾏‘持久化’，此时在router-view上使⽤keep-alive。 keep-alive可以使被包含的路由组件状态维持不变，即便是组件切换了，其内的状态依旧维持在内存之中。在下⼀次显示时，也不会重新渲染
keep-alive有三个属性
1.include - 字符串或正则表达式。只有名称匹配的组件会被缓存
2.exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存
3.max-数字最多可以缓存多少组件
使用keep-alive还会增加两个钩子函数
activated(原因：再次进入到缓存页面mounted就不执行了 缓存的页面接口请求放在activated中)
deactivated(原因：缓存页面离开的时候不会执行beforeDestroy destroyed)

4、怎样理解 Vue 的单向数据流
数据总是从⽗组件传到⼦组件，⼦组件没有权利修改⽗组件传过来的数据，只能请求⽗组件对原始数据进⾏修改。这样会防⽌从⼦组件意外改变⽗级组件的状态，从⽽导致你的应⽤的数据流向难以理解
每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改

5、Vue 的父组件和子组件生命周期钩子函数执行顺序？
Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：
-加载渲染过程
 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
-子组件更新过程
 父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
-父组件更新过程
 父 beforeUpdate -> 父 updated
-销毁过程
 父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

6、在哪个生命周期内调用异步请求？
可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。推荐在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：
-能更快获取到服务端数据，减少页面 loading 时间；
-ssr 不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性

7、你使用过 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 且同时保存在单一的状态树中

8、直接给一个数组项赋值，Vue 能检测到变化吗？
由于 JavaScript 的限制，Vue 不能检测到以下数组的变动：
-当你利用索引直接设置一个数组项时
-当你修改数组的长度时
所以我在项⽬中遇到这类问题的时候⼀般是通过this. $set方法去解决this.$set⽅法⼀共有三个参数，分别是⽬前属性，新增属性，新增的值

9、你说一下生命周期吧
beforeCreate()创建前的阶段，这个时候data中的数据，还未定义，所以不能使用
created()最早开始使用 data和methods中数据的钩子函数
beforeMount()指令已经解析完毕内存中已经生成dom树，还没有渲染到本地
mounted()dom已经渲染完毕，最早可以操作DOM元素钩子函数
beforeUpdate()当data的数据发生改变会执行这个钩子 内存更新，但是DOM节点还未更新
updated()数据更新完成以后触发的方法，DOM节点已经更新
beforeDestroy()即将销毁 data和methods中的数据此时还是可以使用的，可以做一些释放内存的操作
destroyed()已经销毁完毕
Keepalive：
activated (原因：再次进入到缓存页面mounted就不执行了 缓存的页面接口请求放在activated中)
deactivated(原因：缓存页面离开的时候不会执行beforeDestroy destroyed)
vue错误处理：
errorCaptured当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播

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

11、vue双向绑定的原理
vue则是采⽤ 数据劫持 结合 发布者-订阅者 模式的⽅式，通过 Object.defineProperty() 来劫持各个属性的 setter ， getter ，在数据变动时发布消息给订阅者，触发相应的监听回调。这个时候就可以实现数据的双向绑定

12、说⼀下什么是mvvm模式
控制器Controller
控制器负责提供访问应用程序的行为，通常通过接口定义或注解定义两种方法实现。
控制器负责解析用户的请求并将其转换为一个模型，MVC中一个控制器类可以包含多个方法
MVVM是把 MVC 的 Controller 和 MVP 的 Presenter 改成了 ViewModel
M 数据模型 V是视图 VM 逻辑处理
View 的变化会⾃动更新到 ViewModel ， ViewModel 的变化也会⾃动同步到 View 上显示。这种⾃动同步是因为 ViewModel 中的属性实现了 Observer ，当属性变更时都能触发对应的操作

13、MVVM模式的优点以及与MVC模式的区别
MVVM模式的优点：
1、低耦合： 视图（View）可以独⽴于 Model 变化和修改，⼀个 ViewModel 可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变
2、可重⽤性： 你可以把⼀些视图逻辑放在⼀个ViewModel⾥⾯，让很多 view 重⽤这段视图逻辑
3、独⽴开发： 开发⼈员可以专注于业务逻辑和数据的开发（ViewModel），设计⼈员可以专注于⻚⾯设计
4、可测试： 界⾯素来是⽐较难于测试的，⽽现在测试可以针对ViewModel来写
MVVM 和 MVC 的区别：
mvc 和 mvvm 其实区别并不⼤。都是⼀种设计思想
主要区别mvc 中 Controller演变成 mvvm 中的 viewModel，mvvm 通过数据来显示视图层⽽不是节点操作。mvvm主要解决了mvc中⼤量的DOM 操作使⻚⾯渲染性能降低，加载速度变慢，影响⽤户体验

14、说一下vue自定义指令的钩子函数
bind: 只调用一次，指令第一次绑定到元素时调用 可以写元素样式
unbind: 只调用一次， 指令与元素解绑时调用
inserted: 被绑定元素插入父节点时调用 可以操作dom
update: 被绑定元素所在的模板更新时调用
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用
每个钩子函数都有两个参数
el  binding   el是原生dom对象 binding是当前指令的参数对象

15、说⼀下vue中本地跨域如何解决?线上跨域如何解决?
本地跨域是通过在vue.config.js⽂件⾥⾯的devServer属性⾥⾯的proxy属性⾥⾯配置,⼀共配置三个属性,分别是代理名称 代理地址 开启跨域 重写路径
线上跨域是在nginx.conf⽂件⾥⾯配置, 代理名称是通过location 代理名称。proxy_pass 代理地址

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