听阳光的猫

道阻且长、望你如一

0%

前端面试题

发表于 更新于 分类于
本文字数： 2.1k 阅读时长 ≈ 2 分钟

vue是一个基于数据响应的构建ui的前端库
data、method 、computed与watch的区别，指令和构造选项

vuex是vue提供的全局状态管理的库
state, getters, mutations, actions, modules

vue-router分两种模式hash和history分别怎么用，优缺点。路由守卫、嵌套路由、keep alive

如何封装axios，了解axios拦截器，请求、响应拦截器

三次握手是什么

part 1

  1. 让元素垂直居中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    //1.使用flex布局
    display: flex;
    align-items: center;
    justify-content: center;

    //2.使用定位
    //父 	
    position: relative;
    //子	
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

  1. 箭头的旋转

    1
    2
    3
    4
    5
    6
    7
    8
    9
    //箭头
    .arrow {
      transform-origin: 50% 25%;
      transition: transform 0.5s;
    }

    .menu:hover .arrow {
      transform: rotate(180deg);
    }

  2. 响应式布局

    1
    2
    3
    4
    5
    @meida (max-width: 768px) {
      .box {
        background: #00f;
      }
    }

  3. promise的封装

    1
    2
    3
    4
    5
    6
    7
    8
    // 请将setTimeout封装成一个promise
    function sleep(time) {
      return new Promise(resolve => {
        setTimeout(resolve, time * 1000)
      })
    }

    sleep(5).then(() => console.log('hello'))

  4. 简单实现一个深拷贝

    Object.assign 浅拷贝

    lodsh 深拷贝

part 2

  1. 左上右下的布局

    1
    2
    3
    4
    5
    6
    //父
    display: flex;
    justify-content: space-between;

    //第二个元素 :nth-0f-type(2)
    align-self: flex-end;

  2. CSS中的BFC(Block Formatting Context)块级格式上下文

    看作是一个隔离功能的容器，里面的布局不会影响到外部的元素。

    浮动、绝对定位、固定定位可以触发BFC

    具体使用：阻止浮动元素的覆盖，左边定宽右边自适应

  3. js的数据类型有哪些

    基本类型主要是： Undefined、Boolean、String、Number、Null、Symbol、BigInt

    引用数据类型统称为 Object 对象，主要是：对象、数组、函数、日期和正则

  4. 什么是深浅拷贝

  5. vue2.0有哪些钩子，做了什么事情

  6. 实例销毁之前做什么事情

  7. 向后台发送的业务请求写在哪里

  8. vue3.0生命周期上面的改变

  9. vue组件如何进行通信

part 3

  1. 如何理解前端
  2. CSS：什么是BFC
  3. HTTP：什么是同源策略？怎么跨域？
  4. JS：什么是闭包？有什么作用？
  5. Vue：什么是数据响应式？怎么实现？
  6. Node：什么是EventLoop？
  7. 算法：说出任意一种nLogn的的排序算法？
  8. React：类组件与函数组件的区别？
  9. JS：函数的防抖和节流是什么？

part 4

  1. TS vs JS的区别interface和type的区别
  2. Promise有几个API，Promise.all和Promise.race的区别
  3. 参数里面或者赋值能否用…
  4. 绝对居中的布局
  5. Vue.sync有什么用
  6. computed与watch的使用场景有什么区别
  7. Vuex、VueRouter
  8. axios的拦截器
  9. AJAX跨域 JSONP
  10. 快速排序、归并排序的思路，复杂度

part 5

  1. JS的闭包是什么
  2. Promise可以用来做什么，避免回调地狱
  3. 如何使用JS实现Promise.all
  4. Vue如何实现数据响应式，数据劫持和数据监听
  5. 什么时候使用watch、computed
  6. Vuex是一个什么库
  7. VueRouter里面的守卫如何使用，beforeEach
  8. webpack有哪些常用的loader或plugin，优化思路
  9. TypeSCript里面的never用法是什么

part 6

  1. JS

    闭包、立即执行函数、ES6、Promise.all、setter/getter

  2. AJAX

    JSONP、CORS

  3. Vue

    VueRouter、路由守卫、Vue响应式原理、definePro

    axios拦截器、conputed & watch & methods 、Vue.set

  4. 排序算法

    冒泡、计数

  5. HTTP

    缓存（expire、cache-control）

    304（ETag、LastModified）

part 7

  1. 如何理解html语义化
  2. CSS盒模型有哪些
  3. Promise的用法与缺点
  4. resolve、reject，then、catch
  5. JSONP跨域与AJAX的区别及缺点
  6. http 请求
  7. 深拷贝 递归/区别
  8. 如何实现数组去重

part 8

  1. 函数防抖和节流分别是什么
  2. 闭包是什么
  3. DOM事件委托是什么
  4. HTTP里面GET/POST的区别
  5. Vue Router是如何使用的
  6. 快速排序的思路