前言

要换工作了，刷点面试题。

vue

1. vue渲染模板时怎么保留模板中的HTML注释呢？

` `

2. Vue.observable你有了解过吗？说说看

随着组件的细化，就会遇到多组件状态共享的情况， Vuex当然可以解决这类问题，不过就像 Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是 vue.js 2.6 新增加的 Observable API ，通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。

参考

官网Api

3. 你知道style加scoped属性的用途和原理吗？

用途：防止全局同名CSS污染

原理：在标签加上v-data-属性，再在选择器时加上对应[v-data-]即完成独立CSS类名选择

4. 你期待vue3.0有什么功能或者改进的地方？

ts支持,
更易用,
源码更易读,

5. vue边界情况有哪些？

组件递归
组件之间相互引用，A用B，B又用了A

6. 如何在子组件中访问父组件的实例

this.$parent拿到父组件实例
this.$children拿到子组件实例（数组）

7. watch的属性用箭头函数定义结果会怎么样？

** this是undefined，要更改的属性会报TypeError错误, Cannot read property ‘xxx’ of undefined **

8. 在vue项目中如果methods的方法用箭头函数定义结果会怎么样？

this为undefined

9.在vue项目中如何配置favicon？

html模版加入meta标签，引入favicon
也可以在当前项目部署的端口主目录下存放favicon.ico文件，默认就会显示该图标

10. 你有使用过babel-polyfill模块吗？主要是用来做什么的？

ES6的转码。IE的兼容

11. 说说你对vue的错误处理的了解？

全局 Vue.config.errorHandler 如果在组件渲染时出现运行错误，错误将会被传递至全局 Vue.config.errorHandler 配置函数 (如果已设置)。利用这个钩子函数来配合错误跟踪服务是个不错的主意。比如 Sentry，它为 Vue 提供了官方集成。
errorCaptured vueJS 详细 2.5.0+ 新增

类型：(err: Error, vm: Component, info: string) => ?boolean

详细：

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传

12.在vue事件中传入$event，使用e.target和e.currentTarget有什么区别？

currentTarget 始终是监听事件者，而 target 是事件的真正发出者

13.在.vue文件中style是必须的吗？那script是必须的吗？为什么？

即在.vue文件中，我们可以没有style，但是必须要有script来利用 exports default 来导出模块，否则就会出错。

14. vue怎么实现强制刷新组件？

** 强制重新渲染**

this.$forceUpdate()

** 强制重新刷新某组件 **

` //模版上绑定key <SomeComponent :key=”theKey”/> //选项里绑定data data(){ return{ theKey:0 } } //刷新key达到刷新组件的目的 theKey++; `

15.vue自定义事件中父组件怎么接收子组件的多个参数？

传递一个对象出去或者多参数

16.实际工作中，你总结的vue最佳实践有哪些？

存一份 defaultData 方便直接初始化，特别是带表单的弹窗也写在一起没有生命周期的时候。

17.vue给组件绑定自定义事件无效怎么解决？

18. vue的属性名称与method的方法名称一样时会发生什么问题？

报错，语法错误

19.vue变量名如果以_、$开头的属性会发生什么问题？怎么访问到它们的值？

以 _ 或 $ 开头**的属性不会被 Vue 实例代理，因为可能和 Vue 内置的属性、API 方法冲突。可以使用例如 **vm.$data._property

20.vue使用v-for遍历对象时，是按什么顺序遍历的？如何保证顺序？

在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。

21.vue如果想扩展某个现有的组件时，怎么做呢？

不对原组件进行更改的：

    使用Vue.extend直接扩展
    
    使用Vue.mixin全局混入
    
    slot插槽
    
    HOC封装 #### 22.说下$attrs和$listeners的使用场景

一次性绑定多个prop或者事件，在创建高级别的组件时非常有用。

$attrs

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

vm.$listeners

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

23. 分析下vue项目本地开发完成后部署到服务器后报404是什么原因呢？

1.检查nginx配置，是否正确设置了资源映射条件；

2.检查vue.config.js中是否配置了publicPath，若有则检查是否和项目资源文件在服务器摆放位置一致

24.v-once的使用场景有哪些？

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

渲染普通的 HTML 元素在 Vue 中是非常快速的，但有的时候你可能有一个组件，这个组件包含了大量静态内容。在这种情况下，你可以在根元素上添加 v-once 特性以确保这些内容只计算一次然后缓存起来，就像这样：

    Vue.component('terms-of-service', {
      template: `
        <div v-once>
          <h1>Terms of Service</h1>
          ... a lot of static content ...
        </div>
      `
    })

25.说说你对vue的表单修饰符.lazy的理解

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

 <!-- 在“change”时而非“input”时更新 -->
 <input v-model.lazy="msg" >

26.vue为什么要求组件模板只能有一个根元素？

总要有一个入口吧

27. EventBus注册在全局上时，路由切换时会重复触发事件，如何解决呢？

在组件内的beforeRouteLeave中移除事件监听

28.怎么修改vue打包后生成文件路径？

 webpack：output.path
 
 vue-cli3: outputDir

29.你有使用做过vue与原生app交互吗？说说vue与ap交互的方法

JSBridge

30.使用vue写一个tab切换

！不写

31.vue中什么是递归组件？举个例子说明下？

菜单-子菜单

32.怎么访问到子组件的实例或者子元素？

$children

33.在子组件中怎么访问到父组件的实例？

$parent

34.在组件中怎么访问到根实例？

 $root #### 35.说说你对Object.defineProperty的理解    ！！不说

36.vue组件里写的原生addEventListeners监听事件，要手动去销毁吗？为什么？

肯定要，一方面是绑定多次，另一方面是函数没释放会内存溢出

37. vue组件里的定时器要怎么销毁？

在生命周期的beforeDestroy或者destroyed进行手动销毁。当生命周期销毁后，并没有将组件中的计时器销毁，虽然页面上看不出来，但是如果在控制台打印的话，会发现计时器还在运行，所以要销毁计时器，避免代码一直执行

38.vue组件会在什么时候下被销毁？

v-if

39.使用vue渲染大量数据时应该怎么优化？说下你的思路！

Object.freeze 这算是一个性能优化的小技巧吧。在我们遇到一些 big data的业务场景，它就很有用了。尤其是做管理后台的时候，经常会有一些超大数据量的 table，或者一个含有 n 多数据的图表，这种数据量很大的东西使用起来最明显的感受就是卡。但其实很多时候其实这些数据其实并不需要响应式变化，这时候你就可以使用 Object.freeze 方法了，它可以冻结一个对象(注意它不并是 vue 特有的 api)。当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter，它们让 Vue 能进行追踪依赖，在属性被访问和修改时通知变化。使用了 Object.freeze 之后，不仅可以减少 observer 的开销，还能减少不少内存开销。相关 issue。

使用方式：this.item = Object.freeze(Object.assign({}, this.item))

40.在vue中使用this应该注意哪些问题？

？？？？

41.你有使用过JSX吗？说说你对JSX的理解

JSX

42.说说组件的命名规范

风格指南

Component

所有的Component文件都是以大写开头 (PascalCase)，这也是官方所推荐的。

但除了 index.vue。

例子：

 @/src/components/BackToTop/index.vue
 @/src/components/Charts/Line.vue
 @/src/views/example/components/Button.vue ##### JS 文件  所有的.js文件都遵循横线连接 (kebab-case)。

例子：

 @/src/utils/open-window.js
 @/src/views/svg-icons/require-icons.js
 @/src/components/MarkdownEditor/default-options.js ##### Views  在views文件下，代表路由的.vue文件都使用横线连接 (kebab-case)，代表路由的文件夹也是使用同样的规则。

例子：

 @/src/views/svg-icons/index.vue
 @/src/views/svg-icons/require-icons.js  使用横线连接 (kebab-case)来命名views主要是出于以下几个考虑。

横线连接 (kebab-case) 也是官方推荐的命名规范之一文档

views下的.vue文件代表的是一个路由，所以它需要和component进行区分(component 都是大写开头) 页面的url 也都是横线连接的，比如https://www.xxx.admin/export-excel，所以路由对应的view应该要保持统一没有大小写敏感问题

43.怎么配置使vue2.0+支持TypeScript写法？

不会，没弄过，不过应该就是一些loader

44.有什么用？

一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。

如果值以 # 开始，则它将被用作选择符，并使用匹配元素的 innerHTML 作为模板。常用的技巧是用

45.vue的is这个特性你有用过吗？主要用在哪些方面？

动态组件，当你多个组件需要通过 v-if 切换时，可以使用 is 来简化代码

46. vue的:class和:style有几种表示方式？

三元表达式，数组，对象，字符串

47.你了解什么是函数式组件吗？

函数式组件

之前创建的锚点标题组件是比较简单，没有管理任何状态，也没有监听任何传递给它的状态，也没有生命周期方法。实际上，它只是一个接受一些 prop 的函数。在这样的场景下，我们可以将组件标记为 functional，这意味它无状态 (没有响应式数据)，也没有实例 (没有 this 上下文)。一个函数式组件就像这样：

 ``
     Vue.component('my-component', {
       functional: true,
       // Props 是可选的
       props: {
         // ...
       },
       // 为了弥补缺少的实例
       // 提供第二个参数作为上下文
       render: function (createElement, context) {
         // ...
       }
     })
 ``

48.vue怎么改变插入模板的分隔符？

 new Vue({
   delimiters: ['${', '}']
 }) #### 49.组件中写name选项有什么作用？   如果用过devTool会有详细感受

如果你使用keep-alive, component等内置组件时

如果你使用循环组件时

50.说说你对provide和inject的理解

provide-inject

通过在父组件中inject一些数据然后再所有子组件中都可以通过provide获取使用该参数,

主要是为了解决一些循环组件比如tree, menu, list等, 传参困难, 并且难以管理的问题, 主要用于组件封装, 常见于一些ui组件库是子组件通过jnject注入了父组件用provide提供的变量

51.开发过程中有使用过devtools吗？

devtools很好用啊，看组件，参数，传值等，尤其是用的vuex的时候

52.说说你对slot的理解有多少？slot使用场景有哪些？

slot, 插槽, 在使用组件的时候, 在组建内部插入东西.

组件封装的时候最常使用到

53.你有使用过动态组件吗？说说你对它的理解

component, vue的内置组件, 说实话, 如果不是特殊场景不要去使用, 容易使人混乱

渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。

详见: vue component

54.prop验证的type类型有哪几种？

js中的数据类型 7种

55.prop是怎么做验证的？可以设置默认值吗？

validator, yes

56.怎么缓存当前打开的路由组件，缓存后想更新当前组件怎么办呢？

可以在路由meta中加入参数, 对打开的路由进行keep-alive的判断, 通过钩子active等

57.说说你对vue组件的设计原则的理解

第一: 容错处理, 这个要做好, 极端场景要考虑到, 不能我传错了一个参数你就原地爆炸

第二: 缺省值(默认值)要有, 一般把应用较多的设为缺省值

第三: 颗粒化, 把组件拆分出来.

第四: 一切皆可配置, 如有必要, 组件里面使用中文标点符号, 还是英文的标点符号, 都要考虑到

第五: 场景化, 如一个dialog弹出, 还需要根据不同的状态封装成success, waring, 等

第六: 有详细的文档/注释和变更历史, 能查到来龙去脉, 新版本加了什么功能是因为什么

第七: 组件名称, 参数prop, emit, 名称设计要通俗易懂, 最好能做到代码即注释这种程度

第八: 可拓展性, 前期可能不需要这个功能, 但是后期可能会用上, 要预留什么, 要注意什么, 心里要有逼数

第九: 规范化,我这个input组件, 叫on-change, 我另外一个select组件叫change, 信不信老子捶死你

第十: 分阶段: 不是什么都要一期开发完成看具体业务, 如果一个select, 我只是个简单的select功能, 什么multi老子这个版本压根不需要, 别TM瞎折腾! 给自己加戏

58.你了解vue的diff算法吗？

不了解！！！

59. vue如何优化首页的加载速度？

异步路由和异步加载还有分屏加载, 按需加载, 延时加载图片等, cdn, 域名才分

不要什么东西动不动就打包到vendor中

60.vue打包成最终的文件有哪些？

vendor.js, app.js, app.css, 1.xxx.js 2.xxx.js

如果有设置到单独提取css的话还有 1.xxx.css

61. ajax、fetch、axios这三都有什么区别？

ajax, 实际上就是xmlHttpRequest, 旧瓶装新酒的一种新应用的称呼

fetch是浏览器提供的webAPI 原理是基于xmlHttpRequest的封装

axios是基于ajax的再次封装返回的也是Promise

62.vue能监听到数组变化的方法有哪些？为什么这些方法能监听到呢？

push() pop() shift() unshift() splice() sort() reverse()

63.vue中是如何使用event对象的？

@click='handleClick($events)'

64.vue首页白屏是什么问题引起的？如何解决呢？

打包后的dist目录下的文件引用路径不对，会因找不到文件而报错导致白屏。

assetsPublicPath默认的是 ‘/’ 也就是根目录。而我们的index.html和static在同一级目录下面。所以要改为 ‘./ ’;
由于把路由模式mode设置成history了，默认是hash。

解决方法：路由里边router/index.js路由配置里边默认模式是hash，如果你改成了history模式的话，打开也会是一片空白。所以改为hash或者直接把模式配置删除，让它默认的就行。如果非要使用history模式的话，需要你在服务端加一个覆盖所有的情况的候选资源：如果URL匹配不到任何静态资源，则应该返回一个index.html,这个页面就是你app依赖页面。所以只要删除mode或者把mode改成hash就OK了。 3.第三种：在项目中使用了es6的语法，一些浏览器不支持es6，造成编译错误不能解析而造成白屏

`` 解决方法：1. 安装 npm install –save-dev babel-preset-es2015
2. 安装 npm install –save-dev babel-preset-stage-3

``

65.说说你对单向数据流和双向数据流的理解

简单的单向数据流（unidirectional data flow）是指用户访问View，View发出用户交互的Action，在Action里对state进行相应更新。state更新后会触发View更新页面的过程。这样数据总是清晰的单向进行流动，便于维护并且可以预测。

双向数据绑定，带来双向数据流。数据（state）和视图（View）之间的双向绑定。 vue 里的 v-model。

说到底就是（value 的单向绑定 + onChange 事件侦听）的一个语法糖，你如果不想用 v-model，像 React 那样处理也是完全可以的。

66.移动端ui你用的是哪个ui库？有遇到过什么问题吗？

没遇到过

67. 你知道nextTick的原理吗？

Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MutationObserver，如果执行环境不支持，会采用 setTimeout(fn, 0) 代替。

68.说说你对v-clock和v-pre指令的理解

v-pre 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

不需要表达式

用法：

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

示例：

<span v-pre></span>

v-cloak 不需要表达式

用法：

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

示例：

[v-cloak] {
  display: none;
}
<div v-cloak>
  
</div> 不会显示，直到编译结束。

69.写出你知道的表单修饰符和事件修饰符

events

.lazy .trim .number 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">
这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

.stop .prevent .capture .self .once .passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

70.说说你对proxy的理解

Proxy 用于修改某些操作的默认行为,可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。换句话说就是——Proxy对象就是可以让你去对JavaScript中的一切合法对象的基本操作进行自定义，然后用你自定义的操作去覆盖其对象的基本操作。说白了就是重写其其所属类或构造函数中的基本操作。

71. 你有自己用vue写过UI组件库吗？

没有

72.用vue怎么实现一个换肤的功能？

less,scss 定义好主题样式，打包编译引入CSS
正则替换css文件样式
不同的css文件饿了么换肤
73. 有在vue中使用过echarts吗？踩过哪些坑？如何解决的？

在切换tab时第二个tab的图表无法正常显示切换tab时使用方法@tab-click=”handleClick”加载图表的render函数

74. 如果让你教一个2-3年经验前端经验的同事使用vue，你该怎么教？

看文档，写demo，看项目

75. vue性能的优化的方法有哪些？

1、v-show，v-if 用哪个？

　　在我来看要分两个维度去思考问题：

　　第一个维度是权限问题，只要涉及到权限相关的展示无疑要用 v-if，

　　第二个维度在没有权限限制下根据用户点击的频次选择，频繁切换的使用 v-show，不频繁切换的使用 v-if，

　　这里要说的优化点在于减少页面中 dom 总数，我比较倾向于使用 v-if，因为减少了 dom 数量，加快首屏渲染，至于性能方面我感觉肉眼看不出来切换的渲染过程，也不会影响用户的体验。

2、不要在模板里面写过多的表达式与判断

　　v-if=”isShow && isAdmin && (a

b)”，这种表达式虽说可以识别，但是不是长久之计，当看着不舒服时，

　　适当的写到 methods 和 computed 里面封装成一个方法，这样的好处是方便我们在多处判断相同的表达式，其他权限相同的元素再判断展示的时候调用同一个方法即可。

3、循环调用子组件时添加 key

　　key 可以唯一标识一个循环个体，可以使用例如 item.id 作为 key，

　　假如数组数据是这样的 [‘a’ , ‘b’, ‘c’, ‘a’],使用 :key=”item” 显然没有意义，更好的办法就是在循环的时候 (item, index) in arr，然后 :key=”index”来确保 key 的唯一性

　　当 Vue.js 用v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。这个特殊的属性相当于 Vue 1.x 的 track-by ，但它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值 (在这里使用简写)：

4、对路由组件进行懒加载

　　这里的懒加载是指在访问到对应的组件时才加载它，首屏的时候不加载。这里实现的方法很简单，只要将以前直接import组件的方式改为：

　　 const Login = () => import(‘@/pages/Login’);即可。

76.SSR解决了什么问题？有做过SSR吗？你是怎么做的？

SSR服务端渲染，解决SEO问题，用next吧，最佳实践

77.说说你觉得认为的vue开发规范有哪些？

基于组件化开发理解

组件命名规范

结构化规范

注释规范

编码规范

78.vue部署上线前需要做哪些准备工作？

打包文件，选好路由模式

79.vue过渡动画实现的方式有哪些？

使用vue的transition标签结合css样式完成动画
利用animate.css结合transition实现动画
利用 vue中的钩子函数实现动画

80.vue在created和mounted这两个生命周期中请求数据有什么区别呢？

$el 未挂载

81.vue父子组件双向绑定的方法有哪些？

emit v-model

82.vue怎么获取DOM节点？

$el

83. vue项目有做过单元测试吗？

没有，but 有assert kara之类的库

84. vue项目有使用过npm run build –report吗？

实际上执行npm run build –report时，在process.env对象内添加了一个属性。如下： { npm_config_report: “true” } 复制代码所以我们可以通过process.env.npm_config_report获取它的值为true，由于webpack.prod.conf.js调用config/index.js中的bundleAnalyzerReport 所以会调用webpack-bundle-analyzer插件

85. 如何解决vue打包wendor过大的问题？

main.js 去掉 element-ui vueJS之类的包，通过静态引入

在build\webpack.base.conf.js中进行修改，在module.exports中添加如下内容：

    externals:{
      "element-ui":"ELEMENT",
      "vue":"Vue"
    },

2 . 路由懒加载

const Home = () => import('./views/Home.vue');
const MyInfo = () => import('./views/MyInfo.vue');

在.babelrc中

"plugins": ["@babel/plugin-syntax-dynamic-import"]

3.分离公共代码

webpack 4.x optimization与output同级

optimization: {
   runtimeChunk: {
     name: 'manifest'
   },
   splitChunks: {
     chunks: 'async',
     minChunks: 2,
     maxAsyncRequests: 5,
     maxInitialRequests: 3,
     name: false,
     cacheGroups: {
       vendor: {
         name: 'vendor',
         // chunks 有三个可选值，”initial”, “async” 和 “all”. 分别对应优化时只选择初始的chunks，所需要的chunks 还是所有chunk
         chunks: 'initial',
         priority: -10,
         reuseExistingChunk: false,
         test: /[\\/]node_modules[\\/]/
       }
     }
   }
 },

css懒加载 const MiniCssExtractPlugin = require("mini-css-extract-plugin");

该插件需要webpack 4.x //sass { test: /\.(sc|sa|c)ss$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader', ] },

plugins中：

``
    new MiniCssExtractPlugin({
          // Options similar to the same options in webpackOptions.output
          // both options are optional
          filename: devMode ? 'css/[name].css' : 'css/[name].[hash].css',
          chunkFilename: devMode ? 'css/[id].css' : 'css/[id].[hash].css',
        }),
`` 5. CDN引入 6. js压缩、css压缩

86. webpack打包vue速度太慢怎么办？

使用happyPack，多进程构建
把公共文件拆分到webpack的external里面去，没必要每次都去编译
开启tree-shaking和对进程压缩

87.vue在开发过程中要同时跟N个不同的后端人员联调接口（请求的url不一样）时你该怎么办？

代理

88. vue要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？

统一封装button，然后控制隐藏显示

89.说下你的vue项目的目录结构，如果是大型项目你该怎么划分结构和划分组件呢？

views ,components,就近，公用

90.在移动端使用vue，你觉得最佳实践有哪些？

vux

91.你们项目为什么会选vue而不选择其它的框架呢？

简单易学上手快

92.对于即将到来的vue3.0特性你有什么了解的吗？

参考-简书

性能提升

摇树优化，是一种在打包时去除没用到的代码的优化手段，谷歌有一篇教程可以了解下: Reduce JavaScript Payloads with Tree Shaking

Portal ，你可以将其理解为跨组件渲染或者异地渲染，vue-portal 是一个第三方实现，可以了解一下；Fragments 特性也有一个第三方库，但译者认为这个库的内部实现不够完善，叫做 vue-fragments，感兴趣可以了解
编译器相关的提升

如果采用的是支持“摇树优化”的打包器，模板中使用到的那些可选特性，在生成的代码中将通过 ES 的模块语法导入；而在打包后的文件中，那些没用到的可选特性就会被“摇掉”。

由于新的虚拟 DOM 实现所带来的提升，我们可以执行一些更加高效的编译耗时优化，如静态树提升(static tree hoisting)、静态属性提升(static props hoisting)；以及为运行时提供一些来自编译器的提示，以此避开子组件的规范过程 (children normalization)；提供 VNode 快速创建路径；等等。

我们计划对解析器进行重写，以便在对模板进行编译发生错误时，可以提供错误发生的位置信息；除此之外还可以带来对模板的 source map 支持；还可以支持第三方工具如 eslint-plugin-vue 和 IDE 的语言服务 (language services) 特性。

API 变动

一句话介绍：除渲染函数 API 和 scoped-slot 语法之外，其余均保持不变或者将通过另外构建一个兼容包来兼容 2.x。
代码重构

一句话介绍：更优良的内部模块解耦；TypeScript；更易于贡献的代码库。
重写虚拟 DOM (Virtual DOM Rewrite)

随着虚拟 DOM 重写，我们可以期待更多的编译时（compile-time）提示来减少运行时（runtime）开销。重写将包括更有效的代码来创建虚拟节点

优化插槽生成(Optimized Slots Generation)

在当前的 Vue 版本中，当父组件重新渲染时，其子组件也必须重新渲染（11 月 20 日更新：这句话是不严谨的，非常容易产生误导，我觉得有必要说明一下： 2.0 组件的重新渲染就是组件粒度的，除非修改的数据是子组件的 props，才会触发子组件的重新渲染。引用自：(https://juejin.im/pin/5bf28ddd6fb9a056783705fc）。使用 Vue 3 ，可以单独重新渲染父组件和子组件

7.静态树提升(Static Tree Hoisting)

使用静态树提升，这意味着 Vue 3 的编译器将能够检测到什么是静态组件，然后将其提升，从而降低了渲染成本。它将能够跳过未整个树结构打补丁的过程。

静态属性提升（Static Props Hoisting）

此外，我们可以期待静态属性提升，其中 Vue 3 将跳过不会改变节点的打补丁过程。

基于 Proxy 的观察者机制

目前，Vue 的反应系统是使用 Object.defineProperty 的 getter 和 setter。但是，Vue 3 将使用 ES2015 Proxy 作为其观察者机制。这消除了以前存在的警告，使速度加倍，并节省了一半的内存开销。

为了继续支持 IE11，Vue 3 将发布一个支持旧观察者机制和新 Proxy 版本的构建。

兼容 IE 11

一句话介绍：IE 11 将受到支持，但将会是另外构建一个版本 (build) 的形式支持，不过这个版本会存在与 Vue 2.x 响应式机制所存在的同样的局限。

监测机制

一句话介绍：更加全面、精准、高效；更具可调试性的响应跟踪；以及可用来创建响应式对象的 API。

93.vue开发过程中你有使用什么辅助工具吗？

dev-tool

93.vue和微信小程序写法上有什么区别？

没用原生的，用的MpVue

94.怎么缓存当前的组件？缓存后怎么更新？

keep-alive

95.你了解什么是高阶组件吗？可否举个例子说明下？

一篇面向初学者的 HOC 介绍。高阶组件听起来挺唬人的，只看名字恐怕不是那么容易明白究竟是何物，而且通常来讲高阶组件并不是组件，而是接受组件作为参数，并且返回组件的函数。早期利用 ES5 的 mixin 语法来做的事，基本都可以使用高阶组件代替，而且能做的还有更多。

96. 为什么我们写组件的时候可以写在.vue里呢？可以是别的文件名后缀吗？

可以，前提是要配置好

97. vue-loader是什么？它有什么作用？

vue-loader是解析 .vue 文件的一个加载器，跟 template/js/style转换成 js 模块；

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

98.说说你对vue的extend（构造器）的理解，它主要是用来做什么的？

扩展组件 Vue.extend返回的是一个扩展实例构造器，也就是预设了部分选项的Vue实例构造器。其主要用来服务于Vue.component，用来生成组件。可以简单的理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用扩展实例构造器来生产组件实例，并挂载到自定义元素上。

99.如果将axios异步请求同步化处理？

async await

100. 怎么捕获组件vue的错误信息？

Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
  // 只在 2.2.0+ 可用
  }

101.为什么vue使用异步更新组件？

同步多卡啊

102.如何实现一个虚拟DOM？说说你的思路

不说

103.写出多种定义组件模板的方法

字符串（String）

            Vue.component(’my-checkbox’, {
            
              template: ’<div class=”checkbox-wrapper” @click=”check”><div :class=”{ checkbox: true, checked: checked }”></div><div class=”title”></div></div>’,
            
              data() {
            
                return { checked: false, title: ’Check me’ }
            
              },
            
              methods: {
            
                check() { this.checked = !this.checked; }
            
              }
            
            });

模板字符串（Template literal）

   Vue.component(’my-checkbox’, {
       
     template: ’#checkbox-template’,
       
     data() {
       
       return { checked: false, title: ’Check me’ }
       
     },
       
     methods: {
       
       check() { this.checked = !this.checked; }
       
     }
       
   });

X-Templates

<script type=”text/x-template” id=”checkbox-template”>
    
  <div class=”checkbox-wrapper” @click=”check”>
    
    <div :class=”{ checkbox: true, checked: checked }”></div>
    
    <div class=”title”></div>
    
  </div>
    
</script>

内联（Inline）

 Vue.component(’my-checkbox’, {
    
   data() {
    
     return { checked: false, title: ’Check me’ }
    
   },
    
   methods: {
    
     check() { this.checked = !this.checked; }
    
   }
    
 });

Render函数（Render functions）

 render(createElement) {

   return createElement(’div’,
                           
                                {
                           
                                  attrs: {
                           
                                    ’class’: ’checkbox-wrapper’
                           
                                  },
                           
                                  on: {
                           
                                    click: this.check
                           
                                  }
                           
                                }）

JSX
单文件组件（Single page components） .vue

104.SPA单页面的实现方式有哪些？

105. 说说你对SPA单页面的理解，它的优缺点分别是什么？

参考

1、单页面应用（SPA）的概念：

1、single-page application是一种特殊的Web应用。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript、CSS。一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转，而是利用JavaScript动态的变换HTML（采用的是div切换显示和隐藏），从而实现UI与用户的交互。

2、简单来说SPA的网页只有一个页面，而这个网页的实际方式要能够回应使用者所使用的各种装置并且赋值使用者在电脑上使用软件的体验，让使用者可以更容易和有效的使用网站。按照正常情况下，我们会在一个页面中链接到其他的很多个页面，进行页面的跳转，但是如果使用单页面应用的话，我们始终在一个页面中，通常使用a标签的描点来实现。

2、作用（好处）

1、由于避免了页面的重新加载，SPA可以提供较为流畅的用户体验。得益于Ajax，可以实现无跳转刷新，由于与浏览器的history机制，可以使用hash的b变化从而可以实现推动界面变化。

2、只要使用支持HTML5和CSS3的浏览器就可以执行复杂的SPA,因此，开发人员不必为了写SPA网站而特别学习另一个开发方式，而使用者也不额外安装软件，所以，让开发SPA网页程序的入门和使用门槛降低不少。

3、缺点

以SPA方式开发的网站不容易管理也不够安全。因为没了一页一页的网页给搜索引擎的爬虫来爬，所以，在搜索引擎最佳化（SEO）的工作上，需要花费额外的功夫。因为没有换页，需要自定义状态来取代传统网页程序以网址来做判断。

4、实现SPA

技术：

1、处理#后面的字符

2、ajax局部刷新

106.说说你都用vue做过哪些类型的项目？

mpVue-小程序

107. 在vue项目中如何引入第三方库（比如jQuery）？有哪些方法可以做到？

static,html直接引入cdn
webpack

108. 使用vue手写一个过滤器

Vue.filter(‘’,{})

109.你有使用过render函数吗？有什么好处？

灵活

110.写出你常用的指令有哪些？

@ v-for v-if v-show

111.手写一个自定义指令及写出如何调用

 Vue.directive('role', {
  bind: function (el, binding, vnode) {
    // 获取按钮权限
    if(binding.value){
      console.log(binding.value)
      const level =  parseInt(binding.value.level)|| 0
      const isShow = parseInt(binding.value.regionLevel5Switch)|| 0
      if(level === 5 && isShow ===2){
        el.parentNode.removeChild(el);
      }
    }
  }
});

v-role

112. 组件进来请求接口时你是放在哪个生命周期？为什么？

created

113. 你有用过事件总线(EventBus)吗？说说你的理解

听过不说，气死你

114.说说vue的优缺点分别是什么？

优点：响应式数据变化，减少dom操作缺点：兼容性IE9+

115.DOM渲染在哪个周期中就已经完成了？

mounted

116.第一次加载页面时会触发哪几个钩子？

c-m-

117. vue生命周期总共有几个阶段？

c-m-u-d

118.vue生命周期的作用是什么？

??????

119.vue和angular有什么区别呢？

一个数据劫持，一个脏值检测

120.如何引入scss？引入后如何使用？

webpack 配置，sccs

lang=”scss”

121.使用vue开发过程你是怎么做接口管理的？

axios.request .response 统一拦截

写api调用

122.为何官方推荐使用axios而不用vue-resource？

1.vue-resources不再更新了，vue作者尤大推荐axios。 2.axios更加强大 3.axios就是一个基于ES6的Promise的网络请求库，其实说干净了就是一个打包好的XMLHttpRequests，也就是说，这个也是一个ajax库。 4.axios 在浏览器里建立XHR 通过nodejs进行http请求转换或者拦截请求数据或响应数据支持Promise的API 可以取消请求自动转换JSON 可以防御XSRF攻击！ 5.vue-resources 只提供了浏览器版本

123.你了解axios的原理吗？有看过它的源码吗？

不了解，没看过，有问题吗？

124.你有封装过axios吗？主要是封装哪方面的？

拦截，加token，设置header，超时，显示loading，提示信息

125. 如何中断axios的请求？

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

// cancel the request
cancel();

126. axios是什么？怎样使用它？怎么解决跨域的问题？

proxyTable设置跨域

127.说说你对vue的template编译的理解？

简而言之，就是先转化成AST树，再得到的render函数返回VNode(Vue的虚拟DOM节点)

详情步骤：

首先，通过compile编译器把template编译成AST语法树(abstract syntax tree 即源代码的抽象语法结构的树状表现形式)，compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option；

然后，AST会经过generate(将AST语法树转化成render function字符串的过程)得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）；

128.v-on可以绑定多个方法吗？

可以

129. vue常用的修饰符有哪些？列举并说明

.number .lazy

130.你认为vue的核心是什么？

数据劫持，订阅发布设计模式

131.v-model是什么？有什么用呢？

双向数据流

132. 说说你对vue的mixin的理解，有什么应用场景？

公用方法的封装，继承，

133. SPA首屏加载速度慢的怎么解决？

1.通过Gzip压缩

2.使用路由懒加载

3.利用webpack中的externals这个属性把打包后不需要打包的库文件都分离出去，减小项目打包后的大小

4.使用SSR渲染

134. 删除数组用delete和Vue.delete有什么区别？

一个有响应式一个没有

135.动态给vue的data添加一个新的属性时会发生什么？怎样解决？

没有响应式

$set() 方法相当于手动的去把 obj.b 处理成一个响应式的属性，此时视图也会跟着改变了：

136.组件和插件有什么区别？

（1）组件：首先最广的应该是组件。凡是在软件开发中用到了软件的复用，被复用的部分都可以称为组件。

（2）插件：插件是组件中中的一种，凡是在应用程序中已经预留接口的组件就是插件扩展。可以拿IE插件作为例子，IE中之所以可以嵌入很多应用程序，那是因为IE允许他们插入，说的明白一点，那就是在IE的源程序中已经为这些应用程序预留了接口，只要把通知浏览器已经加载了什么插件，浏览器就会调用预留的接口调用这些所谓的插件。

137.说说你使用vue过程中遇到的问题（坑）有哪些，你是怎么解决的？

没有坑

138.说说你对选项el,<template<render的理解

render渲染函数的优先级最高，template次之且需编译成渲染函数，而挂载点el属性对应的元素若存在，则在前两者均不存在时，其outerHTML才会用于编译与渲染

一、el，template，render属性优先性当Vue选项对象中有render渲染函数时，Vue构造函数将直接使用渲染函数渲染DOM树，当选项对象中没有render渲染函数时，Vue构造函数首先通过将template模板编译生成渲染函数，然后再渲染DOM树，而当Vue选项对象中既没有render渲染函数，也没有template模板时，会通过el属性获取挂载元素的outerHTML来作为模板，并编译生成渲染函数。换言之，在进行DOM树的渲染时，render渲染函数的优先级最高，template次之且需编译成渲染函数，而挂载点el属性对应的元素若存在，则在前两者均不存在时，其outerHTML才会用于编译与渲染。

139. vue实例挂载的过程是什么？

在执行$mount的时候，vue会先判断render函数是否存在，若存在，则执行render编译模板，若不存在，则判断template，若template存在，则将template通过render函数编译成Vnode，最后更新DOM，在这过程中，初始化时调用了Watcher类来充当观察者模式，一旦vm实例中的数据发生变化，Watcher就执行回调函数

140.vue在组件中引入插件的方法有哪些？

vue.use()

141. v-if和v-for的优先级是什么？如果这两个同时出现时，那应该怎么优化才能得到更好的性能？

v-for 写key

142. 分别说说vue能监听到数组或对象变化的场景，还有哪些场景是监听不到的？无法监听时有什么解决方案？

arr[1] = 2, $set

143. $nextTick有什么作用？

更新dom之后调用

144.为什么data属性必须声明为返回一个初始数据对应的函数呢？

值引用

145.怎么在watch监听开始之后立即被调用？

immediate: true

watch: {
    value:{
      handler:function(o,n){},
      immediate: true,
      deep: true
    } 
  },

146.watch怎么深度监听对象变化？

deep: true

147.watch和计算属性有什么区别？

in my head

148. vue如何监听键盘事件？

onkeyup onkeydown

149. v-for循环中key有什么作用？

key可以判断是否重新渲染此dom

####150.怎么在vue中使用插件？ vue,use

151.你有写过自定义组件吗？

有写过

152.说说你对keep-alive的理解是什么？

缓存dom数据到内存汇总

153. 怎么使css样式只在当前组件中生效？

scope

154. 你有看过vue的源码吗？如果有那就说说看

没有

155.你有写过自定义指令吗？自定义指令的生命周期（钩子函数）有哪些？

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

3 .update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。 ####156.v-show和v-if有什么区别？使用场景分别是什么？ v-if-vs-v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

157.说说你对MVC、MVP、MVVM模式的理解

MVP -指游戏中优秀的那个人

159. 说下你对指令的理解？

####160.请描述下vue的生命周期是什么？每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。 Vue生命周期 ####161.vue组件之间的通信都有哪些？

props,$emit
eventBus
vuex

####162.什么是虚拟DOM？ vue-节点、树以及虚拟 DOM Vue 通过建立一个虚拟 DOM 来追踪自己要如何改变真实 DOM。请仔细看这行代码：

return createElement('h1', this.blogTitle)

createElement 到底会返回什么呢？

其实不是一个实际的 DOM 元素。它更准确的名字可能是 createNodeDescription，

因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，包括及其子节点的描述信息。我们把这样的节点描述为“虚拟节点 (virtual node)”，也常简写它为“VNode”。

“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。

####163.什么是双向绑定？原理是什么？数据劫持结合发布者-订阅者模式

Observer,Watcher,Compile

####164.vue和react有什么不同？使用场景是什么？

react 函数式编程

React 和 Vue 有许多相似之处，它们都有：

使用 Virtual DOM 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。

####165.说说vue的优缺点 …..不说缺点，这是个坑

####166.有使用过vue吗？说说你对vue的理解用过。。。理解。。。。mvvm框架 ###vue-cli

####167. vue-cli生成的项目可以使用es6、es7的语法吗？为什么？可以，使用babel转义

####168.vue-cli怎么解决跨域的问题？代理，proxyTable target

169. vue-cli中你经常的加载器有哪些？

vue-loader,file,css,style

170. 你知道什么是脚手架吗？

建筑工地的架子

171. 说下你了解的vue-cli原理？你可以自己实现个类vue-cli吗？

vue-cli涉及到的主要技术框架如下：

1、node.js：整个脚手架工具的根本组成部分；

2、commander：能够更好地组织和处理命令行的输入；

3、download-git-repo：从git远程仓库下载文件；

4、handlebars：语义模板库；

5、metalsmith：静态页面构建，配合handlebars使用；

172.怎么使用vue-cli3创建一个项目？

没用过呢，有空试试

173.vue-cli3你有使用过吗？它和2.x版本有什么区别？

参考

初始方式不同： 3.0： vue create 3.0project； 2.0： vue init webpack 代码目录不同
3.0启动npm run serve

2.0启动npm run dev

。。。。。。 vuejs.config

174.vue-cli默认是单页面的，那要弄成多页面该怎么办呢？

参考

修改entry

  module.exports = {
              entry : {
                app: './src/main.js'  //单页面的入口文件
              },
              ...
   }

3.修改页面的输出配置修改之前，webpack.dev.conf.js的配置和webpack.prod.conf.js的配置

// 页面的输出通过webpack的html-webpack-plugin插件
var HtmlWebpackPlugin = require('html-webpack-plugin')
   
plugins：[
  ...
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    inject: true
  })
]

175. 不用vue-cli，你自己有搭建过vue的开发环境吗？流程是什么？

没有

vue-router

176. vue-router怎么重定向页面？

路由中配置redirect属性

177. vue-router怎么配置404页面？

path: ‘*’ ，放在最后一个

178.切换路由时，需要保存草稿的功能，怎么实现呢？

在beforeDestroy中加入check功能, 当检测到有草稿时, 自动保存到vuex或者storage中或者window中等等

但是我要说的是, 这种方法是不靠谱的, 如果我是刷新页面呢! 建议采用, 实施保存操作, 保存在storage中较为靠谱, 当然这种操作牺牲是比较多的

具体看业务场景

179.vue-router路由有几种模式？说说它们的区别？

hash: 使用变更hash不会刷新页面的特性, 来变更路由, 做到单页面无刷新

history: 使用html5的history方法, 不支持老旧浏览器, 但是如果要部署到服务器的化, 需要在ng上进行相应的正向代理跳转, 否则拷贝的链接会打不开

180.vue-router有哪几种导航钩子（导航守卫）？

全局钩子 beforeEach

beforeResolve

afterEach

某个路由独享的导航钩子 beforeEnter
路由组件上的导航钩子 beforeRouteEnter

beforeRouteUpdate (2.2 新增)

beforeRouteLeave

181.说说你对router-link的了解

router-link

    <router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。
    
    <router-link> 比起写死的 <a href="..."> 会好一些，理由如下：
    
    无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致，所以，当你要切换路由模式，或者在 IE9 降级使用 hash 模式，无须作任何变动。
    
    在 HTML5 history 模式下，router-link 会守卫点击事件，让浏览器不再重新加载页面。
    
    当你在 HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写 (基路径) 了。
    
     将激活 class 应用在外层元素

182.vue-router如何响应路由参数的变化？

监测 $route的变化

   watch: {
     '$route' (to, from) {
       // 对路由变化作出响应...
     }
   }

或者：

beforeRouteUpdate

 const User = {
   template: '...',
   beforeRouteUpdate (to, from, next) {
     // react to route changes...
     // don't forget to call next()
   }
 }

183.你有看过vue-router的源码吗？说说看

没看过。。。

184.切换到新路由时，页面要滚动到顶部或保持原先的滚动位置怎么做呢？

vue-router 滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

注意: 这个功能只在支持 history.pushState 的浏览器中可用。

当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法：

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})

185. 在什么场景下会用到嵌套路由？

菜单栏啊

186.如何获取路由传过来的参数？

地址栏截取

query

params

187.说说active-class是哪个组件的属性？

<router-link>

188.在vue组件中怎么获取到当前的路由信息？

$.route

189. vur-router怎么重定向？

redirect

190.怎样动态加载路由？

router-addroutes

element-路由

router.addRoutes

191.怎么实现路由懒加载呢？

路由懒加载

const Foo = () => import('./Foo.vue')

192.如果让你从零开始写一个vue路由，说说你的思路

监控某个事件，隐藏活删除某个div

193.说说vue-router完整的导航解析流程是什么？

官网-完整的导航解析流程参考-简书-A袁灿

导航被触发；
在失活的组件里调用beforeRouteLeave守卫；
调用全局beforeEach守卫；
在复用组件里调用beforeRouteUpdate守卫；
调用路由配置里的beforeEnter守卫；
解析异步路由组件；
在被激活的组件里调用beforeRouteEnter守卫；
调用全局beforeResolve守卫；
导航被确认；
.调用全局的afterEach钩子；
DOM更新；
用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数。

// 路由配置守卫即配置在路由对象中

// 组件实力的导航守卫：beforeRouteLeave、beforeRouteEnter、beforeRouteUpdate

// 全局守卫：beforeEach、beforeResolve、afterEach// 路由配置守卫：beforeEnter

194. 路由之间是怎么跳转的？有哪些方式？

router-link

 <router-link :to="{ path: 'yourPath', params: { name: 'name', dataObj: data }, query: { name: 'name', dataObj: data } }"> </router-link>

$router方式跳转

   this.$router.push({
        path: 'yourPath',            
        query: {
            name: 'name', 
            dataObj: this.msg
       },            
       params: {
            name: 'name', 
            dataObj: this.msg
       }
            
    })

195.如果vue-router使用history模式，部署时要注意什么？

HTML5 History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

    const router = new VueRouter({
      mode: 'history',
      routes: [...]
    })

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

**不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。**

196.route和router有什么区别？

route相当于当前正在跳转的路由对象。。可以从里面获取name,path,params,query等。。

router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经常用的跳转链接就可以用this.$router.push，和router-link跳转一样。。。

197.vue-router钩子函数有哪些？都有哪些参数？

导航守卫

参数 :

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。

next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。

next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。

next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保要调用 next 方法，否则钩子就不会被 resolved。

全局前置守卫 router.beforeEach 注册一个全局前置守卫：
全局解析守卫 router.beforeResolve 在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
全局后置钩子 router.afterEach

你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：

router.afterEach((to, from) => {
  // ...
}) 4. 路由独享的守卫   **beforeEnter:**

你可以在路由配置上直接定义 beforeEnter 守卫：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
}) 5. 组件内的守卫 **beforeRouteEnter   beforeRouteUpdate (2.2 新增)beforeRouteLeave**

最后，你可以在路由组件内直接定义以下路由导航守卫：

beforeRouteEnter

beforeRouteUpdate (2.2 新增)

beforeRouteLeave

198. vue-router是用来做什么的？它有哪些组件？

？？？？？

vuex

199.vuex使用actions时不支持多参数传递怎么办？

传一个对象啊

201.你觉得vuex有什么缺点？

大吧

202.你觉得要是不用vuex的话会带来哪些问题？

数据状态无法保持一致

203.vuex怎么知道state是通过mutation修改还是外部直接修改的？

通过$watch监听mutation的commit函数中_committing是否为true

204.请求数据是写在组件的methods中还是在vuex的action中？

action

205.怎么监听vuex数据的变化？

watch

206. vuex的action和mutation的特性是什么？有什么区别？

action: 负责与外界交互, 比如请求数据(好像一般都是)

mutation: 负责: 内部state变更

一个对外, 一个对内

207.页面刷新后vuex的state数据丢失怎么解决？

就是放在localStorage 或者就是sessionStorage ，或者借用辅助插vuex-persistedstate

208. vuex的state、getter、mutation、action、module特性分别是什么？

state, 状态初始化, 并实施观察

getter, 获取数据用于view或data中使用

mutation: 内部处理state变化

action: 处理外部交互

module: 模块化以上四个

####209.vuex的store有几个属性值？分别讲讲它们的作用是什么？

state, 状态初始化, 并实施观察

getter, 获取数据用于view或data中使用

mutation: 内部处理state变化

action: 处理外部交互

module: 模块化以上四个

210.你理解的vuex是什么呢？哪些场景会用到？不用会有问题吗？有哪些特性？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

多个视图依赖于同一状态。

来自不同视图的行为需要变更同一状态。

对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。

对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护

211.使用vuex的优势是什么？

便于进行全局或者局部的状态管理. 便于组件/插件/混合之间的联系

####212.有用过vuex吗？它主要解决的是什么问题？推荐在哪些场景用？ Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。

但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

###ElementUI

213.ElementUI是怎么做表单验证的？在循环里对每个input验证怎么做呢？

model 绑定表单数据通过prop 取表单数值，根据rule取form-item rules 或则rules[prop]校验

214.你有二次封装过ElementUI组件吗？

有

####215.ElementUI怎么修改组件的默认样式？第一直接按照element默认修改主题的方式, 直接修改配置第二直接覆盖样式第三自定义生成主题

216.ElementUI的穿梭组件如果数据量大会变卡怎么解决不卡的问题呢？

在 left-footer 的 slot 里面加个翻页组件，

并修改 filter-method 方法重绘穿梭机组件，

大概保持每页 50 条这样子。

217.ElementUI表格组件如何实现动态表头？

使用自定义表头，即中传入自定义 slot。表头整体结构变化则得自己 v-for 表头配置拼重绘

218. ElementUI使用表格组件时有遇到过问题吗？

flex布局下表格宽度无限增加

219.有阅读过ElementUI的源码吗？

没有

220.项目中有使用过ElementUI吗？有遇到过哪些问题？它的使用场景主要是哪些？

大型表格，公用表单组件

221.有用过哪些vue的ui？说说它们的优缺点？

iView

#mint-ui(没用过)

前言

vue