19 Vue面试题汇总

低耦合。视图(View)可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变
可重用性。可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑
独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel)，设计人员可以专注于页面设计
可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写

4 单页面应用及其优缺点?

缺点：

不支持低版本的浏览器，最低只支持到IE9；

不利于SEO的优化(如果要支持SEO，建议通过服务端来进行渲染组件)；

第一次加载首页耗时相对长一些；

不可以使用浏览器的导航按钮需要自行实现前进、后退。

优点：

无刷新体验，提升了用户体验；

前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整；

API共享，同一套后端程序代码不用修改就可以用于Web界面、手机、平板等多种客户端

用户体验好、快，内容的改变不需要重新加载整个页面。

5 Vue的双向数据绑定原理是什么？

Vue采用数据劫持+订阅发布模式实现双向绑定。通过Object.defineProperty()方法来为组件中data的每个属性添加get和set方法，在数据变动时，触发set里相应的监听回调函数，将变动信息发布给订阅者。主要有以下步骤：

组件初始化时：

创建一个dep对象作为观察者(依赖收集、订阅发布的载体)；

通过Object.defineProperty()方法对data中的属性及子属性对象的属性，添加getter和setter方法；调用getter时，便去dep里注册函数。调用setter时，便去通知执行刚刚注册的函数。

组件挂载时：

compile解析模板指令，将其中的变量替换成数据。然后初始化渲染页面视图，并将每个指令对应的节点绑定上更新函数、监听函数。后续一旦数据发生变化，便会更新页面。页面发生变化时也会相应发布变动信息；

组件同时会定义一个watcher类作为订阅者，watcher可以视作dep和组件之间的桥梁。其在实例化时会向dep中添加自己，同时自身又有一个update方法，待收到dep的变动通知时，便会调用自己的update方法，触发compile中的相应函数完成更新。

6 如何动态更新对象或数组的值？

因为Object.defineProperty()的限制，Vue无法监听到对象或数组内部某个属性值的变化，因此在直接设置以上两类数据的值时，页面不会实时更新。此时可以通过this.$set方法来解决

7 Vue模版编译原理知道吗，能简单说一下吗？

简单说，Vue的编译过程就是将template转化为render函数的过程。会经历以下阶段：

生成AST树
优化
code gen

首先解析模版，生成AST语法树(一种用JavaScript对象的形式来描述整个模板)。

使用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相关处理。

Vue的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化，对应的DOM也不会变化。那么优化过程就是深度遍历AST树，按照相关条件对树节点进行标记。这些被标记的节点(静态节点)我们就可以跳过对它们的比对，对运行时的模板起到很大的优化作用。

编译的最后一步是将优化后的AST树转换为可执行的代码。

8 Vue如何获取DOM元素？

首先为标签元素设置ref属性，然后通过this.$refs.属性值获取。

9 v-on如何绑定多个事件？

<input type="text" v-on="{input:onInput, focus:onFocus, blur:onBlur}">

10 Vue如何清除浏览器缓存？

项目打包的时候给每个打包文件加上hash值，一般是在文件后面加上时间戳
在html文件中加入meta标签，content属性设置为no-cache
在后端服务器中进行禁止缓存设置

11 组件之间的传值？

父组件通过标签上:data=data方式定义传值
子组件通过props方法接受数据
子组件通过$emit方法传递参数

12 v-model的原理？

v-model本质就是一个语法糖，可以看成是value + input方法的语法糖。可以通过model属性的prop和event属性来进行自定义。原生的v-model，会根据标签的不同生成不同的事件和属性。

13 路由之间跳转？

声明式(标签跳转)

通过router-link实现跳转

编程式(js跳转)

通过this.$router.pash实现跳转

14 Vue-router跳转和location.href有什么区别？

使用location.href='/url'来跳转，简单方便，但是刷新了页面；

使用history.pushState('/url')，无刷新页面，静态跳转；

引进router，然后使用router.push('/url')来跳转，使用了diff算法，实现了按需加载，减少了dom的消耗。

其实使用router跳转和使用history.pushState()没什么差别的，因为vue-router就是用了history.pushState()。

15 $route和$router的区别？

$router是用来操作路由，$route是用来获取路由信息
$router是VueRouter的一个实例，他包含了所有的路由，包括路由的跳转方法，钩子函数等，也包含一些子对象(例如history)
$route是一个跳转的路由对象(路由信息对象)，每一个路由都会有一个$route对象，是一个局部的对象

16 vue-router实现路由懒加载(动态加载路由)？

第一种：vue异步组件技术====异步加载，vue-router配置路由，使用vue的异步组件技术，可以实现按需加载。但是，这种情况下一个组件生成一个js文件。

第二种：使用import

第三种：webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

17 vue项目是打包了一个js文件，一个css文件，还是有多个文件？

根据vue-cli脚手架规范，一个js文件，一个CSS文件。

18 Vue里面router-link在电脑上有用，在安卓上没反应怎么解决？

Vue路由在Android机上有问题，babel问题，安装babel polypill插件解决。

19 Vue2中注册在router-link上事件无效解决方法？

使用@click.native。原因：router-link会阻止click事件，.native指直接监听一个原生事件。

20 RouterLink在IE和Firefox中不起作用(路由不跳转)的问题？

方法一：只用a标签，不适用button标签

方法二：使用button标签和Router.navigate方法

21 axios的特点有哪些？

从浏览器中创建XMLHttpRequests；

node.js创建http请求；

支持Promise API；

拦截请求和响应；

转换请求数据和响应数据；

取消请求；

自动换成json。

axios中的发送字段的参数是data跟params两个，两者的区别在于params是跟请求地址一起发送的，data的作为一个请求体进行发送

params一般适用于get请求，data一般适用于post put请求。

22 params和query的区别？

query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。

url地址显示：query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

注意点：query刷新不会丢失query里面的数据

params刷新会丢失params里面的数据。

23 vue.cli中怎样使用自定义组件？遇到过哪些问题？

第一步：在components目录新建组件文件(indexPage.vue)，script一定要export default {}。

第二步：在需要用的页面(组件)中导入：import indexPage from '@/components/indexPage.vue'

第三步：注入到vue子组件的components属性上面,components:{indexPage}

第四步：在template视图view中使用，例如有indexPage命名，使用的时候则index-page。

24 Vue初始化页面闪动问题？

使用vue开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{ {message}}的字样，虽然一般情况下这个时间很短暂，但是我们还是有必要让解决这个问题的。

首先：在css里加上[v-cloak] {display: none;}。

如果没有彻底解决问题，则在根元素加上style="display: none;" style="{display: 'block'}

25 Vue更新数组时触发视图更新的方法？

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

26 请说出vue.cli项目中src目录每个文件夹和文件的用法？

assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;app.vue是一个应用主组件；main.js是入口文件。

27 assets和static的区别？

相同点：assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片，字体图标，样式文件等都可以放在这两个文件下，这是相同点

不相同点：assets中存放的静态资源文件在项目打包时，也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传，所谓打包简单点可以理解为压缩体积，代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器。static中放置的静态资源文件就不会要走打包压缩格式化等流程，而是直接进入打包好的目录，直接上传至服务器。因为避免了压缩直接进行上传，在打包时会提高一定的效率，但是static中的资源文件由于没有进行压缩等操作，所以文件的体积也就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间。

建议：将项目中template需要的样式文件js文件等都可以放置在assets中，走打包这一流程。减少体积。而项目中引入的第三方的资源文件如iconfoont.css等文件可以放置在static中，因为这些引入的第三方文件已经经过处理，我们不再需要处理，直接上传。

28 Vue的两个核心点？

数据驱动、组件系统

数据驱动：ViewModel，保证数据和视图的一致性。

组件系统：应用类UI可以看作全部是由组件树构成的。

29 delete和Vue.delete删除数组的区别？

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

30 SPA首屏加载慢如何解决？

安装动态懒加载所需插件；使用CDN资源。

31 vue如何实现按需加载配合webpack设置？

webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import这样的方式引入，改为const定义的方式进行引入。

页面不按需加载引入方式：import home from '../../common/home.vue'

页面按需加载引入方式：

const home = r => require.ensure([], () => r (require('../../common/home.vue')))

32 vuex面试相关

32.1 vuex是什么，怎么使用？哪种功能场景使用它？

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

32.2 vuex有哪几种属性

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

32.3 vuex的State特性?

Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data
state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新
通过mapState把全局state和getters映射到当前组件的computed计算属性中

32.4 vuex的Getter特性?

getters可以对State进行计算操作，它就是Store的计算属性
虽然在组件内也可以做计算属性，但是getters可以在多组件之间复用
如果一个状态只在一个组件内使用，可以不用getters

32.5 vuex的Mutation、actions、modules特性?

mutations=> 提交更改数据的方法，同步
actions=> 像一个装饰器，包裹mutations，使之可以异步
modules=> 模块化Vuex

32.6 不用Vuex会带来什么问题?

可维护性会下降，想修改数据要维护三个地方
可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的
增加耦合，大量的上传派发，会让耦合性大大增加，Vue用Component本意就是为了减少耦合，现在这么用，和组件化的初衷相背

33 v-show与v-if的区别?

v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏
v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果
使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理

34 如何让CSS只在当前组件中起作用?

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

但是也得慎用：样式不易(可)修改，而很多时候，我们是需要对公共组件的样式做微调的

解决办法：

使用混合型的css样式：(混合使用全局跟本地的样式)<style>/*全局样式*/</style><style scoped>/*本地样式*/</style>

深度作用选择器(>>>)如果你希望scoped样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用>>>操作符：<style scoped> .a >>> .b {/*...*/}</style>

35 keep-alive的作用是什么?

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

36 Vue组件引入步骤?

采用ES6的import ... from ...语法或CommonJS的require()方法引入组件;

对组件进行注册,代码如下

//注册
Vue.component('my-component', {template: 'A custom component!'})

使用组件<my-component></my-component>

37 v-el作用是什么?

提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标。可以是CSS选择器，也可以是一个HTMLElement实例。

38 Vue插件使用步骤?

采用ES6的import ... from ...语法或CommonJS的require()方法引入插件。

使用全局方法Vue.use(plugin)使用插件,可以传入一个选项对象Vue.use(MyPlugin, someOption: true})。

39 Vue中常用的生命周期钩子函数?

beforeCreate：vue实例的挂载元素el和数据对象data都是undefined，还没用初始化
created：vue实例的数据对象data有了，可以访问里面的数据和方法，未挂载到DOM，el还没有
beforeMount：vue实例的el和data都初始化了，但是挂载之前未虚拟DOM节点
mounted：vue实例挂载到真实DOM上，就可以通过DOM获取DOM节点
beforeupdated：响应式数据更新时调用，发生在虚拟DOM打补丁之前，适合在更新之前访问现有的DOM，比如手动一处已添加的事件监听器
updated：虚拟DOM重新渲染和打补丁之后调用，组成新的DOM已经更新，避免在这个钩子函数中操作数据，防止死循环
beforeDestroy：实例销毁前调用，实例还可以用，this能获取到实例，常用于销毁定时器，解绑事件
destroyed：实例销毁后调用，调用后所有事件监听器会被移除，所有的子实例都会被销毁

40 为什么vue组件中data必须是一个函数?

如果data是一个对象，当复用组件时，因为data都会指向同一个引用类型地址，其中一个组件的data一旦发生修改，则其他重用的组件中的data也会被一并修改。

如果data是一个返回对象的函数，因为每次重用组件时返回的都是一个新对象，引用地址不同，便不会出现如上问题。

41 Vue中computed和watch有什么区别?

计算属性computed：

支持缓存，只有依赖数据发生变化时，才会重新进行计算函数；
计算属性内不支持异步操作；
计算属性的函数中都有一个get(默认具有，获取计算属性)和set(手动添加，设置计算属性)方法；
计算属性是自动监听依赖值的变化，从而动态返回内容。

侦听属性watch：

不支持缓存，只要数据发生变化，就会执行侦听函数；
侦听属性内支持异步操作；
侦听属性的值可以是一个对象，接收handler回调，deep，immediate三个属性；
监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些其他事情。

42 $nextTick是什么?

Vue实现响应式并不是在数据发生后立即更新DOM，使用vm.$nextTick是在下次DOM更新循环结束之后立即执行延迟回调。在修改数据之后使用，则可以在回调中获取更新后的DOM。

43 为什么一个dom元素显示，然后下一步去获取这个元素的offsetWidth，你获取到的会是0？

因为你改变数据把show变成true,元素并不会立即显示，理所当然也不会获取到动态宽度。

正确的做法是先把元素show出来，在$nextTick去执行获取宽度的操作

44 v-for中key的作用是什么？

key是Vue使用v-for渲染列表时的节点标识。使用了key之后，当列表项发生变化时，Vue会基于key的变化而重新排列元素顺序，并且移除key不存在的元素，提升运行效率。

45 active-class是哪个组件的属性?

vue-router模块的router-link组件

46 如何定义vue-router动态路由以及如何获取传过来的动态参数?

动态路由(页面刷新数据不丢失)

methods: {
    insurance(id) {
        //直接调用$router.push实现携带参数的跳转
        this.$router.push({
            path: `/particulars/${id}`,
        })
    }
}

路由配置

{
    path: '/particulars/:id',
    name: 'particulars',
    component: particulars
}

接收参数是this.$route.query.name

47 vue-router有哪几种导航钩子?

第一种：全局导航钩子：前置守卫、后置钩子(beforeEach，afterEach)beforeResolv，作用：跳转前进行判断拦截。

第二种：组件内钩子；beforeRouteEnter(不能获取组件实例this)、beforeRouteUpdate、beforeRouteLeave

这是因为在执行路由钩子函数beforRouteEnter时候，组件还没有被创建出来；

先执行beforRouteEnter，再执行组件周期钩子函数beforeCreate，可以通过next获取组件的实例对象

第三种：单独路由独享组件；beforeEnter

48 生命周期相关面试题

48.1 什么是vue生命周期？

Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。

48.2 生命周期分为哪几个阶段？

总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后

创建前/后：在beforeCreate阶段，由于还未初始化，vue实例的挂载元素el和数据对象data都为undefined。在created阶段，vue实例的数据对象data有了，el还没有
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但挂载之前还是为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染
更新前/后：当data变化时，会触发beforeUpdate和updated方法
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

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

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

48.4 第一次页面加载会触发哪几个钩子?

第一次页面加载时会触发beforeCreate，created，beforeMount，mounted这几个钩子。

48.5 DOM渲染在哪个周期中就已经完成?

DOM渲染在mounted中就已经完成了。

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

生命周期钩子的一些使用方法：

beforeCreate可以在此阶段加loading事件，在加载实例时触发

created：初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用

mounted：挂载元素，获取到DOM节点

updated：如果对数据统一处理，在这里写上相应函数

beforeDestroy：可以做一个确认停止事件的确认框

nextTick：更新数据后立即操作dom

50 说出至少4种vue指令和它的用法?

v-if：判断是否隐藏

v-for：数据循环

v-bind:class：绑定一个属性

v-model：实现双向绑定

51 vue-loader是什么？用途有哪些?

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

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

52 scss是什么？在vue.cli中的安装使用步骤？有哪几大特性?

css的预编译语言。

使用步骤：

第一步：先装css-loader、node-loader、sass-loader等加载器模块；

第二步：在build目录找到webpack.base.config.js，在extends属性中加一个拓展.scss；

第三步：在同一个文件，配置一个module属性；

第四步：然后在组件的style标签加上lang属性，例如：lang = “scss”；

特性：

可以用变量，例如($变量名称=值)；

可以用混合器；

可以嵌套；

53 页面渲染为什么使用key?

当有相同标签名的元素切换时，为避免渲染问题，需要通过key特性设置唯一的值来标记以让 Vue区分它们，否则Vue为了效率只会替换相同标签内部的内容。

54 为什么避免v-if和v-for一起用?

因为v-for的优先级比v-if的优先级高,所以每次渲染时都会先循环再进行条件判断,而又因为v-if会根据渲染条件为true或false来决定渲染与否的,所以如果将v-if和v-for用在一起会特别消耗性能。

解决方法：

将v-if放在外层嵌套template(页面渲染不生成dom节点)，在这一层进行v-if判断，然后在内部进行v-for循环
如果条件出现在循环内部,不得不放在一起时,可通过计算属性computed提前过滤掉那些不需要显示的项

例如，可以在computed属性中对数据进行筛选：

computed: {
    filteredList() {
        return this.list.filter(item => item.condition); // 根据条件过滤列表项
    }
}

然后，在模板中只使用v-for来遍历过滤后的列表：

<div v-for="item in filteredList" :key="item.id">{
   
   {item.name}}</div>

55 VNode是什么？虚拟DOM是什么？

Vue在页面上渲染的节点，及其子节点称为“虚拟节点(Virtual Node)”，简写为“VNode”。“虚拟DOM”是由Vue组件树建立起来的整个VNode树的称呼。

56 slot插槽分类？

1. 单个插槽

当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的DOM位置，并替换掉插槽标签本身。

最初在<slot>标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。

2. 命名插槽

slot元素可以用一个特殊的特性name来进一步配置如何分发内容。多个插槽可以有不同的名字。

这样可以将父组件模板中slot位置，和子组件slot元素产生关联，便于插槽内容对应传递

3. 作用域插槽scoped slots

可以访问组件内部数据的可复用插槽(reusable slot)

在父级中，具有特殊特性slot-scope的<template>元素必须存在，表示它是作用域插槽的模板。slot-scope的值将被用作一个临时变量名，此变量接收从子组件传递过来的prop对象。

57 你都做过哪些Vue的性能优化？

尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher
SPA页面采用keep-alive缓存组件
在更多的情况下，使用v-if替代v-show
key保证唯一
使用路由懒加载、异步组件
图片懒加载

58 webpack的编译原理？

1. webpack的作用

(1) 依赖管理：方便引用第三方模块、让模块更容易复用，避免全局注入导致的冲突、避免重复加载或者加载不需要的模块。会一层一层的读取依赖的模块，添加不同的入口；同时，不会重复打包依赖的模块

(2) 合并代码：把各个分散的模块集中打包成大文件，减少HTTP的请求链接数，配合UglifyJS(压缩代码)可以减少、优化代码的体积

(3) 各路插件：统一处理引入的插件，babel编译ES6文件，TypeScript，eslint可以检查编译期的错误

一句话总结：webpack的作用就是处理依赖，模块化，打包压缩文件，管理插件

一切皆为模块，由于webpack只支持js文件，所以需要用loader转换为webpack支持的模块，其中plugin 用于扩张webpack的功能，在webpack构建生命周期的过程中，在合适的时机做了合适的事情

2. webpack工作过程

(1) 解析配置参数，合并从shell(npm install类似的命令)和webpack.config.js文件的配置信息，输出最终的配置信息

(2) 注册配置中的插件，让插件监听webpack构建生命周期中的事件节点，做出对应的反应

(3) 解析配置文件中的entry入口文件，并找出每个文件依赖的文件，递归下去

(4) 在递归每个文件的过程中，根据文件类型和配置文件中的loader找出对应的loader对文件进行转换

(5) 递归结束后得到每个文件最终的结果，根据entry配置生成代码chunk(打包之后的名字)

(6) 输出所以chunk到文件系统

59 Vue修饰符

1 事件修饰符

.stop 阻止事件继续传播

.prevent 阻止标签默认行为

.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理

.self 只当在event.target是当前元素自身时触发处理函数

.once 事件将只会触发一次

.passive 告诉浏览器你不想阻止事件的默认行为

2 v-model的修饰符

.lazy 默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步

.number自动将用户的输入值转化为数值类型

.trim 自动过滤用户输入的首尾空格

3 键盘事件的修饰符

.enter

.tab

.delete(捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right

.ctrl

.alt

.shift

.meta

4 element的修饰符

对于elementUI的input，我们需要在后面加上.native，因为elementUI对input进行了封装，原生的事件不起作用。

1 什么是MVVM?

2 MVVM与MVC区别，它和其它框架(jQuery)的区别是什么，哪些场景适用?

3 Vue优点?