vue全家桶面试题

vue的生命周期

1. 什么是 vue 生命周期

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

每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。

1. 实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作

2. 挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取

3. 接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取

4. 接下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情…

5. 当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿

6. 当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom

7. 当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等

8. 组件的数据绑定、监听…去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以

2.vue生命周期的作用是什么

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

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

第一次加载会触发 beforeCreate、created、beforeMount、mounted

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

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

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

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

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

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

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

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

5.created和mounted的区别

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

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

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

看实际情况，一般在 created（或beforeRouter） 里面就可以，如果涉及到需要页面加载完成之后的话就用 mounted。

在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素
而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点，（此时document.getelementById 即可生效了）。

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

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

• 创建前/后： 在beforeCreated阶段，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结构依然存在

vue路由面试题（vue-router）

1.mvvm 框架是什么？

• MVVM

MVVM是把MVC的Controller和MVP的Presenter改成了ViewModel。

View的变化会自动更新到ViewModel，ViewModel的变化也会自动同步到View上显示。这种自动同步是因为ViewModel中的属性实现了Observer，当属性变更时都能触发对应的操作。

• MVC

MVC是应用最广泛的软件架构之一，一般MVC分为：

Model（ 模型 ）、Controller（ 控制器 ）、View（ 视图 ）。

这主要是基于分层的目的，让彼此的职责分开。View一般通过Controller来和Model进行联系。Controller是Model和View的协调者，View和Model不直接联系。基本联系都是单向的。
1、View 传送指令到 Controller
2、Controller 完成业务逻辑后，要求 Model 改变状态
3、Model 将新的数据发送到 View，用户得到反馈

• MVP

MVP 模式将 Controller 改名为Presenter，同时改变了通信方向。
1、各部分之间的通信，都是双向的。
2、View 与 Model 不发生联系，都通过 Presenter 传递。
3、View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

MVVM模式的优点以及与MVC模式的区别

• MVVM模式的优点：

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

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

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

4、可测试：界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

• MVVM 和 MVC 的区别：

mvc和mvvm其实区别并不大。都是一种设计思想。

主要区别

mvc 中 Controller演变成 mvvm 中的 viewModel，

mvvm 通过数据来显示视图层而不是节点操作。

mvvm主要解决了:

mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

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

vue-router 是 vue 的路由插件,

组件：router-link router-view

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

• active-class是 vue-router模块中 router-link 组件中的属性，主要作用是用来实现选中
  样式的切换。

• active-class使用方法

1、直接在路由js文件中配置linkActiveClass

export default new Router({
  linkExactActiveClass: 'active',
})

2、在router-link中写入exact

<router-link to="/" class="menu-home" active-class="active" exact>首页</router-link>

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

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

获取传过来的值
使用 router 对象的 params.id 获取

示例

第一个页面

<div>
    <a href="javascript:void(0)" @click="getDetail(1)">
        去第二个页面
    a>
div>


<script>
export default {
  name: 'app',
  methods:{
    getDetail(id) {
      this.$router.push({
        name: 'login',
        params: {
          id: id
        }
      })
    }
  }
}
script>

第二个页面

export default {
  name: 'login',
  data () {
    return {
      uid:this.$route.params.id,
      msg: '这是第二个页面'
    }
  },
 mounted: function() {
      console.log(this.uid);
  },
}

路由定义（解决如果刷新login页面，将失去传值）

{
path: ':id',
component: login
}

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

1. 导航钩子的作用
   vue-router 的导航钩子，主要用来作用是拦截导航，让他完成跳转或取消。

2. 植入路由导航的方式

   • 全局的

   • 单个路由独享守卫

   • 组件级路由守卫

• 1.全局导航钩子

全局导航钩子主要有两种钩子：前置守卫、后置钩子，

注册一个全局前置守卫：

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

这三个参数 to 、from 、next 分别的作用：

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

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

3. next: Function，这是一个必须需要调用的方法，而具体的执行效果则依赖 next 方法调用的参数

   a. next()：进入管道中的下一个钩子，如果全部的钩子执行完了，则导航的状态就是 confirmed（确认的）
   b. next(false)：这代表中断掉当前的导航，即 to 代表的路由对象不会进入，被中断，此时该表 URL 地址会被重置到 from 路由对应的地址
   c. next(‘/’) 和 next({path: ‘/’})：在中断掉当前导航的同时，跳转到一个不同的地址
   d. next(error)：如果传入参数是一个 Error 实例，那么导航被终止的同时会将错误传递给 router.onError() 注册过的回调

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

对于全局后置钩子：

router.afterEach((to, from) => {
    // do someting
});

不同于前置守卫，后置钩子并没有 next 函数，也不会改变导航本身

• 2.路由独享的钩子beforeEnter

顾名思义，即单个路由独享的导航钩子，它是在路由配置上直接进行定义的：

cont router = new VueRouter({
    routes: [
        {
            path: '/file',
            component: File,
            beforeEnter: (to, from ,next) => {
                // do someting
            }
        }
    ]
});

至于他的参数的使用，和全局前置守卫是一样的

• 3.组建内的导航钩子

组件内的导航钩子主要有这三种：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。他们是直接在路由组件内部直接进行定义的

我们看一下他的具体用法：

const File = {
    template: `
This is file`,
    beforeRouteEnter(to, from, next) {
        // do someting
        // 在渲染该组件的对应路由被 confirm 前调用
    },
    beforeRouteUpdate(to, from, next) {
        // do someting
        // 在当前路由改变，但是依然渲染该组件是调用
    },
    beforeRouteLeave(to, from ,next) {
        // do someting
        // 导航离开该组件的对应路由时被调用
    }
}

需要注意是：

beforeRouteEnter 不能获取组件实例 this，因为当守卫执行前，组件实例被没有被创建出来，剩下两个钩子则可以正常获取组件实例 this

但是并不意味着在 beforeRouteEnter 中无法访问组件实例，我们可以通过给 next 传入一个回调来访问组件实例。在导航被确认是，会执行这个回调，这时就可以访问组件实例了，如：

beforeRouteEnter(to, from, next) {
    next (vm => {
        // 这里通过 vm 来访问组件实例解决了没有 this 的问题
    })
}

注意，仅仅是 beforRouteEnter 支持给 next 传递回调，其他两个并不支持。因为归根结底，支持回调是为了解决 this 问题，而其他两个钩子的 this 可以正确访问到组件实例，所有没有必要使用回调

最后是完整的导航解析流程：

1. 导航被触发
2. 在失活的组件里调用离开守卫
3. 调用全局的 beforeEach 守卫
4. 在重用的组件里调用 beforeRouteUpdate 守卫
5. 在路由配置里调用 beforEnter
6. 解析异步路由组件
7. 在被激活的组件里调用 beforeRouteEnter
8. 调用全局的 beforeResolve 守卫
9. 导航被确认
10. 调用全局的 afterEach 钩子
11. 触发 DOM 更新
12. 在创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数

6.$route 和 $router 的区别

router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经常用的跳转链接就可以用this.$router.push，和router-link跳转一样。。。

route相当于当前正在跳转的路由对象。。可以从里面获取name,path,params,query等。。

7.vue-router响应路由参数的变化

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

复用组件时，想对路由参数的变化作出响应的话，你可以简单地watch (监测变化) $route 对象：

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
}

或者：

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

注意是：

（1）从同一个组件跳转到同一个组件。

（2）生命周期钩子created和mounted都不会调用。

8.vue-router传参

1.query方式传参和接收参数
传参:

this.$router.push({
        path:'/xxx',
        query:{
          id:id
        }
      })

接收参数:
this.$route.query.id
注意:传参是this.$router,接收参数是this.$route,这里千万要看清了！！！

2.params方式传参和接收参数
传参:

this.$router.push({
        name:'xxx',
        params:{
          id:id
        }
      })

接收参数:
this.$route.params.id
注意：params传参，push里面只能是 name:‘xxxx’,不能是path:‘/xxx’,因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！

另外，二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示

9.vue-router的两种模式（hash，history）

vue-router有两种模式，hash模式和history模式

1. hash模式（vue-router默认hash模式）

hash模式背后的原理是onhashchange事件。

window.onhashchange=function(){
 let hash=location.hash.slice(1);
 document.body.style.color=hash;
}

（localtion是js里管理地址栏的内置对象，是window对象的一部分，可通过window.localtion访问，在w3cshool里的详细介绍)
由于hash发生变化的url都会被浏览器记录下来，使得浏览器的前进后退都可以使用了，尽管浏览器没有亲求服务器，但是页面状态和url关联起来。后来人们称其为前端路由，成为单页应用标配。
比如http://www.abc.com/#/index，hash值为#/index。hash模式的特点在于hash出现在url中，但是不会被包括在HTTP请求中，对后端没有影响，不会重新加载页面。

2. history模式

history模式利用了HTML5 History Interface中新增的pushState()和replaceState()方法。MDN相关介绍（需要特定浏览器支持）。这两个方法应用于浏览器的历史记录栈，提供了对历史记录进行修改的功能。只是当他们进行修改时，虽然修改了url，但浏览器不会立即向后端发送请求。
当使用history模式时，url就像正常的url,例如http://abc.com/user/id相比hash模式更加好看。特别注意，history模式需要后台配置支持。如果后台没有正确配置，访问时会返回404。
通过history api，我们丢弃了丑陋的#，但是有一个缺点，当刷新时，如果服务器中没有相应的相应或者资源，会分分钟刷出一个404来（刷新需要请求服务器）。所以history模式不怕前进，不怕后退，就怕刷新。

3. hash模式和history模式相比较

• pushState()设置新的url可以是和当前url同源的任意url;hash只可修改#后面的部分，只能设置当前url同文档的url。

• pushState()设置的新url可与当前url一致，这样也会把记录添加到栈中；hash必须设置与当前url不同的url的，才会触发动作将记录添加到栈中。

• pushState()通过stateObject参数可以添加任意类型的数据到记录中；hash只可添加短字符串。

• pushState()可额外设置title属性供后续使用。
  不过，hash模式也有比history模式优势的地方。

• hash模式下，仅hash符号之前的url会被包含在请求中，后端如果没有做到对路由的全覆盖，也不会返回404错误。

• history模式下，前端的url必须和实际向后端发起请求的url一致，如http://abc.com/user/id,后端如果没有对user/id的路由处理，将返回404错误。

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

结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载

在项目router/index.js文件中将

import Recommend from 'components/recommend/recommend'

更改为

//方法1：
const Recommend = () => import('components/recommend/recommend')

//方法2：
const Recommend = (resolve) => {
  import('components/recommend/recommend').then((module) => {
    resolve(module)
  })
}

即可实现路由懒加载的效果

11.vue-router怎么重定向页面？

路由中配置redirect属性

12. vue-router怎么配置404页面？

// router.js
export default new Router({
  mode: 'history',
  routes: [
    // ...
    {
      name: '404',
      path: '/404',
      component: () => import('@/views/notFound.vue')
    },
    {
      path: '*',    // 此处需特别注意至于最底部
      redirect: '/404'
    }
  ],
})

13 vue跳转新路由 滚动到固定位置

export default new Router({
  // mode: 'history',  //可以去掉url中的#。但是打包后需要后台配置，否则会404
  routes: routerMap,
  scrollBehavior(to, from, savedPosition) { //设置回到顶部
    if (savedPosition) {
        return savedPosition
    }
    return {x: 0, y: 0}
  }   
})

14. vue 路由去掉#

路由代码中添加mode：‘history’

const router = new Router({
  mode: 'history',  //去掉url中的#
})

vue常见面试题

1.vue优点

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

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

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

• 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

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

1.父组件将数据绑定在子组件上

<template>
  <transition name="slide">
    <music-list :songs="songs" :title="title" :bg-image="bgImage">music-list>
  transition>
template>

2.子组件接受数据props

export default {
  props: {
    bgImage: {
      type: String,
      default: ''
    },
    songs: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    }
  },
}

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

在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了

父组件

<template>
  <div>
    <child @fatherMethod="fatherMethod">child>
  div>
template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
script>

子组件

<template>
  <div>
    <button @click="childMethod()">点击button>
  div>
template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$emit('fatherMethod');
      }
    }
  };
script>

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

一般来说，v-show有更高的初始渲染开销，而v-if有更高的切换开销。
v-if更适合条件不经常改变的场景（运行条件不太改变），而v-show适用于频繁切换条件。
相同：v-show 和 v-if 都能控制元素的显示和隐藏。
不同：

• v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏，切换性能好
• v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果，渲染性能好

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

将当前组件的修改为