关于javascript:前端面试题和答案杂记

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

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