vue
1.对于Vue是一套渐进式框架的理解？
渐进式代表的含义是：主张最少。
Vue可能有些方面是不如React，不如Angular，但它是渐进
的，没有强主张，你可以在原有大系统的上面，把一两个组
件改用它实现，当jQuery用；也可以整个用它全家桶开发，
当Angular用；还可以用它的视图，搭配你自己设计的整个下
层用。你可以在底层数据逻辑的地方用MVVM和设计模式的
那套理念，也可以函数式，都可以，它只是个轻量视图而
已，只做了自己该做的事，没有做不该做的事，仅此而已。
2.请列出至少4个vue基本指令，并简要说明其作用。
v-model 多用于表单元素实现双向数据绑定
v-for 格式： v-for="字段名 in(of) 数组json" 循环数组或
json,需要注意从vue2开始取消了$index
v-show 显示内容
v-if 显示与隐藏
v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错
误
v-bind 动态绑定 作用： 及时对页面的数据进行更改,可以简
写成:
v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点
击函数 函数必须写在methods里面
v-text 解析文本
v-html 解析html标签
3.v-show 与 v-if 有什么区别？
v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内
的事件监听器和子组件适当地被销毁和重建；也是惰性的：
如果在初始渲染时条件为假，则什么也不做——直到条件第
一次变为真时，才会开始渲染条件块。
v-show 就简单得多——不管初始条件是什么，元素总是会被
渲染，并且只是简单地基于 CSS 的 “display” 属性进行切换。
所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条
件的场景；v-show 则适用于需要非常频繁切换条件的场景
4.说说你对 SPA 单页面的理解，它的优缺点分别是什么？
SPA（ single-page application ）仅在 Web 页面初始化
时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载
完成，SPA 不会因为用户的操作而进行页面的重新加载或
跳转；取而代之的是利用路由机制实现 HTML 内容的变
换，UI （视图template的内容）与用户的交互，避免页
面的重新加载。
优点：用户体验好、快，内容的改变不需要重新加载整个
页面，避免了不必要的跳转和重复渲染；基于上面一点，
SPA 相对对服务器压力小；前后端职责分离，架构清晰，
前端进行交互逻辑，后端负责数据处理；
缺点：初次加载耗时多：为实现单页 Web 应用功能及显
示效果，需要在加载页面的时候将 JavaScript、CSS 统一
加载，部分页面按需加载；前进后退路由管理：由于单页
应用在一个页面中显示所有的内容，所以不能使用浏览器
的前进后退功能，；SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势
5.单页应用和多页应用的区别
| 单页面（SPA） | 多页面（MPA） | |
|---|---|---|
| 刷新方式 | 页面局部刷新或更改 | 整页刷新 |
| url 模式 | a.com/#/pageone a.com/#/pagetwo | a.com/pageone.html a.com/pagetwo.html |
| 用户体验 | 页面片段间的切换快，用户体验良好 | 页面切换加载缓慢，流畅度不够，用户体验比较差 |
| 转场动画 | 容易实现 | 无法实现 |
| 数据传递 | 容易 | 依赖 url传参、或者cookie 、localStorage等 |
| 搜索引擎优化(SEO) | 需要单独方案、实现较为困难、不利于SEO检索 ，可利用服务器端渲染(SSR)优化 | 实现方法简易 |
| 适用范围 | 高要求的体验度、追求界面流畅的应用 | 适用于追求高度支持搜索引擎的应用 |
| 开发成本 | 较高，常需借助专业的框架 | 较低 ，但页面重复代码多 |
| 维护成本 | 相对容易 | 相对复杂 |
6.vue的核心
数据驱动 组件系统
7.vue的优缺点
优点;
1.轻量级的数据框架
2.双向数据绑定
3.提供了指令
4.组件化开发
5.客户端路由
6.状态管理
缺点：
1.Vue 底层基于 Object.defineProperty 实现响应式，而这个 api 本身不支持 IE8 及以下浏 览器，所以Vue不支持IE8及其以下浏览器；
2.Vue 打造的是SPA，所以不利于搜索引擎优化(SEO)；
3.由于 CSR（client server render）的先天不足，导致首屏加载时间长，有可能会出现闪屏。
8.什么是 MVVM设计模式？
M -model数据，V-view 视图 VM-viewModel 视图模型
（1）View 层
View 是视图层，也就是用户界面。前端主要由 HTML 和 CSS
来构建 。
（2）Model 层
Model 是指数据模型，泛指后端进行的各种业务逻辑处理和
数据操控，对于前端来说就是后端提供的 api 接口。
（3）ViewModel 层
ViewModel 是由前端开发人员组织生成和维护的视图数据
层。在这一层，前端开发者对从后端获取的 Model 数据进行
转换处理，做二次封装，以生成符合 View 层使用预期的视图
数据模型。需要注意的是 ViewModel 所封装出来的数据模型
包括视图的状态和行为两部分，而 Model 层的数据模型是只
包含状态的，比如页面的这一块展示什么，而页面加载进来
时发生什么，点击这一块发生什么，这一块滚动时发生什么
这些都属于视图行为（交互），视图状态和行为都封装在了
ViewModel 里。这样的封装使得 ViewModel 可以完整地去
描述 View 层。
MVVM 框架实现了双向绑定，这样 ViewModel 的内容会实
时展现在 View 层，前端开发者再也不必低效又麻烦地通过操
纵 DOM 去更新视图，MVVM 框架已经把最脏最累的一块做
好了，我们开发者只需要处理和维护 ViewModel，更新数据
视图就会自动得到相应更新。这样 View 层展现的不是
Model 层的数据，而是 ViewModel 的数据，由 ViewModel
负责与 Model 层交互，这就完全解耦了 View 层和 Model
层，这个解耦是至关重要的，它是前后端分离方案实施的重
要一环
9.vue中key 值的作用？
在v-for时使用，标识组件的唯一性，更好的区分组件，高效
的更新虚拟DOM
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认
用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移
动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个
元素，并且确保它在特定索引下显示已被渲染过的每个元
素。key的作用主要是为了高效的更新虚拟DOM
10.vue中动态样式绑定（class）的方式都有哪些？
对象方法：
:class="{ 'active': isActive }"
:class=" {'active':isActive==-1}"
:class="{'active':isActive==index}"
变量：
:class="classObject"
data() { return { classObject:{ active: true, sort:false } } }
数组方法：
:class="[index==1？’active':'']"
11.localStorage和sessionStorage区别
localStorage生命周期是永久，这意味着除非用户显示在浏览
器提供的UI上清除localStorage信息，否则这些信息将永远存
在。
sessionStorage生命周期为当前窗口或标签页，一旦窗口或
标签页被永久关闭了，那么所有通过sessionStorage存储的
数据也就被清空了
12.Cookie、LocalStorage 与 SessionStorage的区别在
哪里？
Cookie :
Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它 的大小限制为4KB左右。它的主要用途有保存登录信息，比如你 登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的
localStorage:
localStorage 是 HTML5 标准中新加入的技术，它并不是什 么划时代的新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方 案是使用 Flash。而如今，localStorage 被大多数浏览器所 支持，如果你的网站需要支持 IE6+，那以 userData 作为你 的 polyfill 的方案是种不错的选择。
sessionStorage:
sessionStorage 与 localStorage 的接口类似，但保存数 据的生命周期与 localStorage 不同。做过后端开发的同学应 该知道 Session 这个词的意思，直译过来是“会话”。而 sessionStorage 是一个前端的概念，它只是可以将一部分数 据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关 闭后，sessionStorage 中的数据就会被清空。
| 特性 | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| 与服务器端通信 | 每次都会携带在HTTP头中 | 仅在客户端 （即浏览器）中保存，不参与和服务器的 | 仅在客户端 （即浏览器）中保存，不参与和服务器的 |
| 易用性 | 需要程序员自己封装，源生的Cookie接口 | 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持 | 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持 |
应用场景
有了对上面这些差别的直观理解，我们就可以讨论三者的应用场 景了。 因为考虑到每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精简就精简啦，比较常用的一个应用场景就是 判断用户是否登录。针对登录过的用户，服务器端会在他登录时 往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码， 下次只要读取这个值就可以判断当前用户是否登录啦。曾经还使 用 Cookie 来保存用户在电商网站的购物车信息，如今有了 localStorage，似乎在这个方面也可以给 Cookie 放个假了 ~而另一方面 localStorage 接替了 Cookie 管理购物车的工 作，同时也能胜任其他一些工作。比如HTML5游戏通常会产生一 些本地数据，localStorage 也是非常适用的。如果遇到一些 内容特别多的表单，为了优化用户体验，我们可能要把表单页面 拆分成多个子页面，然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了
安全性的考虑
需要注意的是，不是什么数据都适合放在 Cookie、 localStorage 和 sessionStorage 中的。使用它们的时 候，需要时刻注意是否有代码存在 XSS 注入的风险。因为只要 打开控制台，你就随意修改它们的值，也就是说如果你的网站中 有 XSS 的风险，它们就能对你的 localStorage 肆意妄为。 所以千万不要用它们存储你系统中的敏感数据。
13.Vue中常用的修饰符有哪些？并简要说明它们的作用。
Stop：阻止冒泡；
prevent：阻止默认事件；
once：只执行一次；
capture：将事件流设为捕获方式；
self：直对自身触发事件；
enter：回车键；Up:上；
down：下；left:左；right：右；
14.vue中检测不到数组或者对象发生改变，如何解决？
(1)vm.arr.splice(index, 1, newValue)
(2)vm.$set(vm.arr, index, newValue)
(3)Vue.set(vm.arr, index, newValue)
15.vue更新数组时触发视图更新的方法
push()；pop()；shift()；unshift()；splice()； sort()； reverse()
16.谈谈你对 Vue 生命周期的理解？
（1）生命周期是什么？
Vue 实例有一个完整的生命周期，也就是从开始创建、初始
化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载
等一系列过程，我们称这是 Vue 的生命周期。
（2）各个生命周期的作用
生命周期的描述
beforeCreate 组件实例被创建之初，组件的属性生效之前
created 组件实例已经完全创建，属性也绑定，但真实 dom
还没有生成，$el 还不可用
beforeMount 在挂载开始之前被调用：相关的 render 函数
首次被调用 mounted el 被新创建的 vm.$el 替换，并挂载到
实例上去之后调用该钩子 beforeUpdate 组件数据更新之前
调用，发生在虚拟 DOM 打补丁之前
update 组件数据更新之后
beforeDestory 组件销毁前调用
destoryed 组件销毁后调用
17.在哪个生命周期内调用异步请求？
可以在钩子函数 created、beforeMount、mounted 中进行
调用，因为在这三个钩子函数中，data 已经创建，可以将服
务端端返回的数据进行赋值。（本人常放置到mounted中可
以操作dom,当然也可以放到created中）
18.计算属性和 methods 的区别
1.两种方式得到的结果是相同的。
不同的是计算属性是基于变量的值进行缓存的， 只要在它关联的变量值发生变化时计算属性就会重新执行。
而 methods 没有缓 存，所以每次访问都要重新执行。
2、计算属性的特点： 计算属性使数据处理 结构清晰； 依赖于数据，如果数据有更新，则计算属性的结果自动更新； 计算 属性的结果无须在 data 中定义就能够在页面中直接使用； 相较于 methods，如 果依赖的数据不更新，则读取缓存，不会重新计算。
19.计算属性和 watch 的区别
共同点：
都是以 Vue 的依赖追踪机制为基础的，都是希望在依赖数据发生改变 的时候，被依赖的数据根据预先定义好的函数，发生“自动”的变化。
不同点：
watch 擅长处理的场景：一个数据影响多个数据；
computed 擅长处理的场景： 一个数据受多个数据影响。
watch:可以执行异步开销比较大的逻辑
computed： 纯计算
watch:不需要调用
computed：需要调用，当做属性调用
总结： 当在模板内使用了复杂逻辑的表达式时，应当使用计算 属性。 虽然方法也能实现同样的效果，但是因为计算属性可以基于它们的依赖 进行缓存，所以选择计算属性会比方法更优。 当需要在数据变化时执行异步或 开销较大的操作时，可以使用 watch。
20.为什么组件中的 data 必须是一个函数，然后 return 一个对象，而 new Vue 实例里，data 可以直接是一个对象？
因为组件是用来复用的，且 JS 里对象是引用关系，如果组件
中 data 是一个对象，那么这样作用域没有隔离，子组件中的
data 属性值会相互影响，如果组件中 data 选项是一个函
数，那么每个实例可以维护一份被返回对象的独立的拷贝，
组件实例之间的 data 属性值不会互相影响；而 new Vue 的
实例，是不会被复用的，因此不存在引用对象的问题。
21.怎样理解 Vue 的单向数据流？
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑
定：父级 prop 的更新会向下流动到子组件中，但是反过来则
不行。这样会防止从子组件意外改变父级组件的状态，从而
导致你的应用的数据流向难以理解。
额外的，每次父级组件发生更新时，子组件中所有的 prop 都
将会刷新为最新的值。这意味着你不应该在一个子组件内部
改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发
出警告。子组件想修改时，只能通过 $emit 派发一个自定义
事件，父组件接收到后，由父组件修改。
22.Vue 的父组件和子组件生命周期钩子函数执行顺序？
Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类
为以下 4 部分：
加载渲染过程：
父 beforeCreate -> 父 created -> 父 beforeMount -> 子
beforeCreate -> 子 created -> 子 beforeMount -> 子
mounted -> 父 mounted
23.谈谈你对 keep-alive 的了解？
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保
留状态，避免重新渲染 ，其有以下特性：
对应两个钩子函数 activated 和 deactivated ，当组件被
激活时，触发钩子函数 activated，当组件被移除时，触
发钩子函数 deactivated;
一般结合路由和动态组件一起使用，用于缓存组件；
24.Vue 组件间通信有哪几种方式？
（1）props / $emit 适用 父子组件通信
这种方法是 Vue 组件的基础，相信大部分同学耳闻能详，所
以此处就不举例展开介绍。
（2）ref
ref：如果在普通的 DOM 元素上使用，引用指向的就是DOM 元素；如果用在子组件上，引用就指向组件实例
（3）EventBus （$emit / $on） 适用于 父子、隔代、兄弟
组件通信
（4）Vuex 适用于 父子、隔代、兄弟组件通信
25.vue-router 是什么?它有哪些组件
vue-router 是 vue 的路由插件,
组件：router-link router-view
26.active-class 是哪个组件的属性
active-class 是 vue-router 模块的 router-link 组件的属性
27.怎么定义 vue-router 的动态路由?怎么获取传过来的值
在 router 目录下的 index.js 文件中，对 path 属性加上
/:id。
获取传过来的值
使用 router 对象的 params.id 获取
28.vue-router **有哪几种导航钩子?
全局守卫： 守卫所有的路由 beforeEach afterEach
路由独享守卫： 守卫某一个路由 beforeEnter
组件内部守卫： 守卫的是组件
beforeRouteEnter 组件进来之前
beforeRouteUpdate 组件的路由更新之前
beforeRouteLeave 组件离开之前
29.is作用是什么？
解决标签固定搭配问题；动态组件
30.ref作用？
获取DOM节点或者子组件实例的句柄。
31.混入是做什么的？
将组件公共的逻辑抽离出来
32.keep-alive 会重复触发生命周期吗？如果想要重复触发的逻辑如何实现？
不会重复触发生命周期，如果想要重复触发的逻辑写在activated deactivated.
33.路由如何实现导航？
router-link $router.push() $router.replace() $router.go(-1)
34.router 的区别
router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经
常用的跳转链接就可以用this.$router.push，和router-link
跳转一样。。。
route相当于当前正在跳转的路由对象。。可以从里面获取
name,path,params,query等。。
35.vue-router传参
1.search传参，通过$route.query接收参数
2.动态路由传参，通过$route.params接收参数
36.vue-router的两种模式（hash，history）的区别
1. hash模式（vue-router默认hash模式）
hash模式背后的原理是onhashchange事件。
window.onhashchange=function(){
let hash=location.hash.slice(1);
document.body.style.color=hash;
}
由于hash发生变化的url都会被浏览器记录下来，使得浏览器
的前进后退都可以使用了，尽管浏览器没有亲求服务器，但
是页面状态和url关联起来。后来人们称其为前端路由，成为
单页应用标配。
比如http://www.abc.com/#/index，hash值为#/index。
hash模式的特点在于hash出现在url中，但是不会被包括在
HTTP请求中，对后端没有影响，不会重新加载页面。
2.history模式
history模式利用了HTML5 History Interface中新增的
pushState()和replaceState()方法。这两个方法应用于浏览器的历史记录栈，提供了对历史记录进行修改的功能。只是当他们进行修改
时，虽然修改了url，但浏览器不会立即向后端发送请求。
当使用history模式时，url就像正常的url,例如http://abc.co
m/user/id相比hash模式更加好看。特别注意，history模式
需要后台配置支持。如果后台没有正确配置，访问时会返回404。
通过history api，我们丢弃了丑陋的#，但是有一个缺点，当
刷新时，如果服务器中没有相应的相应或者资源，会分分钟
刷出一个404来（刷新需要请求服务器）。所以history模式
不怕前进，不怕后退，就怕刷新
37.vue-router实现路由懒加载（ 动态加载路由 ）
//方法1：
const Recommend = () =>import('components/recommend/recommend')
//方法2：
const Recommend = (resolve) =>Promise.resolve(import('components/recommend/recommend'))
38.vue跳转新路由 滚动到固定位置
export default new Router({
// mode: 'history', //可以去掉url中的#。但是打包 后需要后台配置，否则会404
routes: routerMap,
scrollBehavior(to, from, savedPosition) {
// 设置回到顶部
if (savedPosition) { return savedPosition }
return {x: 0, y: 0}
}
})
39.axios是什么？
axios 是一个基于 Promise 的 HTTP 客户端，专门为浏览 器和 node.js 服务。
40.axios的特点是什么？
1.在浏览器中发送 XMLHttpRequests 请求
2.在 node.js 中发送 http 请求
3.支持 Promise API
4.拦截请求和响应
5.转换请求和响应数据
6.取消请求
7.自动转换 JSON 数据格式
8.客户端支持防范 XSRF 攻击
41.axios拦截器是什么？
axios拦截分为请求式拦截跟响应式拦截 。
request请求拦截器：发送请求前统一处理，如：设置请求头 headers等。
response响应拦截器：有时候我们要根据响应的状态码来进行 下一步操作
请求拦截：
axios.interceptors.request.use(config => { config.interceptors = '请求拦截器'
return config
})
响应拦截：
// http response 拦截器
axios.interceptors.response.use( response => {
//拦截响应，做统一处理
return response })
42.axios 如何封装？
封装的同时，你需要和 后端协商好一些约定，请求头，状态码， 请求超时时间…
设置接口请求前缀：根据开发、测试、生产环境的不同，前缀需 要加以区分
请求头 : 来实现一些具体的业务，必须携带一些参数才可以请 求(例如：会员业务)
状态码: 根据接口返回的不同status,来执行不同的业务，这块 需要和后端约定好
请求方法：根据get、post等方法进行一个再次封装，使用起来 更为方便
请求拦截器: 根据请求的请求头设定，来决定哪些请求可以访问 响应拦截器：这块就是根据后端返回来的状态码判定执行不同业 务
43.vuex是什么？怎么使用？哪种功能场景使用它？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它 采用集中式存储管理应用的所有组件的状态，并以相应的规则保 证状态以一种可预测的方式发生变化。简单来说就是：应用遇到 多个组件共享状态时，使用vuex。
场景：多个组件共享数据或者是跨组件传递数据时
vuex的流程:
页面通过mapAction异步提交事件到action。action通过 commit把对应参数同步提交到mutation，mutation会修改 state中对应的值。最后通过getter把对应值跑出去，在页面的 计算属性中，通过，mapGetter来动态获取state中的值
44.vuex有哪几种属性
有五种,分别是State , Getter , Mutation , Action , Module (就是mapAction)
1. state：vuex的基本数据，用来存储变量
2. geeter：从基本数据(state)派生的数据，相当于state 的计算属性
3. mutation：提交更新数据的方法，必须是同步的(如果需要 异步使用action)。每个mutation 都有一个字符串的 事件类 型 (type) 和 一个 回调函数 (handler)。回调函数就是我 们实际进行状态更改的地方，并且它会接受 state 作为第一个 参数，提交载荷作为第二个参数。
4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状 态。 2. Action 可以包含任意异步操作。
5. modules：模块化vuex，可以让每一个模块拥有自己的 state、mutation、action、getters,使得结构非常清晰， 方便管理。
45.Vue.js中axios请求代码应该写在组件的methods中还是vuex的actions中？？
一、如果请求来的数据是不是要被其他组件公用，仅仅在请求的 组件内使用，就不需要放入vuex 的state里。
二、如果被其他地方复用，这个很大几率上是需要的，如果需 要，请将请求放入action里，方便复用，并包装成promise返 回，在调用处用async await处理返回的数据。如果不要复用这 个请求，那么直接写在vue文件里很方便
46.不用Vuex会带来什么问题？
一、可维护性会下降，你要想修改数据，你得维护三个地方
二、可读性会下降，因为一个组件里的数据，你根本就看不出来 是从哪来的
三、增加耦合，大量的上传派发，会让耦合性大大的增加，本来 Vue用Component就是为了减少耦合，现在这么用，和组件化的 初衷相背。
当兄弟组件有大量通信的，建议一定要用，不管大项目和小项 目，因为这样会省很多事
47.vuex的State特性是
一、Vuex就是一个仓库，仓库里面放了很多对象。其中state就 是数据源存放地，对应于与一般Vue对象里面的data
二、state里面存放的数据是响应式的，Vue组件从store中读 取数据，若是store中的数据发生改变，依赖这个数据的组件也 会发生更新
三、它通过mapState|mapGetters把全局的 state 和 getters 映射到当 前组件的 computed 计算属性中
48.vuex的Getter特性是？
一、getters 可以对State进行计算操作，它就是Store的计 算属性 二、 虽然在组件内也可以做计算属性，但是getters 可以在多 组件之间复用
三、 如果一个状态只在一个组件内使用，是可以不用getters
49.mutations VS actions
mutations:同步 可以直接修改state $store.commit() 回调函数的第1个参数是当前仓库的数据(state) 作用：修改state
actions : 异步+同步 通过mutations修改state $store.dispatch() 回调函数的第1个参数是当前仓库本身(context)) 作用：做业务逻辑
50.vuex和本地存储的区别
vuex ： 存取数据方便 刷新数据就没有了 数据实时渲染
本地存储：不太灵活 刷新数据还在 本地存储不会实时渲染数据
51.常见的网络状态码
200 请求处理成功，返回相关信息
304 请求成功，服务器允许请求，但内容并没修改，客户端可以使用缓存的内容
403 请求资源的访问被服务器拒绝
404 服务器上无法找到被请求的资源
500 500及以上服务器或接口的问题
52.vue如何刷新当前路由
this.$route.go(0)
53.vue双向数据绑定的原理
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
observer用来实现对每个vue中的data中定义的属性循环用Object.defineProperty()实现数据劫持，以便利用其中的setter和getter，然后通知订阅者，订阅者会触发它的update方法，对视图进行更新。
在vue中v-model，v-name，{{}}等都可以对数据进行显示，也就是说假如一个属性都通过这三个指令了，那么每当这个属性改变的时候，相应的这个三个指令的html视图也必须改变，于是vue中就是每当有这样的可能用到双向绑定的指令，就在一个Dep中增加一个订阅者，其订阅者只是更新自己的指令对应的数据，也就是v-model='name'和{{name}}有两个对应的订阅者，各自管理自己的地方。每当属性的set方法触发，就循环更新Dep中的订阅者。
react
1.React有哪些优缺点？
优点
性能好,速度快:因为使用了virtual dom;
跨浏览器兼容:虚拟dom解决了跨浏览器问题; 一切都是component :代码更加模块化,复用代码容易,可维
护性更高
单项数据流: Flux是一个用于在JavaScript应用中创建单
向数据层的架构
缺点：
不是一个完整的框架:基本都需要加上ReactRouter和flux
才能构建大型项目
目前就Yahoo的Email在使用,有大部分坑还没被发现.
2.React解决了什么问题？
组件化：这是react的核心
模块化：基于webpack，可以使用ES6或者commonJS的写法 实现模块化
开发效率：react代码基本就是组件的组合，只用关心一个 render函数，不用关心视图局部的修改
运行效率：react实现了虚拟dom,相比于其他框架具有更优 的效率
可维护性：react基于flux或者redux的架构设计，确定的 store很容易定位问题
3.react 、vue、angular的区别
| 开发者 | 数据绑定 | 依赖标准 | 模板语法 | 设计模式 | |
|---|---|---|---|---|---|
| vue | 尤雨溪 | 双向数据绑定 | ES5/ES6 | view+js+css | MVVM |
| react | 单项数据绑定 | ES6 | JSX | mvc中的 view | |
| angular | 谷歌 | 双向数据绑定 | TypeScript | view | MVC |
4.react diff原理?
当你使用react的时候，在某个时间点render函数创建了一 颗react元素树，在下一个state或者props更新的时候， react函数将创建一颗新的react树,react将对比两棵树的不同之 处，计算出如何高效的更新UI（值更新变化的地方）
5.react组件有几种方式,区别是什么？
函数定义： 无state,无生命周期，通过props接收父组件传递的数据
类定义：有state,有生命周期，通过this.props接收父组件传递的数据
6.state如何设置初始值并进行改变？
在类组件中,通过constructor函数来设置state的初始值.
修改state需要调用setState(),setState()会引起 render的重新执行
7.React中如何进行事件绑定
方式一:<button onClick={() => this.fn()}>绑定 1</button>
方式二:<button onClick={this.fn.bind(this)}>绑定 2</button>
8.react 使用箭头函数(arrow functions)的优点是什么？
形式简洁
方便进行函数绑定和参数传递
解决this指向问题
9组件的状态(state)和属性(props)之间有何不同?
state:是一种数据结构，用于组件挂载时定义数据的默认值。 修改state使用setState,会触发render函数执行，渲染页面。
props:是由父组件传递给子组件的。对于子组件而言， props是不可变的
10.react组件优化有哪些方式？
shouldComponentDidUpdate
componentWillUnmount
PureComponent
React.memo()
HOC
Hooks
Fragment
路由懒加载（React.lazy +React.Suspense）
错误边界处理（componentDidCatch）
-
Link 和 NavLink 的区别？
NavLink有activeClassName属性，Link没有
12.在 react 中 hash 模式和 history 模式的区别？
同vue
13.在 react 中路由传参是如何进行传递参数，？
1.search传参（？）
传参
<Link to="/detail?id=1&a=2&c=3"></Link>
接受参数
let search=this.props.location.search ;//'?id=1&a=2&c=3'
解析参数1：
import querystring from "querystring"
let d=querystring.parse(search.slice(1));//{id:"1",a:"2",b:"3"}
解析参数2：
let myURL = new URL("http://localhost:3000" + search);
// myURL.searchParams 是一个Map
let id = myURL.searchParams.get("id");//1
let type = myURL.searchParams.get("a");//2
2.动态路由（：）
传参：
<Link to="/detail/1/2/3"></Link>
修改路由规则
<Route path="/detail/:id/:a/:b" component={Detail}></Route>
取参数
this.props.match.params //{id:"1",a:"2",b:"3"}
14.在 react 中有哪些基本的路由组件？
HashRouter :hash模式
BrowserRouter ：history模式
Switch：路由出口
Route：路由规则
Redireact：重定向
15.react如何实现路由懒加载？
1.通过React.lazy()引入
let Register = React.lazy(() => import("./pages/Register/Register"));
let Index = React.lazy(() => import("./pages/Index/Index"));
2.通过Suspense包裹路由出口
export default function App() {
return (
<Suspense fallback={<div>正在努力加载中...</div>}>
{/* 路由出口 */}
<Switch>
{/* 路由规则 */}
<Route path="/login" component={Login}></Route>
<Route path="/register" component={Register}></Route>
</Switch>
</Suspense>
);
}
16.react编程式导航如何使用？
this.props.history.push(path) 添加一条新的历史记录
this.props.history.replace(path)用新的历史记录替换当前历史记录
this.props.history.go(-1) 返回
this.props.history.goBack() 返回
17.react编程式导航报错如何解决？（push或者go of undefined）
对于非路由组件，是不能直接使用编程式导航的。
1.需要路由组件将props向下传递，非路由组件收到才可以使用history 。
<GoBack {...this.props}></GoBack>
2.withRouter
import {withRouter} from "react-router-dom"
class GoBack extends React.Component{
render(){
return (
<Icon type="left" onClick={()=>this.props.history.go(-1)} />
)
}
}
export default withRouter(GoBack);
18.react如何刷新当前路由
props.history.go(0)
19.受控组件和非受控组件的区别
| 特征 | 受控组件 | 非受控组件 |
|---|---|---|
| 一次性检索（例如表单提交） | 是 | 是 |
| 及时验证 | 是 | 否 |
| 有条件的禁用提交按钮 | 是 | 否 |
| 执行输入格式 | 是 | 否 |
| 一个数据的几个输入 | 是 | 否 |
| 动态输入 | 是 | 否 |
20.容器型组件和展示型组件的区别
21.redux的三大原则
1.单一数据源（只有一个仓库）
2.state是只读的（state不能修改的）
3.只能通过纯函数修改state。
22.redux中间件
中间件提供第三方插件的模式，自定义拦截action -> reducer 的过程。变为 action -> middlewares -> reducer。这种机制可以让我们改变数据流，实现如异步 action ，action 过滤，日志输出，异常报告等功能。
23.常见的redux中间件
Redux-logger：提供日志输出
Redux-thunk：处理异步操作
24.如何在Redux中定义操作?
React中的操作必须具有type属性，该属性指示正在执行的操作的类型。
它们必须被定义为一个字符串常量，你还可以向它添加更多的属性。
在Redux中，操作是使用名为Action creator的函数创建的。
25.解析Reducer的作用
Reducer是纯函数，它指定应用程序的状态如何随操作的变化而变化。
reduce通过获取以前的状态和动作来工作，然后返回一个新的状态。
它根据操作的类型确定需要执行哪种类型的更新，然后返回新值。
如果不需要做任何工作，它将返回以前的状态。
26.store存储在Redux中的意义是什么?
存储是一个JavaScript对象，它可以保存应用程序的状态，并提供一些帮助方法来访问状态、分派操作和注册侦听器。
应用程序的整个状态/对象树保存在单个存储中。
因此，Redux非常简单和可预测。
我们可以将中间件传递给存储来处理数据，以及保存更改存储状态的各种操作的日志。所有操作都通过reduce返回一个新的状态。
27.Redux的优点是什么?
结果的可预测性——因为总是有一个真实的来源，即存储，所以对于如何将当前状态与操作和应用程序的其他部分同步，没有混淆。
可维护性——通过可预测的结果和严格的结构，代码变得更容易维护。
服务器端呈现—只需将在服务器上创建的存储传递到客户端。
这对于初始渲染非常有用，并提供了更好的用户体验，因为它优化了应用程序的性能。
开发人员工具——从操作到状态更改，开发人员可以实时跟踪应用程序中发生的所有事情。
社区和生态系统——Redux背后有一个巨大的社区，这使得它更容易使用。一个庞大的人才社区为图书馆的改善和开发各种应用作出了贡献。
易于测试——Redux的代码主要是小的、纯的和隔离的函数。这使得代码可测试且独立。
组织——Redux精确地定义了代码的组织方式，这使得代码在团队使用时更加一致和简单。
28.react虚拟DOM实现原理，以及为什么虚拟 dom 会提高性能
1. 用 js对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中。
2. 当状态变更的时候，重新构造一棵新的对象树。然后对比新旧虚拟DOM树，记录两棵树差异。
3. 把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。
原因：虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法减少了对真实DOM的操作次数，从而提高性能。
29.react怎么从虚拟dom中拿出真实dom
Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。
我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄，该值会作为回调函数的第一个参数返回。或者ref可以传字符串。
30.react组件之间如何通信
父子：父传子：props； 子传父：子调用父组件中的函数并传参；
兄弟：利用redux实现。
31什么是HOC（高阶组件）？
js里的高阶函数的定义是接收一个函数作为参数，并返回一个函数。redux的connect就是一个高阶函数。
那react高阶组件就是指接收一个react组件作为入参，并返回一个新react组件的组件。
32.列出 Redux 的组件。
Action – 这是一个用来描述发生了什么事情的对象。
Reducer – 这是一个确定状态将如何变化的地方。
Store – 整个程序的状态/对象树保存在Store中。
View – 只显示 Store 提供的数据。
33. (在构造函数中)调用 super(props) 的目的是什么
在 super() 被调用之前，子类是不能使用 this 的，在 ES2015 中，子类必须在 constructor 中调用 super()。传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。
