Vue.js面试题

前端面试题–vue

在我面试前端工程师的时候，问到最多的就属于Vue.js了，因为这个框架技术，在大城市公司中，基本都要求会使用。

vue 概述

Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

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

二、mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

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

区别：vue数据驱动，通过数据来显示视图层而不是节点操作。
场景：数据操作比较多的场景，更加便捷

Vue的优缺点是什么

优点：低耦合，可重用性，独立开发，可测试，渐进式

缺点：不利于SEO，社区维护力度不强，相比还不够成熟

组件之间传值

父向子传值：属性传值，父组件通过给子组件标签上定义属性，子组件通过props方法接收数据；

子向父传值：事件传值，子组件通过$emit(‘自定义事件名’，值)，父组件通过子组件上的@自定义事件名=“函数”接收

非父子组件传值：全局定义bus，var bus=new Vue() ; 发送者， bus.$emit(‘自定义名’，值)；接受者，bus.$on(‘自定义名’，(值)=>{})

路由之间传参

路由字典中：routes={path:’/detail/:id’,component:Detail}

标签中：

Js中：this.$route.params.id

路由之间跳转

声明式（标签跳转） 编程式（ js跳转）

1.直接修改地址栏中的路由地址 ②通过router-link实现跳转③通过js的编程的方式

vue.cli****中怎样使用自定义的组件？

第一步：在components目录新建你的组件文件（如：indexPage.vue），script一定要export default {}

· 第二步：在需要用的页面（组件）中导入：import indexPage from ‘@/components/indexPage.vue’

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

· 第四步：在template视图view中使用

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

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

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

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

Vuex有哪几种属性？

五种：state，action，mutation，getter，module

State：数据源存放地，数据是响应式的

Action: 逻辑处理，提交的是mutation,包含任意异步操作

Mutation: 修改state里的公共数据

Getter: 相当于计算属性，可以复用，可缓存

Module: 模块化

不用Vuex会带来什么问题？

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

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

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

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

· v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏

· v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

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

将当前组件的

的作用是什么?

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

指令v-el的作用是什么**?**

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

active-class****是哪个组件的属性？嵌套路由怎么定义？
答：vue-router模块的router-link组件。
嵌套路由顾名思义就是路由的多层嵌套。 一级路由里面使用children数组配置子路由，就是嵌套路由。

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

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

vue-router有哪几种导航钩子？

三种，一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
第二种：组件内的钩子；
第三种：单独路由独享组件

Vue生命周期

vue生命周期就是从开始创建，初始化数据，编译模板，挂载DOM，渲染->更新->渲染，销毁等一系列过程。生命周期钩子如下：

组件实例周期：

BeforeCreate：实例初始化后，无法访问方法和数据；

Created：实例创建完成，可访问数据和方法，注意，假如有某些数据必须获取才允许进入页面的话，并不适合；

beforeMonut：挂载DOM之前

Mounted :el被新创建的vm.$el替换，可获取dom，改变data，注意，beforeRouterEnter的next的钩子比mountend触发靠后；

beforeUpdate：数据更新时调用，发生在虚拟DOM重新渲染前；

Updated：数据更改后，可以执行依赖于DOM的操作，注意，应该避免在此期间更改状态，可能会导致更新无限循环；

beforeDestroy：实例销毁之前，这一步还可以用this获取实例，一般在这一步做重置操作，比如清定时器监听dom事件；

Destroyed：实例销毁后，会解除绑定，移除监听。

vue****生命周期的作用是什么

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

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

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

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

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

· beforecreate : 可以在这加个loading事件，在加载实例时触发

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

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

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

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

· nextTick : 更新数据后立即操作dom

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

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

说出至少4种vue当中的指令和它的用法？

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

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

解析.vue文件的一个加载器
用途：js可以写es6、style样式可以scss或less、template可以加jade等

vue中使用插件的步骤是什么？

Inport … from … 引入插件，Vue.use(…)全局注册

vue router跳转和location.href有什么区别？

Router是hash改变；location.href是页面跳转，刷新页面

scss是什么？安装使用的步骤是？有哪几大特性？

答：预处理css，把css当前函数编写，定义变量,嵌套。
先装css-loader、node-loader、sass-loader等加载器模块，在webpack-base.config.js配置文件中加多一个拓展:extenstion，再加多一个模块：module里面test、loader

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

答：css的预编译。（scss是sass的一个升级版本，完全兼容sass之前的功能，又有了些新增能力，最主要的就是sass是靠缩进表示嵌套关系，scss是花括号）
使用步骤：
第一步：先装css-loader、node-loader、sass-loader等加载器模块
第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss
第三步：在同一个文件，配置一个module属性
第四步：然后在组件的style标签加上lang属性 ，例如：lang=”scss”

特性:

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

· 可以用混合器，混入@mixin 可以传变量

· 可以嵌套

继承@extend 不可以传变量，相同样式直接继承，不会造成代码冗余；基类未被继承时，也会被编译成css代码

为什么使用key？

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

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

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

怎么定义vue-router的动态路由？怎么获取传过来的动态参数？
答：在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id

v-model****是什么？怎么使用？ vue****中标签怎么绑定事件？

答：可以实现双向绑定，指令（v-class、v-for、v-if、v-show、v-on）。vue的model层的data属性。绑定事件：

vue-router****是什么？它有哪些组件？

答：vue用来写路由一个插件。router-link、router-view

导航钩子有哪些？它们有哪些参数？

答：导航钩子有：a/全局钩子和组件内独享的钩子。b/beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave

参数：有to（去的那个路由）、from（离开的路由）、next（一定要用这个函数才能去到下一个路由，如果不用就拦截）最常用就这几种

自定义指令（v-check、v-focus）的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？

答：全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives

钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发)、update（组件内相关更新）

钩子函数参数：el、binding

vue-router有哪几种导航钩子？

答：三种，一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。第二种：组件内的钩子；第三种：单独路由独享组件

参数：有to（去的那个路由）、from（离开的路由）、next（一定要用这个函数才能去到下一个路由，如果不用就拦截）最常用就这几种

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

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

mint-ui是什么？怎么使用？说出至少三个组件使用方法？

答：基于vue的前端组件库。npm安装，然后import样式和js，vue.use（mintUi）全局引入。在单个组件局部引入：import {Toast}
from ‘mint-ui’。组件一：Toast(‘登录成功’)；组件二：mint-header；组件三：mint-swiper