1、虚拟DOM中key的作用：

        key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】的差异比较，比较规则如下：

2、key的对比规则：

        1、旧虚拟DOM中找到了与新虚拟DOM相同的key：

• 若虚拟DOM中内容没变，直接使用之前的真实DOM
• 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM

        2、旧虚拟DOM中未找到与新虚拟DOM相同的key

• 创建新的真实DOM，随后渲染到页面

3、用index作为key可能会引发的问题：

        1、若对数据进行：逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新 ===> 界面效果没问底，但效率低

        2、如果结构中还包含输入类的DOM：会产生错误DOM更新 ===> 界面有问题

4、开发中如何选择key？

        1、最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值

        2、如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的

5、Vue 组件中 data 为什么必须是函数？

        保证组件的独立性和可复用性，data是一个函数，组件实例化的时候将会调用这个函数，返回一个对象，计算机会给这个对象分配一个内存地址，你实例化几次，就分配几个内存地址，他们的地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不变。

6、vuex的State特性是？

        state属性是Vuex中用于存放组件之间共享的数据；也就是说，我们把一些组件之间共享的状态主要存放在state属性中；它采用的是单一状态树——用一个对象就包含了全部的应用层级状态。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

7、Vue声明组件的state是⽤data⽅法，那为什么data是通过⼀个function来返回⼀个对象，⽽不是直接写⼀个对象呢？
        从语法上说，如果不⽤function返回就会出现语法错误导致编译不通过。从原理上的话，⼤概就是组件可以被多次创建，如果不使⽤function就会使所有调⽤该组件的页⾯公⽤同⼀个数据域，这样就失去了组件的概念了

8、介绍一下Vue的响应式系统

        1、任何一个 Vue Component 都有一个与之对应的 Watcher 实例

        2、Vue 的 data 上的属性会被添加 getter 和 setter 属性

        3、当 Vue Component render 函数被执行的时候, data 上会被 触碰(touch), 即被读, getter 方法会被调用, 此时 Vue 会去记录此 Vue component 所依赖的所有 data。(这一过程被称为依赖收集)

        4、data 被改动时（主要是用户操作）, 即被写, setter 方法会被调用, 此时 Vue 会去通知所有依赖于此 data 的组件去调用他们的 render 函数进行更新

9、computed与watch的区别

• 1、computed擅长处理的场景：一个数据受多个数据影响；watch擅长处理的场景：一个数据影响多个数据。 
• 2、功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。
• 3、是否调用缓存：computed支持缓存，只有依赖数据发生改变,才会重新进行计算;而watch不支持缓存，数据变,直接会触发相应的操作。
• 4、是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。
• 5、computed不支持异步 ，当computed内有异步操作时无效，无法监听数据的变化;而watch支持异步。
• 6、computed默认第一次加载的时候就开始监听；watch默认第一次加载不做监听，如果需要第一次加载做监听，添加immediate属性，设置为true（immediate:true）

10、介绍一下Vue的生命周期

        每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。

• 将要创建 ===>调用beforeCreate函数
• 创建完毕 ===>调用created函数
• 将要挂载 ===>调用beforeMount函数
• 挂载完毕 ===>调用mounted函数
• 将要更新 ===>调用beforeUpdate函数
• 更新完毕 ===>调用updated函数
• 将要销毁 ===>调用beforeDestory函数
• 销毁完毕 ===>调用destroyed函数

11、vue生命周期的作用是什么?
Vue生命周期中有多个事件钩子，让我们在控制整个Vue实例过程时更容易形成好的逻辑。

12、第一次页面加载会触发哪几个钩子?
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
13、DOM 渲染在 哪个周期中就已经完成?
DOM 渲染在 mounted 中就已经完成了。

14、简单描述每个周期具体适合哪些场景

• beforecreate : 可以在这加个loading事件，在加载实例时触发
• created : 初始化完成时的事件写在这⾥，如在这结束loading事件，异步请求也适宜在这⾥调⽤
• mounted : 挂载元素，获取到DOM节点
• updated : 如果对数据统⼀处理，在这⾥写上相应函数
• beforeDestroy : 可以做⼀个确认停⽌事件的确认框
• nextTick : 更新数据后⽴即操作dom

15、组件之间是怎么通信的

组件之间通信主要分为三种：父子传参，子父传参，兄弟传参。

1. 父子传参：父组件通过自定义属性的方式传参，通过props属性给子组件传参，子组件通过props属性去接收参数。
2. 子父传参：子组件通过自定义事件的方式传参，通过$emit去进行传参。

16、Vue.cli中怎样使用自定义的组件？

1. 在 components 目录新建组件文件
2. 在需要用到的页面import中导入
3. 使用component注册
4. 在 template 视图中使用组件标签

17、Vue如何实现按需加载配合webpack设置

• webpack中提供了require.ensure( )来实现按需加载。以前引入路由是通过import这样的方式引入，改为const定义方式进行引入。
• 不进行页面按需加载引入方式 import home from ../../common/home.vue
• 进行页面按需加载的引入方式：const home = r =>require.ensure([],() =>require('../../common/home.vue)))

18、scss是什么？在Vue.cli中的安装使用步骤是？有哪几大特性？

css的预编译语言。

使用步骤：

• 第一步：先装css-loader、node-loader、sass-loader等加载器模块；
• 第二步：在build目录找到webpack.base.config.js，在extends属性中加一个拓展.scss；
• 第三步：在同一个文件，配置一个module属性；
• 第四步：然后在组件的style标签加上lang属性 ，例如：lang=”scss”；

特性:

• 可以用变量，例如（$变量名称=值）；

• 可以用混合器；

• 可以嵌套；

19、如何让 CSS 只在当前组件中起作用？

将当前组件的<style>修改为<style scoped>。

20、聊聊你对Vue.js的template编译的理解？

        简⽽⾔之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点）
详情步骤：
        ⾸先，通过compile编译器把template编译成AST语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是⽤以创建编译器的。另外compile还负责合并option。
        然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，⾥⾯有（标签名、⼦节点、⽂本等等） 

21、Vue 路由跳转的几种方式

• 第一种方式：router-link （声明式路由）
• 第二种方式：router.push(编程式路由)
• 第三种方式：this.$router.push() (函数里面调用)
• 第四种方式：this.$router.replace() (用法同上,push)
• 第五种方式：this.$router.go(n)

22、Vue的路由实现：hash模式和history模式

hash 模式 (默认)

• 工作原理: 监听网页的hash值变化 —> onhashchange事件, 获取location.hash
• 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
• 会给用户好像跳转了网页一样的感觉, 但是实际上没有跳转
• 主要用在单页面应用(SPA)

history 模式

• 工作原理: 主要利用 history.pushState() API 来改变URL, 而不刷新页面.
• 其实一共有五种模式可以实现改变URL, 而不刷新页面.
• 需要后台配置支持, 如果输入一个并不存在的url, 需要后端配置做 “兜底配置”, 不是粗暴的返回404, 而是返回首页

23、Vue与Angular以及React的区别？

基本概念

• Angular 是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用。
• React 是一个用于构建用户界面的 JavaScript 库
• Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

三者比较
        相同点

• 1.都是基于javascript/typescript的前端开发库，为前端开发提供高效、复用性高的开发方式
• 2.都有组件和模板的开发思想
• 3.各自的组件都有生命周期，不用的组件可以卸载，不占用资源
• 4.都支持指令，如样式、事件等的指令

        不同点

• 1.创始和发行不同：Angular是由googl提供支持的，初始发行于 2016年9月；React由Facebook维护，初始发行于 2013年3月；Vue是由前google人员创建，初始发行于2014年2月
• 2.应用类型不同：Angular支持开发native应用程序、SPA单页应用程序、混合应用程序和web应用程序；React支持开发SPA和移动应用程序；Vue支持开发高级SPA，开始支持native应用程序
• 3.模型不同：angular基于MVC（模型-视图-控制器）架构；react和vue是基于Virtual DOM（虚拟的文档对象模型）
• 4、数据流流向不同：Angular使用的是双向数据绑定，React用的是单数据流的，而Vue则支持两者。
• 5. 对微应用和微服务的支持不同：Angular使用的是TypeScript，因此它更适合于单页Web应用（single page web application，SPA），而非微服务。相反，React和Vue的灵活性更适合微应用和微服务的开发。
• 6. 对原生应用的支持不同： React Native为iOS和Android开发原生应用；Angular的NativeScript已被原生应用所采用，特别是Ionic框架已经被广泛地运用在制作混合应用等方面；Vue的Weex平台正在开发之中，尚无下一步使之成为全面跨平台的计划。
• 7. 框架和库：Angular 是一个框架而不是一个库，因为它提供了关于如何构建应用程序的强有力的约束，并且还提供了更多开箱即用的功能。React 和 Vue 是是一种库，可以和各种包搭配。
• 8. 组件之间传值方式不同：Angular 中直接的父子组件，父组件可以直接访问子组件的 public 属性和方法，也可以借助于@Input 和 @Output 进行通讯。没有直接关系的，借助于 Service 单例进行通讯；React 组件之间通过通过prop或者state来通信，不同组件之间还有Rex状态管理功能；Vue组件之间通信通过props ，以及Vuex状态管理来传值

24、vue-router中导航守卫有哪些？

        全局前置守卫、路由独享守卫、组件内守卫

25、 为什么使用Vue？

• 优点：轻量级的框架、双向数据绑定、组件化开发、单页面路由、学习成本低、虚拟dom、渐进式框架、数据和结构的分离、运行速度快、插件化
• 缺点：不支持ie8以下、社区没有angular和react丰富、缺乏高阶教程和文档、单页面应用不利用seo优化、首次加载时耗时多

26、说出至少 4 种 vue 指令和它的用法？

• v-if：判断是否隐藏；
• v-for：数据循环；
• v-bind:class：绑定一个属性；
• v-model：实现双向绑定；

27、v-if和v-show的区别

• v-if通过控制dom节点的方式，添加和删除元素，进而实现显示或隐藏元素，v-show通过设置dom元素的display来实现显示或隐藏的操作，并不会删除dom
• v-if隐藏会将组件销毁，显示时会将其内部的监听事件重建，v-show只是设置display，并不会阻止子组件内部的监听事件
• v-if有着更高的切换消耗，v-show有着更高的初始渲染消耗

28、为什么避免 v-if 和 v-for 一起用？

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

29、什么是 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 来统一管理。

30、vuex是什么？怎么使用？哪种功能场景使用它？

vue框架中状态管理。在main.js引入store注入。新建一个目录store 。场景有：单页应用中，组件之间的状态，音乐播放、登录状态、加入购物车等。

31、vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module。

32、vuex的State特性

• Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data。

• state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新。

• 通过mapState和mapGetters把全局 state 和 getters 映射到当前组件的 computed 计算属性中。

33、vuex的Getter特性

• getters 可以对State进行计算操作，它就是Store的计算属性。

• 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用。

• 如果一个状态只在一个组件内使用，可以不用getters。

34、vuex的Mutation特性

Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。

35、不用Vuex会带来什么问题？

• 可维护性会下降，想修改数据要维护三个地方；

• 可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；

• 增加耦合，大量的上传派发，会让耦合性大大增加，Vue用Component本意就是为了减少耦合，现在这么用，和组件化的初衷相背。

36、keep-alive 的作用是什么?

包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。

37、vue-loader 是什么？用途有哪些？

解析.vue文件的一个加载器。

用途：js 可以写es6、style样式可以scss或less、template可以加jade等。

38、如何获取dom
        在我们的vue项⽬中，难免会因为引⽤第三⽅库⽽需要操作DOM标签，vue为我们提供了ref属性。 ref 被⽤来给元素或⼦组件注册引⽤信息。引⽤信息将会注册在⽗组件的 $refs 对象上。如果在普通的 DOM 元素上使⽤，引⽤指向的就是 DOM 元素；如果⽤在⼦组件上，引⽤就指向组件实例

39、iframe的优缺点？

        iframe也称作嵌⼊式框架，嵌⼊式框架和框架⽹页类似，它可以把⼀个⽹页的框架和内容嵌⼊在现有的⽹页中。
        优点：

• 解决加载缓慢的第三⽅内容如图标和⼴告等的加载问题
• Security sandbox
• 并⾏加载脚本
• ⽅便制作导航栏

        缺点：

• iframe会阻塞主页⾯的Onload事件
• 即使内容为空，加载也需要时间
• 没有语意

40、请说出vue.cli项⽬中src⽬录每个⽂件夹和⽂件的⽤法？
        assets⽂件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是⼀个应⽤主组件；main.js是⼊⼝⽂件
41、vue常⽤的修饰符

• .stop:等统⼀JavaScript中的event.stopPropagation(),防⽌事件冒泡
• .prevent:等同于JavaScript中的event。preventDefault(),防⽌执⾏预设的⾏为(如果事件可取消，则取消该事件，⽽不停⽌事件的进⼀步
• 传播)；
• .capture:与事件冒泡的⽅向相反，事件捕获由外到内
• .self:只会触发⾃⼰范围内的事件，不包含⼦元素；
• .once:只会触发⼀次。

42、⾃定义指令（v-check、v-focus）的⽅法有哪些？它有哪些钩⼦函数？还有哪些钩⼦函数参数？

• 全局定义指令：在vue对象的directive⽅法⾥⾯有两个参数，⼀个是指令名称，另外⼀个是函数。组件内定义指令：directives
• 钩⼦函数：bind（绑定事件触发）、inserted(节点插⼊的时候触发)、update（组件内相关更新）
• 钩⼦函数参数：el、binding

43、vue的两个核⼼点
数据驱动，组件系统

• 数据驱动：ViewModel，保证数据和视图的⼀致性
• 组件系统：应⽤类UI可以看做全部是由组件树构成的

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

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

45、Vue-router跳转和location.href有什么区别
        使⽤location.href=/url 来跳转，简单⽅便，但是刷新了页⾯；使⽤history.pushState(/url),⽆刷新页⾯，静态跳转；引进router，然后使⽤router.push(/url)来跳转，使⽤了diff算法，实现了按需加载，减少了dom的消耗。其实使⽤router跳转和使⽤history.pushState()没什么差别，因为vue-router就是⽤了history.pushState(),尤其是在history模式下。
46、RouterLink在IE和Firefox中不起作⽤（路由不跳转）的问题
        ⽅法⼀
        只⽤a标签，不使⽤button标签
        ⽅法⼆
        使⽤button标签和Router.navigate⽅法
47、请说下封装 vue 组件的过程？
        ⾸先，组件可以提升整个项⽬的开发效率。能够把页⾯抽象成多个相对独⽴的模块，解决了我们传统项⽬开发：效率低、难维护、复⽤性等问题。
        然后，使⽤Vue.extend⽅法创建⼀个组件，然后使⽤Vue.component⽅法注册组件。⼦组件需要数据，可以在props中接受定义。⽽⼦组件修改好数据后，想把数据传递给⽗组件。可以采⽤emit⽅法。
48、params和query的区别
        ⽤法：query要⽤path来引⼊，params要⽤name来引⼊，接收参数都是类似的，分别是this. $router.query.name 和 this.$router.params.name。url地址显⽰：query更加类似于我们ajax中get传参，params则类似于post，说的再简单⼀点，前者在浏览器地址栏中显⽰参数，后者则不显⽰
        注意点：query刷新不会丢失query⾥⾯的数据params刷新会丢失params⾥⾯的数据
49、vue mock数据
        在项⽬中尝试了mockjs，mock数据，实现前后端分离开发。
        关于mockjs，官⽹描述的是

• 1.前后端分离
• 2.不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
• 3.数据类型丰富
• 4.通过随机数据，模拟各种场景。

        总结：在后端接⼝没有开发完成之前，前端可以⽤已有的接⼝⽂档，在真实的请求上拦截ajax，并根据mockjs的mock数据的规则，模拟真实接⼝返回的数据，并将随机的模拟数据返回参与相应的数据交互处理，这样真正实现了前后台的分离开发。
        与以往的⾃⼰模拟的假数据不同，mockjs可以带给我们的是：在后台接⼝未开发完成之前模拟数据，并返回，完成前台的交互；在后台数据完成之后，你所做的只是去掉mockjs：停⽌拦截真实的ajax，仅此⽽已。
50、vue初始化页⾯闪动问题
        使⽤vue开发时，在vue初始化之前，由于div是不会vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样，虽然⼀般情况下这个时间很短暂，但是我们还是有必要解决这个问题的。
        ⾸先：在css⾥加上[v-cloak]{display:none;}，如果没有彻底解决问题，则在根元素加上style=“display:none;” :style="{display:block}"
51、vue更新数组时触发视图更新的⽅法
push();pop();shift();unshift();splice();sort();reverse()
52、vue常⽤的UI组件库
Mint UI，element，VUX
53、mint-ui是什么？怎么使⽤？说出⾄少三个组件使⽤⽅法？
        基于vue的前端组件库。
        npm安装，然后import样式和js，vue.use（mintUi）全局引⼊。在单个组件局部引⼊：import {Toast} from ‘mint-ui’。

• 组件⼀：Toast(‘登录成功’)；
• 组件⼆：mint-header；
• 组件三：mint-swiper

54、Vue⾥⾯router-link在电脑上有⽤，在安卓上没反应怎么解决？
        Vue路由在Android机上有问题，babel问题，安装babel polypill插件解决
55、Vue2中注册在router-link上事件⽆效解决⽅法
        使⽤@click.native。原因：router-link会阻⽌click事件，.native指直接监听⼀个原⽣事件。