面试题

Vue：

生命周期函数面试题

1. 什么是 vue 生命周期
   vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。

2. vue生命周期的作用是什么
   使用vue时， 用到所有功能都是围绕vue生命周期实现的，在生命周期的不同阶段调用对应的钩子函数来实现组件数据管理和DOM渲染两大重要功能

3. 第一次页面加载会触发哪几个钩子
   beforeCreate、created、beforeMount、mounted

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

**        mounted**：数据和DOM都已经被渲染出来了。使用场景：模板渲染成html后调用，通常是初始化页面完成后再对数据和DOM做一些操作，需要操作DOM的方法可以放在这里

vue路由面试题

1. mvvm 框架是什么？
   MVVM是Model-View-ViewModel的简写，即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。

2. vue-router 是什么？它有哪些组件？
   vue-router 是路由模块，主要来实现路由跳转。常用的组件有router-link、router-view

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

   active-class 属于vue-router的样式方法，当routerlink标签被点击时将会应用这个样式 使用有两种方法： 1.routerLink标签内使用： 首页 2.在路由js文件配置active-class 首页的active会一直被应用解决办法为了解决上面的问题，还需加入一个属性exact,类似也有两种方式：1.在router-link中写入exact： 首页2.在路由js文件,配置active-class

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

    5.vue-router 有哪几种导航钩子?
vue-router 的导航钩子，主要用来作用是拦截导航，让他完成跳转或取消。
有三种方式可以植入路由导航过程中：

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 方法调用的参数
  注意：next 方法必须要调用，否则钩子函数无法 resolved
  全局后置钩子：
    router.afterEach((to, from) => {
       // do someting
    });   后置钩子并没有 next 函数，也不会改变导航本身
2.路由独享钩子
  单个路由独享的导航钩子，它是在路由配置上直接进行定义的：
  cont router = new VueRouter({
     routes: [
        {
            path: '/file',
            component: File,
            beforeEnter: (to, from ,next) => {
                // do someting
            }
        }
      ]
  });3.组件内的导航钩子
  组件内的导航钩子主要有这三种：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave.
    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 可以正确访问到组件实例，所有没有必要使用回调

   6.route和router 的区别
$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，          name等路由信息参数。
而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等

   7.vue-router响应路由参数的变化
有时候需要在同一个路由下，只改变路由后面跟的参数值，当发生跳转的时候网址导航栏         确实改变了参数，但是页面数据却没有根据路由的参数发生改变，例如从 /user/foo 导航       到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创         建，复用则显得更加高效。**不过，这也意味着组件的生命周期钩子不会再被调用。
**

   方法一：         
        // 监听,当路由发生变化的时候执行
        watch:{  
            $route(to,from){    
                console.log(to.path);     
               // 对路由变化作出响应... 
            }
        },

   方法二：    在父组件的router-view上加个key     <router-view :key="$route.fullPath"></router-view>

2.查询参数搭配query，刷新页面数据不会丢失
3.接受参数使用this.$router后面搭配路由的名称就能获取到参数的值

     9.vue-router的两种模式
vue-router 默认 [hash](http://www.javanx.cn/tag/hash/ "查看所有文章关于 hash") 模式，还有一种是 [history](http://www.javanx.cn/tag/history/ "查看所有文章关于 history") 模式。
hash 模式的工作原理是 hashchange 事件，可以在window监听 hash 的变化。我们在            url 后面随便添加一个#xxxx就可以触发这个事件。
比如：

  window.onhashchange = function(event){
        console.log(event);
        // {
        //   ...
        //   oldUrl: 'http://xxxx#web',
        //   newUrl: 'http://xxxx#webxiu',
        // }
   }
   对象里面包含两个字段，oldUrl 和newUrl
   可以根据对应的 hash值做出相对应的操作，尽管改变hash，浏览器本身是没有任何请求服务器动作的，   但是页面状态和url已经关联起来了，这就是所谓的前端路由，单页应用的标配。

       history：

HTML5新增的API
1、history.pushState(data, title [, url])：向历史记录堆栈顶部添加一条记录； 
    data会在onpopstate事件触发时作为参数传递过去；
    title为页面标题，当前所有浏览器都会 忽略此参数；
    url为页面地址，可选，缺省为当前页地址；
2、history.replaceState(data, title [, url]) ：更改当前的历史记录，参数同上； 
3、history.state：用于存储以上方法的data数据，不同浏览器的读写权限不一样；
4、window.onpopstate：响应pushState或replaceState的调用；

有了这几个新的API，针对支持的浏览器，我们可以构建用户体验更好的应用了。
如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 
history.pushState API 来完成 URL 跳转而无须重新加载页面。当你使用 history 模式时，
URL 就像正常的 url，例如 http://xxx/webxiu。不过使用 history 模式时也需要注意，
还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，
当用户在浏览器直接访问 http://xxx/webxiu 就会返回 404，这就是非常不好的。
所以呢，我们需要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，
则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

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

 1.require==>  const Foo = resolve => require(['./Foo.vue'], resolve)

 2.使用import   import('@/views/index')

 3.使用webpack特有的require.ensure()。注：require.ensure 是 Webpack 的特殊语法，用来设置 code-split point
components: r => require.ensure([], () => r(require('@/components/Three')), 'group-home')

www.cnblogs.com/art-poet/p/…

vuex常见面试题:

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

   vuex是状态管理，在main.js引入store，注入。只用来读取的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。 

   使用场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车vuex是一种集中式状态管理模式，它按照一定的规则管理状态，保证状态的变化是可预测的。 

   state：定义初始化状态
   getters：获取状态
   mutations:设置状态 （只有这一步可以修改数据）
   actions：异步提交
   modules：把状态管理模块化，各自的组件构成各自的模块 

Vue常见面试题：

1. Vue组件间的通信
   常见使用场景可以分为三类：
   父子通信： 父向子传递数据是通过 props，子向父是通过 events（$emit）；通过父链 / 子链也可以通信（$parent / $children）；ref 也可以访问组件实例；provide / inject API；$attrs/$listeners 。 兄弟通信： Bus；Vuex 。 跨级通信： Bus；Vuex；provide / inject API、$attrs/$listeners。