前端面试题和答案杂记

该文章会一直更新，直到找到工作。工作后会视情况更新。
文章中可能会有一些错误或理解不到位的地方，请各位大佬指出，我会及时改正。

Vue面试题

生命周期函数

1. 什么是vue生命周期
   生命周期是指vue实例从创建之初到销毁的过程。
2. vue生命周期的作用
   在生命周期的不同阶段对应的不同钩子函数可以实现组件数据管理和DOM渲染
3. 第一次页面加载会触发哪几个钩子
   beforeCreate,created,beforeMount, mounted
4. created和mounted区别
   created时，实例已被初始化，但还没有挂在$el
   mounted时，render已被执行，数据已绑定，能够成功获取DOM
5. 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>

6. 如何获取dom