面试收集_vue use 并将组件挂着window上-CSDN博客

本文链接：https://blog.csdn.net/weixin_45481771/article/details/114656572

1、 rem 和 em 的区别

em 特点：是根据字体的大小决定的，大小取决于父组件的大小
rem 特点：根据 html 根目录的字体大小来计算，rem 还可以设置元素的宽高

2、水平垂直居中方法

absolute + 负 margin：已知父子元素宽高

// 父组件
position： relative；

// 子组件
position: absolute;
top: 50%;
left: 50%;
margin-left: -XX px;
margin-top: -XX px;

absolute + margin auto：要求居中元素固定宽高子元素各个方向距离都是 0，再设置 margin 为 auto。
absolute + calc：要求宽高固定

position: absolute;;
top: calc(50% - XXpx);
left: calc(50% - XXpx);

absolute + transform: 不需要元素固定宽度

// 子元素
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

flex：

// 父元素
display: flex;
justify-content: center;
align-items: center;

3、标准盒模型和 ie 盒模型

标准盒模型：不包括 padding、border
ie 盒子模型：包括 padding、border
使用 box-sizing: border-box;就是为了在设置有 padding 值和 border 值的时候不把宽度撑开

4、Css 可继承元素

可以继承的属性很少，只有颜色，文字，字体间距行高对齐方式，和列表的样式可以继承。

所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

5、Webpack 去除 console

在webpack4后可以通过插件（terser-webpack-plugin）来实现该功能


module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        sourceMap: true, // Must be set to true if using source-maps in production
        terserOptions: {
          compress: {
            drop_console: true,
          },
        },
      }),
    ],
  },
};

6、Promise async await

Promise：是异步的解决方案，Promiase好比容器里面存放着未来才会执行完毕的事件一旦生成无法改变
async await：是异步最佳解决方案，遵循是Generator函数的语法糖，内置有执行器，不需要额外调用，返回的是一个promise。
区别： promise是Es6，async/await是ES7， async的写法更加优雅简介，promise错误可以通过catch来捕捉，前者可以使用.then也可以使用try-catch。

7、axios 封装

什么是axios：一个轻量的HTTP客户端，基于XMLHttpRequest服务来执行HTTP请求，支持丰富的配置，支持promise

8、vue.use

全局注册插件的方法，每次注册前都会判断这个组件是否注册过，如果注册过，就不会再次注册。

9、浏览器存储

cookie：服务器发送到用户浏览器并保存在本地的一小块数据，一般是后端设置，通过request流发给前端并设置过期信息。存储空间只有4k，时间有限制，每次发送请求的时候都会将它带上。
localStorage：生命周期永久的，除非用户手动清除，否则会一直保存在浏览器中。以键值对的形式存储数据，可以存储数组，数字，对象。
sessionStorage：和localStorage一样，区别就是页面刷新会清除。
indexDB 是一种浏览器存储大量数据的方法，它创造一个对象仓库，存储的都是JS对象，所有的操作的是异步的，都是请求-响应模式，有同源限制

10、hash 和 history

hash：URL中#符号，hash会出现在URL中但不会被包括在HTTP请求中，对后端完全没有影响
history：利用了H5的History interface中新增的pushState()和replaceState()方法，执行修改时改变当前的URL，但不会立即向后端发送请求，不怕前进后退，刷新就会请求服务器

11、Git 命令

git clone 克隆代码
git add . 提交到暂存区
git commit -m 提交修改备注
git push 上传到指定分支
git pull 拉取代码
git log 查看提交记录
git checkout 恢复上次暂存区所有文件到工作区

12、路由权限

初始化就挂载全部路由，并在路由上标记相应的的权限信息，每次跳转前做校验。

13、闭包优缺点

闭包：指有权访问另外一个函数作用域中的局部变量的函数，声明在一个函数中的函数。
特点：外部访问函数内部变量成为可能，局部变量会常驻内存中，可以避免使用全局变量，防止污染，会造成内存泄漏。
缺点：滥用造成页面性能问题

14、全局作用域和局部作用域

全局作用域：在任何地方都能被访问，window对象下的内置属性都是全局作用域
局部作用域：在固定的代码中访问

15、vuex 管理

什么是Vuex：是一个专门为vue开发的状态管理插件，采用集中式存储管理应用的所有组件的状态，更改状态的唯一方法就是提交mutation
Vuex解决了什么：多个组件依赖同一个状态，来自不同组件的行为需要改变同一状态。
核心属性：state、getters、mutations、actions、modules
state：状态存储在state中改变就是提交mutation
getter：监听属性值的变化
action：因为mutation不能处理异步程序需要actions处理，action不能自己定义方法，都是通过mutations中的方法改变
mutations：改变state中状态的唯一途径就是提交mutation

16、scoped 为什么可以使样式在当前文件生效

添加scoped时页面生成属性就会添加一串唯一的标识

17、防抖和节流

防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行，例如：在触发点击事件后，如果用户再次点击了，我们会清空之前的定时器，重新生成一个定时器。意思就是：这件事儿需要等待，如果你反复催促，我就重新计时
节流：指定时间间隔内只会执行一次任务，例如：滚动条计算，用户点击按钮

18、为什么使用虚拟 DOM

虚拟DOM 就是一个映射的Javascript对象，如果需要改变任何元素的状态就在虚拟dom上改变
虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操作，从而提高性能
大量的UI变化使用虚拟dom，操作不频繁的话直接操作dom会比较好