2022年面试题(1)总结及答案

733 阅读4分钟

1.css优先级权重以及样式层级

(1)权重优先级:

  • 通配符 0
  • 标签选择器、伪元素选择器:1
  • 类选择器、伪类选择器、属性选择器:10
  • id 选择器:100
  • 内联样式:1000

(2)优先级顺序为:

内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式

2.数据类型有哪些?

  • 栈:基本数据类型:Undefined、Null、Boolean、Number、String
  • 堆:引用数据类型:Object、Symbol、BigInt

3.数据类型检测的方式有哪些?

  • typeof 其中数组、对象、null都会被判断为object,其他判断都正确
  • instanceof instanceof只能正确判断引用数据类型,而不能判断基本数据类型。instanceof 运算符可以用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性
  • constructor constructor有两个作用,一是判断数据的类型,二是对象实例通过 constrcutor 对象访问它的构造函数。需要注意,如果创建一个对象来改变它的原型,constructor就不能用来判断数据类型了
  • Object.prototype.toString.call() Object.prototype.toString.call() 使用 Object 对象的原型方法 toString 来判断数据类型

4.水平垂直方法有哪几种?只列出三种

(1)

    position: fixed;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);

(2)

    position: absolute;
    margin: auto;
    left:0;
    top:0;
    bottom: 0;
    right: 0; 

(3)

    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100rpx;
    margin-left: -100rpx; 

4.position的属性有哪些?区别是?

微信图片_20220214160005.png

5.vue响应式原理?

  • 当一个Vue实例创建时,Vue会遍历data中的属性,用 Object.defineProperty(vue3.0使用proxy )将它们转为 getter/setter,并且在内部追踪相关依赖,在属性被访问和修改时通知变化。 每个组件实例都有相应的 watcher 程序实例,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的setter被调用时,会通知watcher重新计算,从而致使它关联的组件得以更新。

6.data为什么是一个函数而不是对象?

  • JavaScript中的对象是引用类型的数据,当多个实例引用同一个对象时,只要一个实例对这个对象进行操作,其他实例中的数据也会发生变化。而在Vue中,更多的是想要复用组件,那就需要每个组件都有自己的数据,这样组件之间才不会相互干扰。

7.key的作用?

  • Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes。如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key,它会基于key的变化重新排列元素顺序,并且会移除key不存在的元素。

8.vue组件通信方式?

  • 父组件传值给子组件,子组件使用props进行接收
  • 子组件传值给父组件,子组件使用$emit+事件对父组件进行传值
  • 组件中可以使用$parent$children获取到父组件实例和子组件实例,进而获取数据
  • 使用$attrs$listeners,在对一些组件进行二次封装时可以方便传值,例如A->B->C
  • 使用$refs获取组件实例,进而获取数据
  • 使用Vuex进行状态管理
  • 使用eventBus进行跨组件触发事件,进而传递数据
  • 使用provideinject,官方建议我们不要用这个,我在看ElementUI源码时发现大量使用
  • 使用浏览器本地缓存,例如localStorage

9.表现与数据分离、web语义化的理解

表现与数据分离、web语义化的理解 参考回答

10.Vite的优势?和webpack有啥区别?

优势:

  • 极速启动
  • 模块热更新
  • 丰富的功能
  • 优化构建
  • 通用插件
  • 完全类型化的api

区别

bbs.huaweicloud.com/blogs/27109… 这个讲解详细

11.闭包如何理解?用途?

闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,创建的函数可以访问到当前函数的局部变量

闭包有两个常用的用途;

  • 可以使我们在函数外部能够访问到函数内部的变量;
  • 可以使已经运行结束的函数上下文中的变量对象继续留在内存中,因为闭包函数保留了这个变量对象的引用,所以这个变量对象不会被回收。

12.如何给对象添加一个属性,不丢失其响应式?

this.$set(obj,"propertyName","value")

13.axios如何封装?Post如何传递FormaData参数?

import axios from './http';
import qs from 'qs';

const api = {
  async get(url, data) {
    let dataNew = data;
    let time = (new Date()).valueOf();
    if(dataNew) {
      dataNew.time = time
    }
    try {
      let res = await axios.get(url, {
        params: dataNew
      })
      res = res.data
      return new Promise((resolve, reject) => {
        if (res.code === 200) {
          resolve(res)
        } else {
          reject(res)
        }
      })
    } catch (err) {
      alert('服务器出错')
      console.log(err)
    }
  },
  async post(url, data) {
    try {
      let res = await axios.post(url, qs.stringify(data))
      // let res = await axios.post(url, data)
      res = res.data
      return new Promise((resolve, reject) => {
        if (res.code === 200) {
          resolve(res)
        } else {
          reject(res)
        }
      })
    } catch (err) {
      alert('服务器出错')
      console.log(err)
    }
  }
}

export { api }
  • npm 下载qs库:npm install qs -S
  • 在vue项目页面或者封装的axios中引用: import Qs from 'qs';
  • qs主要有两种使用方法:qs.stringify()和qs.parse();
  • qs.stringify():将json或者数组对象序列化成url的形式;以&进行拼接
  • qs.parse():将url解析成对象形式;

15.vue 后台管理系统菜单权限控制如何实现?

segmentfault.com/a/119000001…

16.管理bug系统

easybug 比较老

17.代码管理工具

svn/git