1.vue 中 key 值的作用
应用 key 来给每个节点做一个惟一标识
key 的作用次要是为了高效的更新虚构 DOM。另外 vue 中在应用雷同标签名元素的过渡切换时，也会应用到 key 属性，其目标也是为了让 vue 能够辨别它们，
否则 vue 只会替换其外部属性而不会触发过渡成果。
2.Vue 组件中 data 为什么必须是函数？
在 new Vue() 中，data 是能够作为一个对象进行操作的，然而在 component 中，data 只能以函数的模式存在，不能间接将对象赋值给它。
当 data 选项是一个函数的时候，每个实例能够保护一份被返回对象的独立的拷贝，这样各个实例中的 data 不会相互影响，是独立的。
3.vuex 的 State 个性是？
一、Vuex 就是一个仓库，仓库外面放了很多对象。其中 state 就是数据源寄存地，对应于与个别 Vue 对象外面的 data
二、state 外面寄存的数据是响应式的，Vue 组件从 store 中读取数据，若是 store 中的数据产生扭转，依赖这个数据的组件也会产生更新
三、它通过 mapState 把全局的 state 和 getters 映射到以后组件的 computed 计算属性中
4. 介绍一下 Vue 的响应式零碎
Vue 为 MVVM 框架，当数据模型 data 变动时，页面视图会失去响应更新，其原理对 data 的 getter/setter 办法进行拦挡（Object.defineProperty 或者 Proxy），利用公布订阅的设计模式，在 getter 办法中进行订阅，在 setter 办法中公布告诉，让所有订阅者实现响应。
在响应式零碎中，Vue 会为数据模型 data 的每一个属性新建一个订阅核心作为发布者，而监听器 watch、计算属性 computed、视图渲染 template/render 三个角色同时作为订阅者，对于监听器 watch，会间接订阅察看监听的属性，对于计算属性 computed 和视图渲染 template/render，如果外部执行获取了 data 的某个属性，就会执行该属性的 getter 办法，而后主动实现对该属性的订阅，当属性被批改时，就会执行该属性的 setter 办法，从而实现该属性的公布告诉，告诉所有订阅者进行更新。
5.computed 与 watch 的区别
计算属性 computed 和监听器 watch 都能够察看属性的变动从而做出响应，不同的是：
计算属性 computed 更多是作为缓存性能的观察者，它能够将一个或者多个 data 的属性进行简单的计算生成一个新的值，提供给渲染函数应用，当依赖的属性变动时，computed 不会立刻从新计算生成新的值，而是先标记为脏数据，当下次 computed 被获取时候，才会进行从新计算并返回。
而监听器 watch 并不具备缓存性，监听器 watch 提供一个监听函数，当监听的属性发生变化时，会立刻执行该函数。
6. 介绍一下 Vue 的生命周期
beforeCreate：是 new Vue()之后触发的第一个钩子，在以后阶段 data、methods、computed 以及 watch 上的数据和办法都不能被拜访。
created：在实例创立实现后产生，以后阶段曾经实现了数据观测，也就是能够应用数据，更改数据，在这里更改数据不会触发 updated 函数。能够做一些初始数据的获取，在以后阶段无奈与 Dom 进行交互，如果非要想，能够通过 vm.$nextTick 来拜访 Dom。
beforeMount：产生在挂载之前，在这之前 template 模板已导入渲染函数编译。而以后阶段虚构 Dom 曾经创立实现，行将开始渲染。在此时也能够对数据进行更改，不会触发 updated。
mounted：在挂载实现后产生，在以后阶段，实在的 Dom 挂载结束，数据实现双向绑定，能够拜访到 Dom 节点，应用 $refs 属性对 Dom 进行操作。
beforeUpdate：产生在更新之前，也就是响应式数据产生更新，虚构 dom 从新渲染之前被触发，你能够在以后阶段进行更改数据，不会造成重渲染。
updated：产生在更新实现之后，以后阶段组件 Dom 已实现更新。要留神的是防止在此期间更改数据，因为这可能会导致有限循环的更新。
beforeDestroy：产生在实例销毁之前，在以后阶段实例齐全能够被应用，咱们能够在这时进行善后收尾工作，比方革除计时器。
destroyed：产生在实例销毁之后，这个时候只剩下了 dom 空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也通通被销毁。
7. 为什么组件的 data 必须是一个函数
一个组件可能在很多中央应用，也就是会创立很多个实例，如果 data 是一个对象的话，对象是援用类型，一个实例批改了 data 会影响到其余实例，所以 data 必须应用函数，为每一个实例创立一个属于本人的 data，使其同一个组件的不同实例互不影响。
8. 组件之间是怎么通信的
父子组件通信
父组件 -> 子组件：prop
子组件 -> 父组件：$on/$emit
获取组件实例：应用 $parent/$children，$refs.xxx，获取到实例后间接获取属性数据或调用组件办法
兄弟组件通信
Event Bus：每一个 Vue 实例都是一个 Event Bus，都反对 $on/$emit，能够为兄弟组件的实例之间 new 一个 Vue 实例，作为 Event Bus 进行通信。
Vuex：将状态和办法提取到 Vuex，实现共享
跨级组件通信
应用 provide/inject
Event Bus：同兄弟组件 Event Bus 通信
Vuex：将状态和办法提取到 Vuex，实现共享
9.Vue 事件绑定原理说一下
每一个 Vue 实例都是一个 Event Bus，当子组件被创立的时候，父组件将事件传递给子组件，子组件初始化的时候是有 $on 办法将事件注册到外部，在须要的时候应用 $emit 触发函数，而对于原生 native 事件，应用 addEventListener 绑定到实在的 DOM 元素上。
10.vue 的长处是什么？
低耦合。视图（View）能够独立于 Model 变动和批改，一个 ViewModel 能够绑定到不同的 ”View” 上，当 View 变动的时候 Model 能够不变，当 Model 变动的时候 View 也能够不变。
可重用性。你能够把一些视图逻辑放在一个 ViewModel 外面，让很多 view 重用这段视图逻辑。
独立开发。开发人员能够专一于业务逻辑和数据的开发（ViewModel），设计人员能够专一于页面设计。
可测试。界面素来是比拟难于测试的，而当初测试能够针对 ViewModel 来写
11.Vue 与 Angular 以及 React 的区别？
1. 与 AngularJS 的区别
相同点：
都反对指令：内置指令和自定义指令。
都反对过滤器：内置过滤器和自定义过滤器。
都反对双向数据绑定。
都不反对低端浏览器。
不同点：
1.AngularJS 的学习老本高，比方减少了 Dependency Injection 个性，而 Vue.js 自身提供的 API 都比较简单、直观。
2. 在性能上，AngularJS 依赖对数据做脏查看，所以 Watcher 越多越慢。
Vue.js 应用基于依赖追踪的察看并且应用异步队列更新。所有的数据都是独立触发的。对于宏大的利用来说，这个优化差别还是比拟显著的。
2. 与 React 的区别
相同点：
1.React 采纳非凡的 JSX 语法，Vue.js 在组件开发中也推崇编写.vue 非凡文件格式，对文件内容都有一些约定，两者都须要编译后应用。
2. 中心思想雷同：一切都是组件，组件实例之间能够嵌套。
3. 都提供正当的钩子函数，能够让开发者定制化地去解决需要。
4. 都不内置 AJAX，Route 等性能到外围包，而是以插件的形式加载。5. 在组件开发中都反对 mixins 的个性。
不同点：
React 依赖 Virtual DOM, 而 Vue.js 应用的是 DOM 模板。React 采纳的 Virtual DOM 会对渲染进去的后果做脏查看。
Vue.js 在模板中提供了指令，过滤器等，能够十分不便，快捷地操作 DOM。
12. 什么是 vue 的计算属性？
在模板中放入太多的逻辑会让模板过重且难以保护，在须要对数据进行简单解决，且可能屡次应用的状况下，尽量采取计算属性的形式。益处：①使得数据处理构造清晰；②依赖于数据，数据更新，处理结果自动更新；③计算属性外部 this 指向 vm 实例；④在 template 调用时，间接写计算属性名即可；⑤罕用的是 getter 办法，获取数据，也能够应用 set 办法扭转数据；⑥相较于 methods，不论依赖的数据变不变，methods 都会从新计算，然而依赖数据不变的时候 computed 从缓存中获取，不会从新计算。
13.vue 等单页面利用（spa）及其优缺点
长处：Vue 的指标是通过尽可能简略的 API 实现响应的数据绑定和组合的视图组件，外围是一个响应的数据绑定零碎。MVVM、数据驱动、组件化、轻量、简洁、高效、疾速、模块敌对；即第一次就将所有的货色都加载实现，因而，不会导致页面卡顿。
毛病：不反对低版本的浏览器，最低只反对到 IE9；不利于 SEO 的优化（如果要反对 SEO，倡议通过服务端来进行渲染组件）；第一次加载首页耗时绝对长一些；不能够应用浏览器的导航按钮须要自行实现后退、后退。
14.active-class 是哪个组件的属性？嵌套路由怎么定义？
vue-router 模块的 router-link 组件的属性。
嵌套路由：
嵌套路由顾名思义就是路由的多层嵌套。
重构 router/index.js 的路由配置，须要应用 children 数组来定义子路由，路由定义：
{
path: '/me',
name: 'Me',
component: Me,
children: [
{
path: 'collection',
name: 'Collection',
component: Collection
},
{
path: 'trace',
name: 'Trace',
component: Trace
}
]
}以“/”结尾的嵌套门路会被当作根门路，所以子路由上不必加“/”;
在生成路由时，主路由上的 path 会被主动增加到子路由之前，所以子路由上的 path 不必在从新申明主路由上的 path 了。
在外层路由组件中，如下写法。
<template>
<div class="me">
<div class="tabs">
<ul>
<!--<router-link :to="{name:'Default'}" tag="li" exact> 默认内容 </router-link>-->
<router-link :to="{name:'Collection'}" tag="li" > 我的珍藏 </router-link>
<router-link :to="{name:'Trace'}" tag="li"> 我的脚印 </router-link>
</ul>
</div>
<div class="content">
<router-view></router-view>
</div>
</div>
</template>因为篇幅无限，只能分享局部面试题，更多面试题及答案能够【点击我】浏览下载哦~ 无偿分享给大家，算是一个感恩回馈吧
15.pwa 是什么？
渐进式网页利用，PWA 应该具备一下个性：
渐进式：能确保每个用户都能关上网页响应式：PC，手机，平板，不论哪种格局，网页格局都能完满适配
2. 离线利用：反对用户在没网的条件下也能关上网页，这里就须要 Service Worker 的帮忙
3.APP 化：可能像 APP 一样和用户进行交互
4. 常更新：一旦 Web 网页有什么改变，都能立刻在用户端体现进去
5. 平安：平安第一，给本人的网站加上一把绿锁–HTTPS
6. 可搜寻：可能被引擎搜寻到
7. 推送：做到在不关上网页的前提下，推送新的音讯
8. 可装置：可能将 Web 想 APP 一样增加到桌面
9. 可跳转：只有通过一个连贯就能够跳转到你的 Web 页面
16.slot 是什么？有什么作用？原理是什么？
slot 又名插槽，是 Vue 的内容散发机制，组件外部的模板引擎应用 slot 元素作为承载散发内容的进口。插槽 slot 是子组件的一个模板标签元素，而这一个标签元素是否显示，以及怎么显示是由父组件决定的。
slot 又分三类，默认插槽，具名插槽和作用域插槽。
默认插槽：又名匿名查抄，当 slot 没有指定 name 属性值的时候一个默认显示插槽，一个组件内只有有一个匿名插槽。
具名插槽：带有具体名字的插槽，也就是带有 name 属性的 slot，一个组件能够呈现多个具名插槽。
作用域插槽：默认插槽、具名插槽的一个变体，能够是匿名插槽，也能够是具名插槽，该插槽的不同点是在子组件渲染作用域插槽时，能够将子组件外部的数据传递给父组件，让父组件依据子组件的传递过去的数据决定如何渲染该插槽。
实现原理：当子组件 vm 实例化时，获取到父组件传入的 slot 标签的内容，寄存在 vm.$slot 中，默认插槽为 vm.$slot.default，具名插槽为 vm.$slot.xxx，xxx 为插槽名，当组件执行渲染函数时候，遇到 slot 标签，应用 $slot 中的内容进行替换，此时能够为插槽传递数据，若存在数据，则可称该插槽为作用域插槽。
17.Vue 模板渲染的原理是什么？
vue 中的模板 template 无奈被浏览器解析并渲染，因为这不属于浏览器的规范，不是正确的 HTML 语法，所有须要将 template 转化成一个 JavaScript 函数，这样浏览器就能够执行这一个函数并渲染出对应的 HTML 元素，就能够让视图跑起来了，这一个转化的过程，就成为模板编译。
模板编译又分三个阶段，解析 parse，优化 optimize，生成 generate，最终生成可执行函数 render。
parse 阶段：应用大量的正则表达式对 template 字符串进行解析，将标签、指令、属性等转化为形象语法树 AST。
optimize 阶段：遍历 AST，找到其中的一些动态节点并进行标记，不便在页面重渲染的时候进行 diff 比拟时，间接跳过这一些动态节点，优化 runtime 的性能。
generate 阶段：将最终的 AST 转化为 render 函数字符串。
18.template 预编译是什么？
对于 Vue 组件来说，模板编译只会在组件实例化的时候编译一次，生成渲染函数之后在也不会进行编译。因而，编译对组件的 runtime 是一种性能损耗。
而模板编译的目标仅仅是将 template 转化为 render function，这个过程，正好能够在我的项目构建的过程中实现，这样能够让理论组件在 runtime 时间接跳过模板渲染，进而晋升性能，这个在我的项目构建的编译 template 的过程，就是预编译。
19. 那 template 和 jsx 的有什么别离？
对于 runtime 来说，只须要保障组件存在 render 函数即可，而咱们有了预编译之后，咱们只须要保障构建过程中生成 render 函数就能够。
在 webpack 中，咱们应用 vue-loader 编译.vue 文件，外部依赖的 vue-template-compiler 模块，在 webpack 构建过程中，将 template 预编译成 render 函数。
与 react 相似，在增加了 jsx 的语法糖解析器 babel-plugin-transform-vue-jsx 之后，就能够间接手写 render 函数。
所以，template 和 jsx 的都是 render 的一种表现形式，不同的是：
JSX 绝对于 template 而言，具备更高的灵活性，在简单的组件中，更具备劣势，而 template 尽管显得有些僵滞。然而 template 在代码构造上更合乎视图与逻辑拆散的习惯，更简略、更直观、更好保护。
20. 说一下什么是 Virtual DOM
Virtual DOM 是 DOM 节点在 JavaScript 中的一种形象数据结构，之所以须要虚构 DOM，是因为浏览器中操作 DOM 的代价比拟低廉，频繁操作 DOM 会产生性能问题。虚构 DOM 的作用是在每一次响应式数据发生变化引起页面重渲染时，Vue 比照更新前后的虚构 DOM，匹配找出尽可能少的须要更新的实在 DOM，从而达到晋升性能的目标。
21. 介绍一下 Vue 中的 Diff 算法
在新老虚构 DOM 比照时
首先，比照节点自身，判断是否为同一节点，如果不为雷同节点，则删除该节点从新创立节点进行替换
如果为雷同节点，进行 patchVnode，判断如何对该节点的子节点进行解决，先判断一方有子节点一方没有子节点的状况 (如果新的 children 没有子节点，将旧的子节点移除)
比拟如果都有子节点，则进行 updateChildren，判断如何对这些新老节点的子节点进行操作（diff 外围）。
匹配时，找到雷同的子节点，递归比拟子节点
在 diff 中，只对同层的子节点进行比拟，放弃跨级的节点比拟，使得工夫简单从 O(n^3)升高值 O(n)，也就是说，只有当新旧 children 都为多个子节点时才须要用外围的 Diff 算法进行同层级比拟。
22.key 属性的作用是什么
在对节点进行 diff 的过程中，判断是否为雷同节点的一个很重要的条件是 key 是否相等，如果是雷同节点，则会尽可能的复用原有的 DOM 节点。所以 key 属性是提供给框架在 diff 的时候应用的，而非开发者。
23. 说说 Vue2.0 和 Vue3.0 有什么区别
重构响应式零碎，应用 Proxy 替换 Object.defineProperty，应用 Proxy 劣势：
可间接监听数组类型的数据变动
监听的指标为对象自身，不须要像 Object.defineProperty 一样遍历每个属性，有肯定的性能晋升
可拦挡 apply、ownKeys、has 等 13 种办法，而 Object.defineProperty 不行
间接实现对象属性的新增 / 删除
新增 Composition API，更好的逻辑复用和代码组织
重构 Virtual DOM
模板编译时的优化，将一些动态节点编译成常量
slot 优化，将 slot 编译为 lazy 函数，将 slot 的渲染的决定权交给子组件
模板中内联事件的提取并重用（本来每次渲染都从新生成内联函数）
代码结构调整，更便于 Tree shaking，使得体积更小
应用 Typescript 替换 Flow
24. 为什么要新增 Composition API，它能解决什么问题
Vue2.0 中，随着性能的减少，组件变得越来越简单，越来越难保护，而难以保护的根本原因是 Vue 的 API 设计迫使开发者应用 watch，computed，methods 选项组织代码，而不是理论的业务逻辑。
另外 Vue2.0 短少一种较为简洁的低成本的机制来实现逻辑复用，尽管能够 minxis 实现逻辑复用，然而当 mixin 变多的时候，会使得难以找到对应的 data、computed 或者 method 来源于哪个 mixin，使得类型推断难以进行。
所以 Composition API 的呈现，次要是也是为了解决 Option API 带来的问题，第一个是代码组织问题，Compostion API 能够让开发者依据业务逻辑组织本人的代码，让代码具备更好的可读性和可扩展性，也就是说当下一个开发者接触这一段不是他本人写的代码时，他能够更好的利用代码的组织反推出理论的业务逻辑，或者依据业务逻辑更好的了解代码。
第二个是实现代码的逻辑提取与复用，当然 mixin 也能够实现逻辑提取与复用，然而像后面所说的，多个 mixin 作用在同一个组件时，很难看出 property 是来源于哪个 mixin，起源不分明，另外，多个 mixin 的 property 存在变量命名抵触的危险。而 Composition API 刚好解决了这两个问题。
25. 都说 Composition API 与 React Hook 很像，说说区别
从 React Hook 的实现角度看，React Hook 是依据 useState 调用的程序来确定下一次重渲染时的 state 是来源于哪个 useState，所以呈现了以下限度
不能在循环、条件、嵌套函数中调用 Hook
必须确保总是在你的 React 函数的顶层调用 Hook
useEffect、useMemo 等函数必须手动确定依赖关系
而 Composition API 是基于 Vue 的响应式零碎实现的，与 React Hook 的相比
申明在 setup 函数内，一次组件实例化只调用一次 setup，而 React Hook 每次重渲染都须要调用 Hook，使得 React 的 GC 比 Vue 更有压力，性能也绝对于 Vue 来说也较慢
Compositon API 的调用不须要顾虑调用程序，也能够在循环、条件、嵌套函数中应用
响应式零碎主动实现了依赖收集，进而组件的局部的性能优化由 Vue 外部本人实现，而 React Hook 须要手动传入依赖，而且必须必须保障依赖的程序，让 useEffect、useMemo 等函数正确的捕捉依赖变量，否则会因为依赖不正确使得组件性能降落。
尽管 Compositon API 看起来比 React Hook 好用，然而其设计思维也是借鉴 React Hook 的。
26.SSR 有理解吗？原理是什么？
在客户端申请服务器的时候，服务器到数据库中获取到相干的数据，并且在服务器外部将 Vue 组件渲染成 HTML，并且将数据、HTML 一并返回给客户端，这个在服务器将数据和组件转化为 HTML 的过程，叫做服务端渲染 SSR。
而当客户端拿到服务器渲染的 HTML 和数据之后，因为数据曾经有了，客户端不须要再一次申请数据，而只须要将数据同步到组件或者 Vuex 外部即可。除了数据意外，HTML 也构造曾经有了，客户端在渲染组件的时候，也只须要将 HTML 的 DOM 节点映射到 Virtual DOM 即可，不须要从新创立 DOM 节点，这个将数据和 HTML 同步的过程，又叫做客户端激活。
应用 SSR 的益处：
有利于 SEO：其实就是有利于爬虫来爬你的页面，因为局部页面爬虫是不反对执行 JavaScript 的，这种不反对执行 JavaScript 的爬虫抓取到的非 SSR 的页面会是一个空的 HTML 页面，而有了 SSR 当前，这些爬虫就能够获取到残缺的 HTML 构造的数据，进而收录到搜索引擎中。
白屏工夫更短：绝对于客户端渲染，服务端渲染在浏览器申请 URL 之后曾经失去了一个带有数据的 HTML 文本，浏览器只须要解析 HTML，间接构建 DOM 树就能够。而客户端渲染，须要先失去一个空的 HTML 页面，这个时候页面曾经进入白屏，之后还须要通过加载并执行 JavaScript、申请后端服务器获取数据、JavaScript 渲染页面几个过程才能够看到最初的页面。特地是在简单利用中，因为须要加载 JavaScript 脚本，越是简单的利用，须要加载的 JavaScript 脚本就越多、越大，这会导致利用的首屏加载工夫十分长，进而升高了体验感。
因为篇幅无限，只能分享局部面试题，更多面试题及答案能够【点击我】浏览下载哦~ 无偿分享给大家，算是一个感恩回馈吧
27.ajax 和 axios、fetch 的区别？
ajax
传统 Ajax 指的是 XMLHttpRequest（XHR），最早呈现的发送后端申请技术，隶属于原始 js 中，外围应用 XMLHttpRequest 对象，多个申请之间如果有先后关系的话，就会呈现回调天堂。
juery.ajax
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function () {},
error: function () {}
});JQuery ajax 是对原生 XHR 的封装，除此以外还削减了对 JSONP 的反对, 举出几个毛病
自身是针对 MVC 的编程, 不合乎当初前端 MVVM 的浪潮
基于原生的 XHR 开发，XHR 自身的架构不清晰。
JQuery 整个我的项目太大，单纯应用 ajax 却要引入整个 JQuery 十分的不合理（采取个性化打包的计划又不能享受 CDN 服务）
不合乎关注拆散（Separation of Concerns）的准则
配置和调用形式十分凌乱，而且基于事件的异步模型不敌对
axios
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
.then(function (response) {console.log(response);
})
.catch(function (error) {console.log(error);
});axios 是一个基于 Promise 用于浏览器和 nodejs 的 HTTP 客户端，实质上也是对原生 XHR 的封装，只不过它是 Promise 的实现版本，合乎最新的 ES 标准，它自身具备以下特色：
1. 从浏览器中创立 XMLHttpRequest
2. 反对 Promise API
3. 客户端反对避免 CSRF
4. 提供了一些并发申请的接口（重要，不便了很多的操作）
5. 从 node.js 创立 http 申请
6. 拦挡申请和响应
7. 转换申请和响应数据
8. 勾销申请
9. 主动转换 JSON 数据
fetch
try {let response = await fetch(url);
let data = response.json();
console.log(data);
} catch(e) {console.log("Oops, error", e);
}fetch 号称是 AJAX 的替代品，是在 ES6 呈现的，应用了 ES6 中的 promise 对象。Fetch 是基于 promise 设计的。Fetch 的代码构造比起 ajax 简略多了，参数有点像 jQuery ajax。然而，肯定记住 fetch 不是 ajax 的进一步封装，而是原生 js，没有应用 XMLHttpRequest 对象。
fetch 的长处：
1. 合乎关注拆散，没有将输出、输入和用事件来跟踪的状态混淆在一个对象里
2. 更好更不便的写法
3. 语法简洁，更加语义化
基于规范 Promise 实现，反对 async/await
同构不便，应用 isomorphic-fetch
4. 更加底层，提供的 API 丰盛（request, response）
5. 脱离了 XHR，是 ES 标准里新的实现形式
28. 说下对 Virtual DOM 算法的了解
包含几个步骤：
1、用 JavaScript 对象构造示意 DOM 树的构造，而后用这个树构建一个真正的 DOM 树，插到文档当中；
2、当状态变更的时候，从新结构一棵新的对象树，而后用新的树和旧的树进行比拟，记录两棵树差别；
3、把 2 所记录的差别利用到步骤 1 所构建的真正的 DOM 树上，视图就更新了。
Virtual DOM 实质上就是在 JS 和 DOM 之间做了一个缓存。能够类比 CPU 和硬盘，既然硬盘这么慢，咱们就在它们之间加个缓存：既然 DOM 这么慢，咱们就在它们 JS 和 DOM 之间加个缓存。CPU（JS）只操作内存（Virtual DOM），最初的时候再把变更写入硬盘（DOM）。
29. 解释单向数据流和双向数据绑定
单向数据流：顾名思义，数据流是单向的。数据流动方向能够跟踪，流动繁多，追究问题的时候能够更快捷。毛病就是写起来不太不便。要使 UI 产生变更就必须创立各种 action 来保护对应的 state。
双向数据绑定：数据之间是相通的，将数据变更的操作暗藏在框架外部。长处是在表单交互较多的场景下，会简化大量与业务无关的代码。毛病就是无奈追踪部分状态的变动，减少了出错时 debug 的难度。
30.Vue 如何去除 URL 中的
vue-router 默认应用 hash 模式，所以在路由加载的时候，我的项目中的 URL 会自带“#”。如果不想应用“#”，能够应用 vue-router 的另一种模式 history：new Router ({mode : ‘history’, routes: []})
须要留神的是，当咱们启用 history 模式的时候，因为咱们的我的项目是一个单页面利用，所以在路由跳转的时候，就会呈现拜访不到动态资源而呈现“404”的状况，这时候就须要服务端减少一个笼罩所有状况的候选资源：如果 URL 匹配不到任何动态资源，则应该返回同一个“index.html”页面。