每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子的函数，这给了用户在不同阶段添加自己代码的机会。（生命周期钩子就说生命周期函数）例如，如果要通过某些插件操作 DOM 节点，如想在页面渲染完后弹出广告窗，那我们最早可在mounted中进行。

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

beforeCreate，created，beforeMount，mounted

3.简述每个周期具体适合哪些场景？

beforeCreate：在new一个Vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法。

create：data 和 methods 都已经被初始化好了，如果要调用 methods 中的方法，或者操作data中的数据，最早可以在这个阶段中操作。

beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的。

mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。如果我们想要通过插件操作页面上的DOM节点，最早可以在这个阶段中进行。

beforeUpdate：当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的，页面还没有和最新的数据保持同步。

updated：页面显示的数据和data中的数据已经保持同步了，都是最新的。

beforeDestroy：Vue实例从运行阶段进入了销毁阶段，这个时候所有的 data 和 methods，指令，过滤器…都是处于可用状态。还没有真正被销毁。

destroyed：这个时候所有的 data 和 methods，指令，过滤器…都是处于不可用状态。组件已经被销毁了。

4.created和mounted的区别？

created：在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted：再模板渲染成html后调用，通常是初始化页面完成后，再对html的DOM节点进行一些需要的操作。

因此，在created中，是无法进行DOM操作的，而mounted可以进行DOM操作。

5.vue获取数据在哪个周期函数？

一般 created / beforeMount / mounted 皆可。

如果你要操作 DOM ，那肯定是 mounted 时候才能操作。

6.请详细说下你对vue生命周期的理解？

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

创建前/后（beforeCreate / created）：在beforeCreated阶段，vue实例的挂载元素 $el和 数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。

载入前/后（beforeMount / mounted）：在beforeMount阶段，vue实例的 $el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message 还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后（beforeUpdate / updated）：当data变化时，会触发beforeUpdate和updated方法。

销毁前/后()：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

vue路由面试题

1.mvvm 框架是什么？

在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信

2.vue-router 是什么?它有哪些组件

vue-router路由，通俗来讲主要是来实现页面的跳转，通过设置不同的path，向服务器发送的不同的请求，获取不同的资源。

主要组件：router-view、router-link

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

首先 active-class 是 vue-router 模块中 router-link 组件中的属性，主要作用是用来实现选中

样式的切换，在 vue-router 中要使用 active-class 。

4.怎么定义 vue-router 的动态路由? 怎么获取传过来的值？

现在像 /users/marry 和 /users/lilei 这样的 URL 都会映射到同一个User路由上,路径参数用冒号 :表示

1)params

this.router.push{name:name,params:{id:1})

以路由的name名传递 获取：this.route.params.id

2)query

this.router.push{name:name,query:{id:1})

this.router.push{path:path,query:{id:1})

以name和path传递 获取：this.route.query.id

需要注意query通过url传参，刷新页面还在，params刷新页面不在了

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

全局导航钩子：

router.beforeEach(to, from, next): 路由改变前的钩子

router.beforeResolve : 在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，该钩子函数就被调用

router.afterEach : 路由改变后的钩子

路由独享钩子：可以在路由配置上直接定义 beforeEnter

组件内的导航钩子：

beforeRouteEnter 在进入当前组件对应的路由前调用 beforeRouteUpdate 在当前路由改变，但是该组件被复用时调用 beforeRouteLeave 在离开当前组件对应的路由前调用

6.route和router 的区别

this.$router是全局路由器对象（动态路由添加，路由切换，导航等等），this.$route是当前激活的路由对象，包含了当前的路由信息（path、query、params、name）

7.vue-router响应路由参数的变化(同一组件如何响应路由参数的变化）

当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

1）watch监听：

2）导航守卫

beforeRouteEnter 在进入当前组件对应的路由前调用 beforeRouteUpdate 在当前路由改变，但是该组件被复用时调用 beforeRouteLeave 在离开当前组件对应的路由前调用

8.vue-router传参

1）query

2）params

解决params传参刷新界面后消失的问题：在router.js的声明文件中将参数声明在path中

9.vue-router的两种模式

hash、history

相同点：

都是VueRouter的模式配置选项。

都可以用作SPA（单页面应用）的实现，实现前端路由，不向服务器发起请求，动态渲染页面。

不同点：

Hash模式需要#xxx（哈希值），History模式书写更简约。

Hash模式是通过window对象监听hashchange事件，根据hash值的变化来动态渲染页面的；History模式是通过window对象监听popstate事件，当浏览器前进和后退时，获取当前history对象状态即history.state来动态渲染组件。

Hash模式创建history对象是依赖HashHistory构造函数；History模式创建history对象是依赖HTML5History构造函数。

Hash模式利用HashHistory.push()和HashHistory.replace()可以将hash变化的URL都被记录在浏览器历史访问栈，实现页面内容和URL一一对应，从而可以使用浏览器的前进和后退功能。

History模式利用HTML5History.pushState()和HTML5History.replaceState()修改页面的url地址，修改history对象的状态，而不刷新页面。

Hash模式通过携带在url中传递参数；History模式既可以通过携带在url中传递参数，也可以将数据存放在一个特定的对象中。

Hash模式只有hash值设置为不同于上次时，才会被添加进历史记录栈；History模式可以记录相同的url。

Hash模式只能修改#之后的部分；History模式的pushState设置的新的url可以是于当前url同源的任意url。

10.vue-router实现路由懒加载（ 动态加载路由 ）

1）vue异步组件

使用vue的异步组件可以实现按需加载，但是每个组件都会生成一个js文件，不能分类指定chunkName

2）import

指定相同的webpackChunkName,会合并打包成一个js文件

3）webpack提供的require.ensure

该方法也可以指定相同的chunkName,合并打包成一个js文件，如果为空就是打包成不同的js文件

vue常见面试题

1.vue优点

vue作为一款轻量级框架，门槛低，上手快，简单易学。

vue可以进行组件化开发，数据与结构相分离，使代码量减少，从而提升开发效率，易于理解

vue最突出的优势在于对数据进行双向绑定，使用虚拟DOM

相较于传统页面通过超链接实现页面跳转，vue会使用路由跳转不会刷新页面

vue是单页面应用，页面局部刷新，不用每次跳转都请求数据，加快了访问速度，提升了用户体验

2.vue父组件向子组件传递数据？

props

3.子组件向父组件传递事件？

$emit

4.v-show和v-if指令的共同点和不同点

相同点：

v-show和v-if都能控制元素的显示和隐藏。

不同点：

1)实现本质方法不同

v-show本质就是通过设置css中的display设置为none，控制隐藏

v-if是动态的向DOM树内添加或者删除DOM元素

2)编译的区别

v-show其实就是在控制css

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

3)编译的条件

v-show都会编译，初始值为false，只是将display设为none，但它也编译了

v-if初始值为false，就不会编译了

4)性能比较

v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好。

5.如何让CSS只在当前组件中起作用

scoped

6.vue父子组建的生命周期执行顺序

挂载阶段

执行顺序为：

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

更新阶段

执行顺序为：

父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated

销毁阶段

执行顺序为：

父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

规律就是：父组件先开始执行，然后等到子组件执行完，父组件收尾

7.如何获取dom

ref $refs

8.说出几种vue当中的指令和它的用法？

v-model

v-on

v-show

v-if v-else

v-html

v-text

v-pre

9.vue-loader是什么？使用它的用途有哪些？

1）vue-loader作用：

解析和转换.vue文件。提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template，再分别把他们交给对应的loader去处理

2）用途

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

3）

css-loader：加载由vue-loader提取出的CSS代码

vue-template-compiler：把vue-loader提取出的HTML模板编译成可执行的jacascript代码

10.为什么使用key

diff算法

11.axios及安装

npm run axios --save

12.axios解决跨域

proxy配置反向代理

cors

13.v-model的使用

form表单元素进行双向数据绑定

14.scss的安装以及使用

npm installnode-sass--save-dev //安装node-sass

npm installsass-loader--save-dev //安装sass-loader

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

assets 文件夹是放静态资源

components 文件夹是放全局组件的

router 文件夹是定义路由相关的配置

store 文件夹是管理 vuex管理数据的位置 模块化开发 全局getters

views 视图 所有页面 路由级别的组件

App.vue 入口页面 根组件

main.js 入口文件 加载组件 初始化等

16.分别简述computed和watch的使用场景

computed擅长处理的场景：一个数据受多个数据影响，computed拥有缓存属性,只有当依赖的数据发生变化时,关联的数据才会变化,适用于计算或者格式化数据的场景，例如：购物车计算价格 只要购买数量,购买价格,优惠券,折扣券等任意一个发生变化,总价都会自动跟踪变化.

watch擅长处理的场景：一个数据影响多个数据，watch:监听，当一条数据影响多条时就需要用到watch，例子：搜索数据

17.v-on可以监听多个方法吗

可以

18.$nextTick的使用

当数据加载或者更新后dom元素还没有挂载最新数据

19.vue组件中data为什么必须是一个函数

如果是对象，所有的组件都可以修改对象里的值，但是data又以return的方式返回，数据就有自己的私有空间

20.vue事件对象的使用

$event

阻止事件冒泡 .stop //stoppropagation

阻止默认行为：.prevent //preventdefault

事件只执行一次 once

21 .组件间的通信

父=>子 props

子=>父 通过事件触发$emit

同组件 bus

vuex 通用

22.渐进式框架的理解

是一个用于构建用户界面的渐进式框架。与其他单体框架不同，Vue从一开始就设计为可增量采用。核心库只关注视图层，并且很容易与其他库或现有项目进行拾取和集成。另一方面，当与现代工具和支持库结合使用时，Vue也完全能够为复杂的单页应用程序提供支持。

23.Vue中双向数据绑定是如何实现的

v-model 通过数据劫持和观察者模式实现

24.单页面应用和多页面应用区别及优缺点

刷新方式：

SPA:相关组件切换，页面局部刷新或更改

MPA:整页刷新

路由模式：

SPA:可以使用hash，也可以使用history

MPA:普通连接跳转

用户体验：

SPA：页面片段间时间的切换，用户体验好，当初次加载文件过多时，需要做出相关调优

MPA：页面切换加载缓慢，流畅度不够，用户体验比较差，尤其网速慢得时候

转场动画：

SPA:容易实现转场动画

MPA:无法实现转场动画

数据传递：

SPA：容易实现数据传递，方式有很多【vuex 路由带参数传值】

MPA：依赖url传参，cookie，本地存储

搜索引擎优化：

SPA：需要单独方案，实现较为困难，不利于SEO，可以利用服务器端渲染（ssr）优化

MPA：实现方法容易

使用范围

SPA:高要求的体验度，追求界面流畅的应用

MPA：适用于追求高度支持搜索引擎的应用

开发成本

SPA：较高，长需要借助专业的框架

MPA：较低，但也页面代码重复的多

维护成本

SPA：相对容易

MPA：相对复杂

结构

SPA：一个主页面+许多模块的组件

MPA：许多完整的页面

资源文件

SPA：组件公用的资源只需要加载一次

MPA：每个页面都需要自己加载公用的资源

优点：操作体验流畅

前端组件化开发

前后端分离，实现API多用共享

缺点：首屏渲染加载资源多。

不利于搜索引擎，因为内容是动态生成的。

优点：有利于搜索引擎

相对来说首屏加载速度快

缺点： 页面切换效率低

25.vue中过滤器有什么作用及详解

局部过滤器优先于全局过滤器被调用一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右

26.v-if和v-for的优先级

v-for>v-if

27.assets和static的区别

assets里的文件可以通过weback打包

static不会 适合放置字体文件

28.列举常用的指令

vue常用指令有：v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令等等。

29.vue常用的修饰符

表单修饰符

1)lazy（当光标离开标签时，才会将值赋值给value）

2)trim（过滤掉两边的空格）

3)number（自动将用户的输入值转为数值类型，但如果这个值无法被parseFloat解析，则会返回原来的值）

事件修饰符

1)stop//stop阻止事件的冒泡，相当于调用了event.preventPropagation方法

2)prevent//preven阻止了事件的默认行为，相当于调用了event.preventDefault方法

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

4)once//绑定了事件以后只能触发一次，第二次就不会触发

5)capture//capture事件捕获，从顶层往下触发

6)passive//passive用于提升移动端scroll事件的性能。在移动端，当我们在监听元素滚动事件的时候，会一直触发onscroll事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符。

7)native//native如果在自定义组件标签上绑定原生事件，则需要加上.native。

30.数组更新检测

push（）、pop（）、shift（）、unshift（）、splice（）、sort（）、reverse（）

31.Vue.set视图更新

1)this.$set(target,”key”,value’)

target:要更新的数据源（可以是对象或者数组）

key:要更改的具体数据

value：重新赋的值

最后补充一下数组中那些方法可以实现数据更新，视图也更新的情况

1)push()方法在数组的尾部添加一个或多个元素,并返回数组新的长度。

2)pop()方法删除数组的最后一个元素,会减小数组长度并返回它删除的值。

3)unshift()方法在数组的头部添加一个或多个元素,并返回数组新的长度。

4)shift()方法删除数组的第一个元素,然后把所有随后的元素前移一个位置来填补数组头部的空缺,并返回删除的元素。

5)splice(start)方法在数组中插入或删除元素的通用方法

6)sort()方法将数组中的元素排序,并返回排序后的数组。

7)reserve()将数组进行翻转，并返回该数组，会改变原来的数组

数据更新，视图更新实质上是对原数组进行了修改，像数组的filter，contat，slice是返回一个新的数组，并不会影响原始数组

32.自定义指令详解

Vue提供了一个directive方法给我们注册自定义指令，我们在main.js中注册一个全局的自定义指令。

注册指令也分为全局注册和局部注册，和全局注册组件和局部注册组件一个道理。全局注册的指令可以在任何组件中直接使用，局部注册的指令只能在注册的地方使用。

全局注册

全局注册顾名思义，自定义指令注册好后，在项目的所有组件内都可以直接使用。

Vue提供了一个directive方法给我们注册自定义指令，我们在main.js中注册一个全局的自定义指令。

上段代码中我们就直接调用了Vue提供的directive方法来注册全局的自定义指令，该方法接收两个参数：指令名称、包含指令钩子函数的对象。

指令注册完毕后，我们就可以在项目中任意组件中的元素上使用“v-指令名称”的形式使用指令了。

需要注意的是，指令钩子函数不是必须的，大家可以把它与vue的生命周期钩子函数做类比，它们的作用就是用来让指令在不同的过程中做不同的事情。

局部注册

通常来说，如果自定义指令不是每个组件都会用到的话，我们一般局注册自定义指令就好了。

如上所示，Vue提供了一个directives选项供我们注册自定义指令，它与data、methods同级别，上段代码中我们注册了一个名叫resize的自定义指令，该指令只允许在组件内部使用。

注意：全局注册指令使用的是directive，局部注册指令使用的是directives，很好理解，局部指令一次性注意注册很多个，全局指令依次只能注册一个。

自定义指令参数详解

上面5个就是自定义指令的全部钩子函数，每个钩子函数都是可选的，视情况而定。大家可以简单理解钩子函数顺序：指令绑定到元素时（bind）、元素插入时（inserted）、组件更新时（update）、组件更新后（componentUpdated）、指令与元素解绑时（unbind）。这些和组件的生命周期函数有点类似。

钩子函数参数介绍

el：指令所绑定的元素，可以用来直接操作 DOM。

1)binding：一个对象，包含以下属性

2)@vnode：Vue 编译生成的虚拟节点。

3)oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。

33.vue的两个核心点

组件

双向数据绑定

34.vue和jQuery的区别

vue双向数据绑定不需要过多的操作dom

jQuery主要是通过 对dom的操作来实现数据的加载更新

35 引进组件的步骤

在template中引入组件；

在script的第一行用import引入路径；

用component中写上组件名称。

36.Vue-cli打包命令是什么？打包后悔导致路径问题，应该在哪里修改

命令行输入：npm run build

解决：到config文件夹中打开index.js文件

assetsPublicPath属性作用是指定编译发布的根目录，‘/'指的是项目的根目录 ，'./'指的是当前目录

37.三大框架的对比

一、Vue、angular、react三大主流框架对比

1、与angular 相比

api简单，快速上手，学习成本低；

anguar 使用双向绑定，Vue也支持双向绑定，不过为单向数据流，数据从父组件单向传给子组件

Vue.js 中指令和组件分得更清晰。指令只封装DOM操作，而组件代表一个自给自足的独立单位，有自己的视图和数据逻辑。在anguar中两者有不少相混的地方

anguar 的脏检查机制，造成了如果项目庞大之后性能降低问题；每次更新数据，都导致所有的数据绑定，进行移一次遍历

Vue 的数据变化更新是根据依赖追踪的观察系统并且异步列队去更新，数据变化都是独立的触发队列中相应的事件；

渲染层创建虚拟dom（轻量级，2.0），减少了内存开销和加快了渲染速度；

组件式开发，每一个组件都具有生命周期，便于自己状态的维护；实现了代码的高复用性

2、与react 相比

共同点

1、使用 Virtual DOM

2、提供了响应式和组件化的视图组件

3、将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库

优势：

1、vue的更行渲染过程是自动追踪的，而react 如果想要提高更新的性能需要通过 shouldComponentUpdate钩子函数对接数据进行对比；

2、对于组件的语法，在vue中即可以支持jsx语法，将css和html都写入js文件中，又可以使用template模板进行编译。在vue中退浆使用template 模板进行编译，减少学习成本，更符合前端开发语法，而react 仅仅支持jsx语法，

jsx的优点:

1、开发工具对jsx的支持比其他的vue模板更先进

2、对css支持

缺点:

1、vue中可以直接在style中写css语法，可以支持媒体查询等等一切css 属性，并且可以通过css样式的隔离，只能写入js文件中，比较简单的样式可以进行支付，但是如果比较复杂的则无法支持

2、Vue总结

缺点:

1、mvvm的开发模式，从dom中解脱出来，双向数据绑定；

2、数据更新采用异步事件机制

3、采用单向数据流

4、组件式开发

5、采用虚拟dom

6、支持模板和jsx两种开发模式

7、可以进行服务端渲染

8、可以进行服务端渲染

缺点:

1、不兼容ie8以下版本

1、生态圈不繁荣，开源社区不活跃

38.跨组件双向数据绑定

双向watch监听

1)父组件传递数据到子组件

2)子组件将数据转成本地数据

3)但是此时，父组件如果更新了name 值，但是子组件中的 iName 不会随之更改；所以要监听父组件传入数据的变化，随之更新子组件；

4)此时，父组件更新 name ，子组件展示出来的数据（iName）会随之变化，但是子组件修改数据，父组件不会变化，所以需要监听子组件数据（iName）的变化，通知父组件进行更新

v-model

1）给自定义子组件绑定v-model

2）子组件接收value数据

3）将value转换成本地数据

4）监听value数据的变换，更新到本地数据

5）监听本地数据的变化，同过input事件通知父组件更新

主要通过input事件和value来实现

39.delete和Vue.delete删除数组的区别

delete只是被删除的全素变成了empty/undefined,其他元素的键值不变

Vue.delete直接删除了数组里的值， 改变了数组的键值

40.SPA首屏加载慢如何解决

1）使用SSR

2）UI框架按需加载

3）路由懒加载

4）图片资源压缩，使用字体图标和雪碧图

5）减少http请求，使用缓存

6）按规则书写代码，避免内存消耗

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

1）location.href简单方便，但是刷新了页面；

2）Vue-router无刷新页面，静态跳转；使用了diff算法，实现了按需加载，减少了dom的消耗；history.pushState()

42.vue slot

插槽，也就是slot，slot就是子组件里的一个占位符，一个slot的核心问题，就是显不显示，显示的话显示话，该如何去展示出来，这是由父组件所控制的，但是插槽显示的位置是由子组件自己所决定的，slot写在组件template的什么位置，父组件传过来的模板将会显示在什么位置

1）匿名插槽

2）具名插槽

3）作用域插槽

43.你们vue项目是打包了一个js文件，一个css文件，还是有多个文件？

一个

44.vue遇到的坑，如何解决的？

keep-alive 第一次请求

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

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

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

使⽤@click.native。原因：router-link会阻⽌click事件，.native指直接监听⼀ 个原⽣事件

47.RouterLink在IE和Firefox中不起作用（路由不跳转）的问题

1）只⽤a标签，不适⽤button标签；

2）使⽤button标签和 Router.navigate⽅法

48.axios的特点有哪些

1）从浏览器中创建XMLHttpRequest

2）node.js创建http请求

3）支持PromiseAPI

4）拦截请求和响应

5）转换请求数据和响应数据

6）取消请求

7）自动换成json

axios中发送的字段参数是data和params

区别：params和请求地址一起发送

data作为一个请求体发送

params一般适用于get，data一般适用于post put

49.请说下封装 vue 组件的过程？

分析需求：主要是把页面中结构和功能相似的模块抽离出来实现复用；

考虑点：传参问题，对于子组件的扩展问题可以考虑solt

具体步骤：

1）使用 Vue.extend（） 方法创建一个组件

2）然后使用 Vue.component （）方法注册组件

3）如果 子组件需要数据，可以在 props 中接受定义

4）最后，子组件修改好数据后，想把数据传递给父组件， 可以采用$emit（） 方法

50.vue 各种组件通信方法（父子 子父 兄弟 爷孙 毫无关系的组件）

props父子

$emit子父

provid inject爷孙

event.bus兄弟

vuex毫无关系

51.params和query的区别

1）写法不同

query的语法用path编写传参地址

params的语法用name编写传参地址

2）接收方式不同

this.route.query.name

this.route.params.name

3)query传参页面刷新参数不会消失，params会消失

4）query传参会显示在地址栏中，params不会显示在地址栏中，query相当于get请求，params相当于post请求

52.vue mock数据

通常意义的mock指的就是mock server，模拟服务端返回的接口数据，用于前端开发，第三方接口联调。

1）安装mock npm i mockjs -D

2)在src文件下创建一个mock文件，在mock文件夹下创建一个index.js和一个data文件夹（用于存放项目需要的模拟数据

3)mock文件夹下的index.js示例

const Mock=require('mockjs')

Mock.mock('/api/test','get',require('./data/test.json'))

4）在main.js里引入数据，不需要时就注释

require('./mock')

5)最后在vue里使用就行

53. vue封装通用组件

vue组件三要素

1）props参数

2）slot定制插槽

3）event自定义事件

54.vue初始化页面闪动问题

1）v-cloak指令（在dom元素添加c-cloak，然后再css里添加[v-cloak]{display:none}

2）根元素里添加style='dispaly:none';:style='{display:block}'

总结：v-cloak是通过样式先隐藏内容，在内存中进行值得替换，替换完成后，将内容返回给界面，数据渲染完成后，v-cloak属性会被自动去除

55.vue中如何做样式穿透

1）>>>进行样式穿透，但是只适用于原始CSS，不适用于 Sass、Less等预处理器。

2）/deep/进行样式穿透，既适用于CSS，适用于Sass、Less等预处理器，但问题是在vue-cli3以上版本创建的vue项目不再被支持。

3）::v-deep进行样式穿透，既适用于CSS，适用于Sass、Less等预处理器，在vue-cli3以上版本创建的vue项目才也会被支持。

56.vue更新数组时触发视图更新的方法

1）Vue.set响应式新增与修改数据

2）Vue.delete

3）数组对象直接修改属性，可以触发视图更新

4）splice方法修改数组，可以触发视图更新

5）数组整体修改，可以触发视图更新

6）用Object.assign或lodash.assign可以为对象添加响应式属性，可以触发视图更新

7）Vue包含一组观察数组变异的方法，使用它们改变数组也会触发视图更新不变异的方法:

push、pop、shift、unshift、splice、sort、reverse（不变异的方法filter、concat、slice）

注：vue在监测到数据变化时，不会直接重新渲染整个列表，而是最大复用DOM元素，替换的数组中，含有相同元素的项不会被重新渲染，因此可以大胆的用新数组来更换旧数组，不用担心性能问题

以下两种方法不能触发试图更新：

通过索引直接设置：this.book[3]={...}

修改数组的长度：this.book.length=3

57.vue常用的UI组件库

bootstrapvue

pc端

iview

element

Ant Design Vue

移动端

vant

vux

58.vue如何引进本地背景图片

Vue中引用背景图片的方法：

1）通过img标签直接引用图片做背景

2、通过“background: url”的方式对元素添加样式引用背景图片；

.card{background:url('~/assats/img/card_bg.png') center center no-repeat}

3）通过import方法，再引用背景图片即可。

import cardPath from '~/assats/img/card_bg.png'

export default{

data(){

return{

cardPath:cardPath,

}

}

}

59.vue如何引进sass

安装 sass-loader 和 node-sass：

npm install -D sass-loader node-sass

60.vue修改打包后静态资源路径的修改

vue.config.js文件中配置publicPath属性设置静态文件访问路径。/改成./

vuex常见面试题

1.vuex是什么？怎么使用？哪种功能场景使用它？

vuex是一种状态管理机制，将全局组件的共享状态抽取出来为一个store，以一个单例模式存在，在任何一个组件中都可以使用，vuex更改state的唯一途径是通过mutation，mutation需要commit触发, action实际触发是mutation，其中mutation处理同步任务，action处理异步任务

1）安装vuex

2）在src下创建仓库store文件夹，并创建index.js集中管理仓库，在index.js里引入vuex：构建一个Vuex实例并暴露

3）在入口文件引入仓库并注册

个人信息和购物车

2.vuex有哪几种属性

1）state

state是存储的单一状态，是存储的基本数据，类似于组件的data

2）Getters

getters是store的计算属性，对state的加工，是派生出来的数据。就像computed计算属性一样，getter返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。

3）Mutations

mutations提交更改数据，使用store.commit方法更改state存储的状态，类似于methods。（mutations同步函数）

4）Actions

actions像一个装饰器，提交mutations，而不是直接变更状态。（actions可以包含任何异步操作）

5）Module

Module是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。

6）辅助函数

Vuex提供了mapState、MapGetters、MapActions、mapMutations等辅助函数给开发在vm中处理store。

3.不使用Vuex会带来什么问题

1）可维护性会下降，你要修改数据，你得维护 3 个地方

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

3）增加耦合，本来 Vue 用 Component 就是为了减少耦合，现在这么用，和组件化的初衷相背

4.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？

ajax如果是公用，还是写在 vuex 的actions 当中为妙，而私有 则 写在methods中。

5.vuex一个例子方法

1）state

state是存储的单一状态，是存储的基本数据，类似于组件的data

2）Getters

getters是store的计算属性，对state的加工，是派生出来的数据。就像computed计算属性一样，getter返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。

3）Mutations

mutations提交更改数据，使用store.commit方法更改state存储的状态，类似于methods。（mutations同步函数）

4）Actions

actions像一个装饰器，提交mutations，而不是直接变更状态。（actions可以包含任何异步操作）

5）Module

Module是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。

6）辅助函数

Vuex提供了mapState、MapGetters、MapActions、mapMutations等辅助函数给开发在vm中处理store。

6.Vuex中如何异步修改状态

Action 提交的是 mutation

7.Vuex中actions和mutations的区别

vuex中修改store的值唯一方法就是提交mutations

mutations方法会接受一个state参数，可以对他进行修改

actions要想修改store里的值必须提交mutations，他执行的是一个异步操作

8.vuex如何做持久化存储

1)localStorage

2)vuex-persist插件

关于vue3

1.vue2和vue3区别

1）双向数据绑定原理不同

vue2：vue2的双向数据绑定是利用ES5的一个API：Object.definePropert() 对数据进行劫持，结合发布订阅模式的方式来实现的。

vue3：vue3中使用了ES6的Proxy API对数据代理。相比vue2.x，使用proxy的优势如下：

defineProperty只能监听某个属性，不能对全对象监听

可以省去for in，闭包等内容来提升效率(直接绑定整个对象即可)

可以监听数组，不用再去单独的对数组做特异性操作vue3.x可以检测到数组内部数据的变化。

2）是否支持碎片

vue2：vue2不支持碎片。

vue3：vue3支持碎片（Fragments），就是说可以拥有多个根节点。

3）API类型不同

vue2：vue2使用选项类型api，选项型api在代码里分割了不同的属性：data,computed,methods等。

vue3：vue3使用组合式api，新的合成型api能让我们使用方法来分割，相比于旧的api使用属性来分组，这样代码会更加简便和整洁。

4）定义数据变量和方法不同

vue2：vue2是把数据放入data中，在vue2中定义数据变量是data(){}，创建的方法要在methods:{}中。

vue3：，vue3就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。使用以下三个步骤来建立反应性数据：

从vue引入reactive；

使用reactive() 方法来声明数据为响应性数据；

使用setup()方法来返回我们的响应性数据，从而template可以获取这些响应性数据。

5）生命周期钩子函数不同

vue2：vue2中的生命周期：

beforeCreate 组件创建之前

created 组件创建之后

beforeMount 组价挂载到页面之前执行

mounted 组件挂载到页面之后执行

beforeUpdate 组件更新之前

updated 组件更新之后

vue3：vue3中的生命周期：

setup 开始创建组件前

onBeforeMount 组价挂载到页面之前执行

onMounted 组件挂载到页面之后执行

onBeforeUpdate 组件更新之前

onUpdated 组件更新之后

而且vue3.x 生命周期在调用前需要先进行引入。除了这些钩子函数外，vue3.x还增加了onRenderTracked 和onRenderTriggered函数。

6）父子传参不同

vue2：父传子，用props,子传父用事件 Emitting Events。在vue2中，会调用this$emit然后传入事件名和对象。

vue3：父传子，用props,子传父用事件 Emitting Events。在vue3中的setup()中的第二个参数content对象中就有emit，那么我们只要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。

7）指令与插槽不同

vue2：vue2中使用slot可以直接使用slot；v-for与v-if在vue2中优先级高的是v-for指令，而且不建议一起使用。

vue3：vue3中必须使用v-slot的形式；vue3中v-for与v-if,只会把当前v-if当做v-for中的一个判断语句，不会相互冲突；vue3中移除keyCode作为v-on的修饰符，当然也不支持config.keyCodes；vue3中移除v-on.native修饰符；vue3中移除过滤器filter。

8）main.js文件不同

vue2：vue2中我们可以使用pototype(原型)的形式去进行操作，引入的是构造函数。

vue3：vue3中需要使用结构的形式进行操作，引入的是工厂函数；vue3中app组件中可以没有根标签。

关键词：组合式api；proxy；支持碎片；组合式api；composition；生命周期；

2.vue3新增的响应式相关的函数

ref，reactive，readonly，computed，watch，watchEffect

3.ref的理解

1）功能：接受一个内部值，返回一个响应式的、可更改的 ref 对象，ref对象只有一个属性：value。

2）使用ref对象：模板上不需要写 .value 属性（会自动解构），在js中，使用 .value 来完成数据的读写。

3）ref接收基本类型和引用类型

ref可以接收基本类型。

ref也可以接收引用类型：如果将一个对象传给 ref函数，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。

4.reactive的理解

1）功能： 接受一个对象，返回一个对象的响应式代理（proxy）。返回的对象以及其中嵌套的对象都会通过 ES Proxy 包裹，因此不等于源对象，建议只使用响应式代理，避免使用原始对象。

响应式转换是“深层”的：它会影响到所有嵌套的属性。一个响应式对象也将深层地解包任何 ref 属性，同时保持响应性。

2）注意点：当访问到某个响应式数组或 Map 这样的原生集合类型中的 ref 元素时，不会执行 ref 的解包。

（...持续更新修改中...)