面试题：Vue

持续更新中...

面试传送门:

• 面试题：HTML+CSS
• 面试题：HTTP
• 面试重点：webpack
• 面试题：JS
• 面试问题：接招人事(非技术性问题)

001.vue中的MVVM模式

即Model-View-ViewModel。

Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦建立绑定，DOM和数据将保持同步，每当数据发生变化，DOM会跟着变化

ViewModel是Vue的核心，它是Vue的一个实例。Vue实例时做用域某个HTML元素上的，这个HTML元素能够是body，也能够是某个id所指代的元素。

DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面全部View层DOM元素的变化，当发生变化，Model层的数据随之变化；Data Bindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。

002.v-show与v-if的区别

条件渲染指令，与v-if不一样的是，不管v-show的值为true或false，元素都会存在于HTML代码中；而只有当v-if的值为true，元素才会存在于HTML代码中。v-show指令只是设置了元素CSS的style值

003.指令keep-alive

在vue-router写着keep-alive，keep-alive的含义：若是把切换出去的组件保留在内存中，能够保留它的状态或避免从新渲染。为此能够添加一个keep-alive指令

004.路由嵌套

路由嵌套会将其余组件渲染到该组件内，而不是进行整个页面跳转。
router-view自己就是将组件渲染到该位置，

005.指令v-el的使用

有时候咱们想就像使用jquery那样去访问一个元素，此时就可使用v-el指令，去给这个元素注册一个索引，方便经过所属实例的$el访问这个元素。

注： HTML不区分大小写，因此v-el:someEl将转换为全小写。能够用v-el:some-el而后设置this.$el.someEl。

示例：

<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>
this.$els.msg.textContent //-> "hello"
this.$els.otherMsg.textContent// -> "world"
this.$els.msg//-><span>hello</span>
复制代码

006.vue中使用事件名

在vuejs中，咱们常常要绑定一些事件，有时候给DOM元素绑定，有时候给组件绑定。绑定事件在HTML中用v-on:click="event"，能够简写为：@click="event"

007.vue.js是什么

Vue.js（是一套构建用户界面的 渐进式框架。与其余重量级框架不一样的是，Vue 采用自底向上增量开发的设计。
Vue 的核心库只关注视图层，而且很是容易学习，很是容易与其它库或已有项目整合。
另外一方面，Vue 彻底有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是经过尽量简单的 API 实现响应的数据绑定和组合的视图组件

008.route 和 router 的区别是什么？

route是“路由信息对象”，包括path,params,hash,query,fullPath,matched,name等路由信息参数。

router是“路由实例对象”，包括了路由的跳转方法(push、replace)，钩子函数等。

009.mvvm和mvc区别?它和其它框架(jquery)的区别是什么?哪些场景适合?

mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操做使页面渲染性能下降，加载速度变慢，影响用户体验。

区别：vue数据驱动，经过数据来显示视图层而不是节点操做。

场景：数据操做比较多的场景，更加便捷

010.vue的优势是什么?

低耦合。视图(View)能够独立于Model变化和修改，一个ViewModel能够绑定到不一样的"View"上，当View变化的时候Model能够不变，当Model变化的时候View也能够不变。

可重用性。你能够把一些视图逻辑放在一个ViewModel里面，让不少view重用这段视图逻辑。

独立开发。开发人员能够专一于业务逻辑和数据的开发(ViewModel)，设计人员能够专一于页面设计。

可测试。界面素来是比较难于测试的，而如今测试能够针对ViewModel来写。

011.vuex面试相关

(1)vuex是什么?

vue框架中状态管理。

(2)vuex有哪几种属性?

有五种，分别是 State、 Getters、Mutations 、Actions、 Module

vuex的State特性

A、Vuex就是一个仓库，仓库里面放了不少对象。其中state就是数据源存放地，对应于通常Vue对象里面的data

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

C、它经过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

vuex的Getters特性

A、getters 能够对State进行计算操做，它就是Store的计算属性

B、 虽然在组件内也能够作计算属性，可是getters 能够在多组件之间复用

C、 若是一个状态只在一个组件内使用，是能够不用getters

vuex的Mutations特性

Actions 相似于 mutations，不一样在于：Actions 提交的是 mutations，而不是直接变动状态;Actions 能够包含任意异步操做。

(3)不用Vuex会带来什么问题?

可维护性会降低，想修改数据要维护三个地方;

可读性会降低，由于一个组件里的数据，根本就看不出来是从哪来的;

增长耦合，大量的上传派发，会让耦合性大大增长，原本Vue用Component就是为了减小耦合，如今这么用，和组件化的初衷相背。

012.如何让CSS只在当前组件中起做用

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

013.响应式系统简述:

• 任何一个 Vue Component 都有一个与之对应的 Watcher 实例
• Vue 的 data 上的属性会被添加 getter 和 setter 属性
• 当 Vue Component render 函数被执行的时候, data 上会被 触碰(touch), 即被读, getter 方法会被调用, 此时 Vue 会去记录此 Vue component 所依赖的全部 data。(这一过程被称为依赖收集)
• data 被改动时（主要是用户操做）, 即被写, setter 方法会被调用, 此时 Vue 会去通知全部依赖于此 data 的组件去调用他们的 render 函数进行更新

014.谈谈你对虚拟DOM的理解？

首先,咱们都知道在前端性能优化的一个秘诀就是尽量少地操做DOM,不只仅是DOM相对较慢,更由于频繁变更DOM会形成浏览器的回流或者重回,这些都是性能的杀手,所以咱们须要这一层抽象,在patch过程当中尽量地一次性将差别更新到DOM中,这样保证了DOM不会出现性能不好的状况.

其次,现代前端框架的一个基本要求就是无须手动操做DOM,一方面是由于手动操做DOM没法保证程序性能,多人协做的项目中若是review不严格,可能会有开发者写出性能较低的代码,另外一方面更重要的是省略手动DOM操做能够大大提升开发效率.

015.Vue 中 key 值的做用？

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。若是数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每一个元素，而且确保它在特定索引下显示已被渲染过的每一个元素。key 的做用主要是为了高效的更新虚拟DOM。

016.vue 中怎么重置 data?

使用Object.assign()，vm.options.data能够获取到组件初始化状态下的data。
Object.assign(this.$data, this.$options.data())

017.组件中写 name 选项有什么做用？

• 项目使用 keep-alive 时，可搭配组件 name 进行缓存过滤
• DOM 作递归组件时须要调用自身 name
• vue-devtools 调试工具里显示的组见名称是由vue中组件name决定的

018.为何须要 nextTick?

Vue 是异步修改 DOM 的而且不鼓励开发者直接接触 DOM，但有时候业务须要必须对数据更改--刷新后的 DOM 作相应的处理，这时候就可使用 Vue.nextTick(callback)这个 api 了。

019.vue 首屏加载优化方案

• 把不常改变的库放到 index.html 中，经过 cdn 引入
• vue 路由的懒加载
• 不生成 map 文件（找到 config/index.js，修改成 productionSourceMap: false）
• vue 组件尽可能不要全局引入
• 使用更轻量级的工具库
• 开启gzip压缩
• 首页单独作服务端渲染

020.Vue3.0 有没有过了解？

关于Vue 3.0，大体说了三个点，第一个是关于提出的新API setup()函数，第二个说了对于Typescript的支持，最后说了关于替换Object.defineProperty为 Proxy 的支持。

详细说了下关于Proxy代替带来的性能上的提高，由于传统的原型链拦截的方法，没法检测对象及数组的一些更新操做，但使用Proxy又带来了浏览器兼容问题。

021.说一下Vue的双向绑定数据的原理

vue 实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，经过 Object.defineProperty() 来劫持各个属性的 setter，getter，在数据变更时发布消息给订阅者，触发相应监听回调

022.NextTick 是作什么的?

nextTick，则能够在回调中获取更新后的 DOM

023.Vue 组件 data 为何必须是函数?

由于js自己的特性带来的，若是 data 是一个对象，那么因为对象自己属于引用类型，当咱们修改其中的一个属性时，会影响到全部Vue实例的数据。若是将 data 做为一个函数返回一个对象，那么每个实例的 data 属性都是独立的，不会相互影响了

024.计算属性computed 和事件 methods 有什么区别

咱们能够将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式是相同的

不一样点：

• computed: 计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会从新求值
• 对于 method ，只要发生从新渲染，method 调用总会执行该函数

Vue中watch、computed与methods的联系和区别

025.vue 等单页面应用的优缺点：

优势：

• 良好的交互体验
• 良好的先后端工做分离模式
• 减轻服务器压力

缺点：

• SEO难度较高
• 前进、后退管理
• 初次加载耗时多

026.vue生命周期

vue的生命周期主要分为beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestroy,destroyed

建立先后、载入先后、更新先后、销毁先后
Vue 生命周期与钩子函数

027.Vue 导航守卫(路由的生命周期)

全局的

• router.beforeEach
• router.beforeResolve
• router.afterEach

单个路由独享的

• beforeEnter

组件级的

• beforeRouteEnter
• beforeRouteUpdate
• beforeRouteLeave

Vue 导航守卫(路由的生命周期)

028.常见的跨域解决方案

前端配置vue.config.js
后端配置
jsonp（只能解决get）

步骤：
1).去建立一个script标签
2).script的src属性设置接口地址 3).接口参数，必需要带一个自定义函数名，要否则后台没法返回数据 4).经过定义函数名去接受返回的数据

常见的跨域解决方案

029.什么是webpack及其优势

• 打包：能够把多个JavaScript文件打包成一个文件，减小服务器压力和下载宽带
• 转换：把扩展语言转换成为普通的JavaScript，让浏览器顺利运行。
• 优化：肩负起了优化和提高性能的责任

030.Vue中项目如何优化？

• data优化
• SPA首屏加载优化
• 组件优化
• 巧妙利用指令v-if(show)，使用v-for要绑定key
• 使用Object.freeze
• 路由懒加载
• 动态导入组件
• 图片懒加载
• 第三方模块按需导入
• 骨架屏
• PWA缓存
• 预渲染
• 服务端渲染SSR
• 缓存和压缩
• HTTP优化

031.Vue递归组件的使用

递归组件

032.Vue的mode中hash与history的区别

hash模式从新加载的时候只加载#后面的
history模式则是整个地址从新加载，不过他能够保存历史记录，方便前进后退

vue-router 有 3 种路由模式：hash、history、abstract

• hash: 使用 URL hash 值来做路由。支持全部浏览器，包括不支持 HTML5 History Api 的浏览器；
• history : 依赖 HTML5 History API 和服务器配置。具体能够查看 HTML5 History 模式；
• abstract : 支持全部 JavaScript 运行环境，如 Node.js 服务器端。若是发现没有浏览器的 API，路由会自动强制进入这个模式.

Vue的mode中 hash 与 history 的区别

033.vue中经常使用的命令

v-if v-show区别
v-for
v-model
v-bind
v-on

Vue 指令总结

034.Vue 的父组件和子组件生命周期钩子函数执行顺序？

Vue 的父组件和子组件生命周期钩子函数执行顺序？

• 加载渲染过程
  父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
• 子组件更新过程
  父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
• 父组件更新过程
  父 beforeUpdate -> 父 updated
• 销毁过程
  父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

035.在哪一个生命周期内调用异步请求？

能够在钩子函数 created、beforeMount、mounted 中进行调用，由于在这三个钩子函数中，data 已经建立，能够将服务端端返回的数据进行赋值。可是本人推荐在 created 钩子函数中调用异步请求，由于在 created 钩子函数中调用异步请求有如下优势：

• 能更快获取到服务端数据，减小页面 loading 时间；
• ssr 不支持 beforeMount 、mounted 钩子函数，因此放在 created 中有助于一致性；

036.组件中 data 为何是一个函数？

由于组件是用来复用的，且 JS 里对象是引用关系，若是组件中 data 是一个对象，那么这样做用域没有隔离，子组件中的 data 属性值会相互影响。

若是组件中 data 选项是一个函数，那么每一个实例能够维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响；而 new Vue 的实例，是不会被复用的，所以不存在引用对象的问题。

037.Vue组件间通讯有哪几种方式？

• props
• $emit
• $attr
• $listener
• provide inject (隔代通讯)
• children
• vuex

Vue组件之间的数据传递(通讯、交互)详解

038.Proxy 与 Object.defineProperty 优劣对比

Proxy 的优点以下:

• Proxy 能够直接监听对象而非属性；
• Proxy 能够直接监听数组的变化；
• Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具有的；
• Proxy 返回的是一个新对象,咱们能够只操做新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；
• Proxy 做为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；
  Object.defineProperty 的优点以下:
• 兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,并且没法用 polyfill 磨平，所以 Vue 的做者才声明须要等到下个大版本( 3.0 )才能用 Proxy 重写。

039.虚拟 DOM 的优缺点？

优势：

• 保证性能下限： 框架的虚拟 DOM 须要适配任何上层 API 可能产生的操做，它的一些 DOM 操做的实现必须是普适的，因此它的性能并非最优的；可是比起粗暴的 DOM 操做性能要好不少，所以框架的虚拟 DOM 至少能够保证在你不须要手动优化的状况下，依然能够提供还不错的性能，即保证性能的下限；
• 无需手动操做 DOM： 咱们再也不须要手动去操做 DOM，只须要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和 数据双向绑定，帮咱们以可预期的方式更新视图，极大提升咱们的开发效率；
• 跨平台： 虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关，相比之下虚拟 DOM 能够进行更方便地跨平台操做，例如服务器渲染、weex 开发等等。

缺点：

• 没法进行极致优化： 虽然虚拟 DOM + 合理的优化，足以应对绝大部分应用的性能需求，但在一些性能要求极高的应用中虚拟 DOM 没法进行针对性的极致优化。

040.虚拟 DOM 实现原理？

虚拟 DOM 的实现原理主要包括如下 3 部分：

• 用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象；
• diff 算法 — 比较两棵虚拟 DOM 树的差别；
• pach 算法 — 将两个虚拟 DOM 对象的差别应用到真正的 DOM 树。

041.vue插槽的使用？

默认插槽
具名插槽
做用域插槽

Vue 插槽(slot)使用(通俗易懂)

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

vue-router模块的router-link组件。

043.怎么定义vue-router的动态路由以及如何获取传过来的动态参数？

在router目录下的index.js文件中，对path属性加上/:id。使用route对象的params.id。

Vue 路由传值(传参)详解

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

vue文件的一个加载器。
用途：js能够写es六、style样式能够scss或less、template能够加jade等根据官网的定义，
vue-loader 是 webpack 的一个 loader，用于处理 .vue 文件.

045.为何避免 v-if 和 v-for 用在一块儿？

当Vue 处理指令时，v-for 比 v-if 具备更高的优先级，这意味着v-if将分别重复运行于每一个v-for循环中。经过v-if 移动到容器元素，不会再重复遍历列表中的每一个值。取而代之的是，咱们只检查它一次，且不会在 v-if 为否的时候运算 v-for。

046.vue中Class 与 Style 如何动态绑定？

Vue Class与Style绑定

047.怎样理解 Vue 的单向数据流？

全部的 prop 都使得其父子 prop 之间造成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，可是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而致使你的应用的数据流向难以理解。

额外的，每次父级组件发生更新时，子组件中全部的 prop 都将会刷新为最新的值。这意味着你不该该在一个子组件内部改变 prop。若是你这样作了，Vue 会在浏览器的控制台中发出警告。子组件想修改时，只能经过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。

048.直接给一个数组项赋值，Vue 能检测到变化吗？

因为 JavaScript 的限制，Vue 不能检测到如下数组的变更：

• 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
• 当你修改数组的长度时，例如：vm.items.length = newLength

049.vue.js的核心是什么？

• 数据驱动（响应式）：data中的数据变了，视图才会变
• 组件化：拆组装，目的在于重用，方便，脏活累活一次干完，以后就轻松了

050.vue的经常使用修饰符？

• 事件修饰符：
  .stop stopPropagation 阻止冒泡
  .prevent preventDefault 阻止默认行为
  .self 事件做用在本身身上才触发
  .once 事件只触发一次
• 键盘修饰符
  .enter 回车键
  .esc 退出键
• v-model 指令修饰符
  .lazy 由监听oninput事件转为onchange事件
  .number 尽可能将文本框中的值转为数字，能转就转，不能转就不转
  .trim 去掉字符串的首尾空格

051.vue和react有什么区别？

• react总体是函数式的思想，把组件设计成纯组件，状态和逻辑经过参数传入，因此在react中，是单向数据流；
• vue的思想是响应式的，也就是基因而数据可变的，经过对每个属性创建Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。

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

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

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

单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载全部必须的 html, js, css。全部的页面内容都包含在这个所谓的主页面中。但在写的时候，仍是会分开写（页面片断），而后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。

多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新

单页面的优势：
用户体验好，快，内容的改变不须要从新加载整个页面，基于这一点spa对服务器压力较小
先后端分离
页面效果会比较炫酷（好比切换页面内容时的专场动画）

单页面缺点：
初次加载时耗时多
页面复杂度提升不少
导航不可用，若是必定要导航须要自行实现前进、后退。

054.vue-router单页面应用的切换？

在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是创建起url和页面之间的映射关系。

055.为何不能用a标签？

至于为啥不能用a标签，这是由于用Vue作的都是单页应用，就至关于只有一个主的index.html页面，因此你写的标签是不起做用的，必须使用vue-router来进行管理。

058.Vue不能检测数组或对象变更问题的解决方法有哪些？

使用Proxy 使用当即执行函数