vue面试题汇总

vue面试题总结

1 谈谈你对MVVM的理解，以及MVVM和MVC的区别？

mvvm

			M : model 的缩写  存储数据的数据模型      data
			V : views的缩写  负责将数据模型用ui组件展现出来    el 挂载点
			VM : view model的缩写 连接视图层和数据模型层 通过数据的双向绑定实例化的一个vue对象

在mvvm架构下 view和model之间是不能直接联系的，而是通过viewmodel进行交互，model和viewmodel之间的交互是双向的，而view的数据变化会同步到model中，model中的数据变化也会立即反应到View中，因此我们在开发过程中不必去关心数据状态同步的问题 viewmodel会帮我们完成！

mvc

m : model缩写 存储数据的数据模型
v : view缩写 用户界面 用来传送指令到Controller
c : Controller 控制器 连接视图层和数据模型层

在MVC里，View是可以直接访问Model的！从而，View里会包含Model信息，不可避免的还要包括一些业务逻辑。 MVC模型关注的是Model的不变，所以，在MVC模型里，Model不依赖于View，但是 View是依赖于Model的。不仅如此，因为有一些业务逻辑在View里实现了，导致要更改View也是比较困难的，至少那些业务逻辑是无法重用的。

其实两者的区别并不是很大，mvvm是mvc的一种升级版，相对于Mvc来说，mvvm解决了开发者对dom频繁操作，提高了页面加载速度，当model发生变化，也不需要开发者去主动更新 ,viewmodel都会帮忙完成。

2.vue的优点是什么？

低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。

低耦合，视图可以独立于model的变化和修改，一个ViewModel可以绑定到多个不同的Viwe上，当view变化时，model以不变，当Model变化时，view也可以不变，可以非常灵活的去操作model和view层；

可重用性， 可以把一些视图逻辑放在一个viewModel中 ，其他的view可以重用这个试图逻辑

独立开发，开发人员可以更专注与业务逻辑和数据 的开发，设计人员可以更专注与页面设计

视图，数据，结构分离 ， 使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作

响应式数据绑定 vue.js会自动响应数据的变化，通过MVVM思想实现数据的双向绑定，让开发者不用再操作dom对象，有更多的时间去思考业务逻辑。

组件化 Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑），然后整个应用就算做完了。

3.组件之间的传值？

父组件与子组件传值

父组件通过标签上面定义传值

子组件通过props方法接受数据

子组件向父组件传递数据

子组件通过$emit方法传递参数

4.vuex的作用？

vuex是专门为应用程序开发提供的一种状态管理模式，采用集中式管理应用程序的所有组件的状态
vuex可以帮助我们管理共享状态，也就是管理全局变量
vuex的几个核心概念：
vuex使用一个store对象管理应用的状态，一个store包括：state,getter，mutation,action四个属性
state:state意为’状态’，是vuex状态管理的数据源
getter:getter的作用与filters有一些相似，可以将state进行过滤后输出
mutation:mutation是vuex中改变state的唯一途径，并且只能同步操作
action:一些对state的异步操作可以放在action中，并通过在action提交mutaion变更状态
module:当store对象过于庞大时，可以根据具体的业务需求分为多个module

我们可以在组件中触发 Action，Action 则会提交 Mutation，Mutaion 会对 State 进行修改，组件再根据 State 、Getter 渲染页面	

5.vue中的路由拦截器的作用？

路由拦截，权限设置
例如：当用户没有登录权限的时候就会跳转到登录页面，用到的字段requireAuth:true
详情参考：https://blog.csdn.net/wang1006008051/article/details/77962942

6.axios的作用？

向后端发送请求，相当与vue中的ajax
特点：
从浏览器中创建XMLHttpRequests
从node.js创建http请求
支持Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换json数据
get post 两种方法

7.列举vue的常见指令。

1.文本插值：{{}} Mustache

 <div id='app'>
        {{message}}
    </div>

2.DOM属性绑定：v-bind 简写 :title

  <div id='app-2'>
            <span v-bind:title='message'>
                鼠标悬停几秒钟查看此处动态绑定的提示信息
            </span>
        </div>

3.指令绑定一个事件监听器：v-on 简写 @click

<div id='app-5'>
            <p>{{message}}</p>
            <button v-on:click='reverseMessage'>逆转消息</button>
        </div>

4.实现表单输入和应用状态之间的双向绑定：v-model

  <div id='app-6'>
            <p>{{message}}</p>
            <input v-model='message'>
        </div>

5.控制切换一个元素的显示：v-if和v-else

 <div id='app-3'>
            <p v-if='seen'>现在你看到我了</p>
        </div>

6.列表渲染:v-for 遍历

 <div id='app-4'>
            <ol>
                <li v-for='todo in todos'>
                    {{todo.text}}
                </li>
            </ol>

8.列举Http请求中常见的请求方式？

常用的两种：
get
向特定的路径资源发出请求，数据暴露在url中
post
向指定路径资源提交数据进行处理请求，数据包含在请求体中

options
    返回服务器针对特定资源所支持的http请求方法，允许客户端查看，测试服务器性能
head
    向服务器与get请求相一致的响应，响应体不会返回，可以不必传输整个响应内容
put
    从客户端向服务器端传送的数据取代指定的文档的内容
delete
    请求服务器删除指定的页面
trace
    回显服务器收到的请求，主要用于测试或者诊断
connect
    http/1.1协议中预留给能够将连接改为管道方式的代理服务

9.Vue的生命周期

1.什么是vue生命周期
vue的生命周期指的是创建vue实例到销毁的过程。从开始创建，初始化数据，编译模板，挂载dom，渲染dom，更新数据，重新渲染 ，销毁

2.vue生命周期的作用是什么？
它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

3.vue生命周期总共有几个阶段？
一共有8个阶段 ： 分别是 创建前后beforecreat created 加载前后beforemount mounted 更新前后Update updated 销毁前后destroy destroyed

4.第一次页面加载会触发哪几个钩子？
会触发 下面这几个beforeCreate, created, beforeMount, mounted 。

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

10.Vue实现数据双向绑定的原理：Object.defineProperty（）

采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。
　　详情请查看 :https://www.jianshu.com/p/7e3be3d619e0

11.Vue组件间的参数传递

1.父组件向子组件传值 :

子组件通过props方法接受数据;

子组件向父组件传值

组件通过$emit方式传值给父组件

2.非父子组件间的数据传递，兄弟组件传值

eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。（虽然也有不少人推荐直接用VUEX，具体来说看需求咯。技术只是手段，目的达到才是王道。）

详情查看：https://blog.csdn.net/tianjian_zhou/article/details/85077563

12.Vue的路由实现：hash模式 和 history模式

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；
　
　特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
　
　hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
　
history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。
　
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”

13.vue路由的钩子函数

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

beforeEach主要有3个参数to，from，next：

to：route即将进入的目标路由对象，

from：route当前导航正要离开的路由

next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

14.vue中key的作用？

key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，
详情请看：vue中key的作用

15.vue-cli如何新增自定义指令？

1.创建局部指令
var app = new Vue({
    el: '#app',
    data: {    
    },
    // 创建指令(可以多个)
    directives: {
        // 指令名称
        dir1: {
            inserted(el) {
                // 指令中第一个参数是当前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 对DOM进行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        }
    }
})
2.全局指令
Vue.directive('dir2', {
    inserted(el) {
        console.log(el);
    }
})
3.指令的使用
<div id="app">
    <div v-dir1></div>
    <div v-dir2></div>
</div>

16.对keep-alive 的了解？

keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。同时也可以很大程度上减少接口请求，减小服务器压力。

keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。

使用方法

<keep-alive include='include_components' exclude='exclude_components'>
  <component>
    <!-- 该组件是否缓存取决于include和exclude属性 -->
  </component>
</keep-alive>

参数解释
include - 字符串或正则表达式，只有名称匹配的组件会被缓存
exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存
include 和 exclude 的属性允许组件有条件地缓存。二者都可以用“，”分隔字符串、正则表达式、数组。当使用正则或者是数组时，要记得使用v-bind 。

使用示例

<!-- 逗号分隔字符串，只有组件a与b被缓存。 -->
<keep-alive include="a,b">
  <component></component>
</keep-alive>

<!-- 正则表达式 (需要使用 v-bind，符合匹配规则的都会被缓存) -->
<keep-alive :include="/a|b/">
  <component></component>
</keep-alive>

<!-- Array (需要使用 v-bind，被包含的都会被缓存) -->
<keep-alive :include="['a', 'b']">
  <component></component>
</keep-alive>

17.vue-router是什么？有哪些组件？

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

和和

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

动态路由的创建，主要是使用path属性过程中，使用动态路径参数，以冒号开头，如下：

{
  path: '/details/:id'
  name: 'Details'
  components: ()=> import ("呈现内容的组件地址:例如：@/views/a.vue")  
}

访问details目录下的所有文件，如果details/a，details/b等，都会映射到组件上。

当匹配到/details下的路由时，参数值会被设置到this.$route.params下，所以通过这个属性可以获取动态参数

console.log(this.$route.params.id)

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

转载自vue面试题之二：路由 vue-router 面试题
全局前置守卫

const router = new VueRouter({})
router.beforeEach((to, from, next) = {
  // to do somethings
})

to:Route,代表要进入的目标，它是一个路由对象。

from:Route,代表当前正要离开的路由，也是一个路由对象

next:Function,必须需要调用的方法，具体的执行效果则依赖next方法调用的参数

next():进入管道中的下一个钩子，如果全部的钩子执行完了，则导航的状态就是comfirmed（确认的）
next(false):终端当前的导航。如浏览器URL改变，那么URL会充值到from路由对应的地址。
next(’/’)||next({path:’/’}):跳转到一个不同的地址。当前导航终端，执行新的导航。

注意：next 方法必须调用，否则钩子函数无法resolved

全局后置钩子

router.afterEach((to, from) = {
 // to do somethings
})

后置钩子并没有next函数，也不会改变导航本身。

路由独享钩子

beforEnter

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home，
      beforeEnter: (to, from, next) = {
        // to do somethings
        // 参数与全局守卫参数一样
    	}
    }
  ]
})

组件内导航钩子

const Home = {
  template: `,
  beforeRouteEnter(to, from, next){
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不能获取组件实例 ‘this’，因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next){
    // 在当前路由改变，但是该组件被复用时调用
    // 例：对于一个动态参数的路径 /home/:id,在/home/1 和 /home/2 之间跳转的时候
    // 由于会渲染同样的 Home 组件，因此组件实例会被复用，而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 'this'
  },
  beforeRouteLeave(to, from, next){
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 'this'
  }
}

beforeRouterEnter不能访问this，因为守卫在导航确认前被调用，因此新组建还没有被创建,可以通过传一个回调给 next 来访问组件实例。在导航被确认的时候执行回调，并把实例作为回调的方法参数。

const Home = {
  template: `,
  beforeRouteEnter(to, from, next){
    next( vm = {
      // 通过 'vm' 访问组件实例
    })
  }
}

20.vue路由跳转 ： path 和 name 的区别？

path 和 query 配合，类似与get跳转，path改变的地址栏

this.$router.push({
	path : "/index.html"   //path可以使用别名，
	query：{
		id : 1
	}
})

name 可以和params，query配合使用，params类似与post跳转 刷新会消失

this.$router.push({
	name : "classify",
	params : {
		id : 2
		}
})