该文章会始终更新，直到找到工作。工作后会视状况更新。
文章中可能会有一些谬误或了解不到位的中央，请各位大佬指出，我会及时改过。

Vue面试题

生命周期函数

  1. 什么是vue生命周期
    生命周期是指vue实例从创立之初到销毁的过程。
  2. vue生命周期的作用
    在生命周期的不同阶段对应的不同钩子函数能够实现组件数据管理和DOM渲染
  3. 第一次页面加载会触发哪几个钩子
    beforeCreate,created,beforeMount, mounted
  4. created和mounted区别
    created时，实例已被初始化，但还没有挂在$el

mounted时，render已被执行，数据已绑定，可能胜利获取DOM

  1. vue获取数据在哪个周期

created，因为这时vue实例已被创立，并且还未渲染Element

vue路由

  1. mvvm框架是什么？
    即model-view-viewModel

  2. vue-router是什么？有哪些组件？
    vue-router是由vue官网公布的一个路由库。
    其组件包含：

    • <router-link></router-link> 用于路由跳转，应用该组件进行路由跳转，页面会进行部分加载，而不是刷新页面
    • <router-view></router-view> 子路由的进口
    • <keep-alive></keep-alive> 被该组件包裹的组件，会使被蕴含的组件保留状态，防止从新渲染
  3. activa-class 是哪个组件的属性？
    activa-class 是<router-link>的属性，用于标识被激活的路由的class

  4. 怎么定义vue-router的动静路由？怎么获取传递过去的值？
    'router/:id'。
    获取路由参数：

    • 通过URL传递的参数（'router/login?username=abc'）, this.$route.query
    • 通过动静路由传递的参数（ {path: 'router/news/:id'} 'router/news/12'）, this.$route.params

  5. vue-router 有哪几种导航钩子？
    导航钩子次要分为三局部，全局钩子和路由钩子和组件内钩子。
    全局钩子有三个
    全局前置钩子（beforeEach）

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

    当一个导航触发时，全局前置守卫依照创立顺序调用，守卫是异步解析执行，此时导航在所有守卫resolve完之前始终处于期待中。
    每个守卫承受3个参数：
    to: Route: 行将要进入的指标路由对象
    from: Route: 导航正要来到的路由
    next: Function: 肯定要执行该办法来resolve这个钩子。执行成果依赖next办法的调用参数。
    next()：进行管道中的下一个钩子，如果全副钩子执行结束，则导航状态就是confirmed(确认的)
    next(false)：中断以后导航，如果浏览器的URL扭转了（可能用户手动或者浏览器后退按钮），那么URL地址会重置到from路由对应的地址。
    next(error):如果传入next的参数是一个Error实例，则导航会被终止且该谬误会被传递给router.onError()注册过的回调
    next('/')或者next({path: '/'}):跳转到一个不同的地址。以后导航被中断，而后进行一个新的导航。你能够向next()传递任意地位对象，且容许传递在router-link的to或者router.push中的选项
    全局解析钩子
    在 2.5.0+ 你能够用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 相似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
    全局后置钩子

     router.afterEach((to, from) => {    // to do something })
  6. route 和 router的区别
    router是VueRouter的实例，是一个全局路由对象，蕴含了路由跳转的办法，钩子函数等。
    route 是路由信息对象，每一个路由都会有一个route对象，是一个部分对象，蕴含了path,params,hash,query,fullPath,matched,name等路由信息。

  7. vue-router响应路由参数变动
    两种计划
    watch

    watch: {  $route(to, from) {      // do to something  }}

    组件内导航钩子 beforeRouteUpdate

      beforeRouteUpdate(to, from, next) {      // to do something  }

  8. vue-router 传参
    与$route耦合
    通过prop

    与$route耦合

     const User = {   template: '<div>User {{ $route.params.id }}</div>' }

    通过prop

      const User = {      props: ['id'],      template: '<div>User {{ id }}</div>'  };  const router = new VueRouter({      routers: [      { path: '/user/:id', component: User, props: true }      ],  })

    布尔模式： 如果props被设置为true，route.params将会被设置为组件属性。
    对象模式：如果props是一个对象，它会被原样设置为组件属性。当props是动态的时候有用。
    函数模式：你能够创立一个函数返回props。这样你便能够将参数转换称为另一种类型，将动态值与基于路由的值联合等等

  9. vue-router的两种模式

    • hash
      原理是onhashchange事件,能够在window对象上监听该事件
    • history
      利用了HTML5 History interface中新增的pushState()和replaceState()办法

  10. vue-router实现路由懒加载

     const router = new VueRouter({   routes: [       {path: '/foo', component: import('./Foo.vue')},   ], })

vue常见问题

  1. vue父组件向子组件传递数据

    • 通过prop向子组件传值
      prop是你能够在组件上注册一些自定义的attribute。当一个值传递给一个prop attribute的时候，他就变成了这个组件实例的一个property。

      Vue.component('blog-post', {  props: ['title'],  template: '<h3>{{ title }}</h3>'});
      <blog-post title="My journey with Vue"></blog-post>
      • 通过插槽散发内容

      • 通过ref
        $ref能间接拜访在标签上设置了ref数据子组件实例

        <base-input ref="usernameInput"></base-input>
        this.$refs.usernameInput

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

    • 应用事件抛出值

       Vue.component('blog-post', {  method: {      sendValue: () => {          this.$emit('custom-event-name', value)      },  } })
      <blog-post @custom-event-name="value += $event"></blog-post>

    • 应用v-model
      要应用v-model就首先须要了解v-model。

      <input v-model="searchText">

      等价于：

        <input   v-bind:value="searchText"   v-on:input="searchText = $event.target.value"  >

      事实上，v-modal就是v-bind:value 和 v-on:input的糖语法。
      当用在自定义组件上时，v-model则会是这样：

      <custom-input v-model="searchText"></custom-input>

      为了能使其失常工作，咱们须要在这个组件的input上：

        Vue.component('custom-input', {      props: ['value'],      template: `          <input           v-bind:value="value"           v-on:input="$emit('input', $event.target.value)"          >      `  });
      • 将其value arrtribute绑定到一个名叫value的prop上
      • 在其input事件被触发的时候，将新的值通过自定义的input事件抛出
  3. v-show和v-if的共同点和不同点
    两个指令都能使元素或组件暗藏，区别在于设置v-show="false"的元素（组件）依旧会被渲染，只是设置display=none。而设置v-if="false"的元素（组件）,则不会被渲染。
  4. 如何让css只在以后组件内其作用？
    <style scoped>
  5. 在设置了scoped后，父组件如何影响子组件的style

应用>>>或者deep

    .gHeader /deep/ .name {        }        // 或者    .gHeader >>> .name {        }
<div class="gHeader">    <div class="name></div></div>
  1. 如何获取dom
  • ref