基础知识点梳理

项目

项目难点、解决方案

表格列可拖拽排序：注册每一个单元格的mousedown事件、记录点击位置，单元格和行信息等，注册文档的mousemove事件，设置悬浮层位置，mouseup事件判断列索引，交换两列数据，然后删除事件监听，清空悬浮层

封装的echarts图表视图不更新：将通用的echarts图表封装成组件，series数据通过父组件props传值，当父组件切换选项重新获取数据后echarts视图不更新。。。最终通过给子组件添加key值，每次获取到新的数据更改key值触发组件强制更新

封装

提取视频关键帧上传图片：video canvas blob

sqlite增删改查的函数

性能优化

减少网络请求 静态资源优化 三方类库CDN 第三方库按需引入

路由组件懒加载 component:()=>import(“”)

图片懒加载（进入视图加载）

减少dom操作 1.创建文档碎片 2.高频监听事件用节流防抖

package.lock.json的作用

• 记录间接依赖版本（依赖的依赖）
• 描述了生成的确切树，以便后续安装能够生成相同的树，而不管中间依赖项更新如何
• 使多人开发可以跨越时间和环境保持项目依赖的一致性

JWT和基于会话鉴权方式的比较

JWT（JSON WEB TOKEN）：用户登录后、服务器将header+payload+signature通过签名算法生成token返回给客户端，客户端将token存储到本地（localstorage、cookie），以后的请求将token字符添加到请求头中，服务器收到请求时解析token，使用秘钥验证签名，从而识别用户身份和权限

特点：无状态的，适用于分布式、跨域场景

基于会话鉴权：用户登录后，服务器创建一个会话，并将对应的session ID发送给客户端，客户端将session ID存到cookie中，并在后续请求中将session ID发送给服务器，服务器接收到session ID后查找对应会话信息，以验证用户身份和权限

特点：cookie有跨域限制，依赖于服务器会话存储，适用于单一域名下

双token实现无感刷新

登录获取access_token和refresh_token，access_token过期时间比refresh_token短

access_token过期后在axios响应拦截器拦截，将请求数据添加到数组保持pending状态

api携带refresh_token去获取新的access_token，成功后遍历请求数组重新请求

需要添加一个开关过滤掉重复的获取access_token请求

框架

require.context

require.context()是webpack的api，可以实现同类文件自动导入

vue-router两种模式

hash模式是通过监听hashChange事件来实现的、#后面不会出现在请求url中，改变 hash 不会重新加载页面

history模式是通过pushState方法+popstate事件(H5新特性)来实现的、刷新页面后会请求完整路径、后端不做拦截会造成404

vue scoped原理及样式穿透

scoped：给组件内每个元素添加data-v-hash的属性，并给最后一个选择器添加属性选择器（data-v-hash），使样式只能作用于当前组件

样式穿透：父组件内想更改第三方组件样式，也不想去除scoped，通过>>> ::v-deep /deep/等方式可让子组件选择器不带hash标识，而是在父组件中的上一级选择器带上hash标识，这样可以局部更改样式且不影响封装好的组件

vue3 和 vue2 的区别

• v-if 和 v-for 优先级的问题
• 生命周期
• 响应式原理

vue3 相对于 vue2 的优化

• diff算法优化，给没有变化的节点添加静态标记避免无用节点比对消耗性能
• defineProperty改为proxy代理，避免新增或删除页面无法响应，同时支持监听数组变化
• fragment避免无用的层级嵌套
• 支持ts
• 组合式API更加合理

vue中的$nextTick有什么作用？

用来获取数据变化-更新后的dom，本质是一种优化策略、避免数据重复改变引起不必要的视图更新

vue中的响应式数据发生变化后不会立即更新视图、而是会开启一个异步任务队列、等所有数据变化完成后再更新视图

computed和watch的区别

computed：源数据逻辑处理后得到的新数据、具有缓存特性，多次调用只有第一次计算、后续调用缓存值、源数据变化后再重新计算

watch：监听数据变化、完成相应逻辑

MVC和MVVM之间的区别

MVC将应用抽象为数据层（Model）、视图层（View）、逻辑层（controller），是单向数据流动，controller起承上启下的作用，数据变化需要手动更新视图

MVVM是抽离视图、数据和逻辑，view和model通过VM进行双向数据流通，vm并没有完全取代controller的作用，而是对controller的升级

created和mounted有什么不同

created在vue实例创建后立即调用，此时未渲染真实dom，一般用来获取数据和监听事件

mounted在vue实例挂载到真实dom后调用，此时已经渲染真实dom，可以进行一些需要dom的操作

vue-lazyload用来延迟加载图片

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'path/to/error.png',
  loading: 'path/to/loading.gif',
  attempt: 1
})

<img v-lazy="imageSrc" alt="Lazy Loaded Image">

vite和webpack的比较

vite启动速度更快：webpack会先将所有模块打包为一个bundle.js文件，然后再运行这个文件；vite实行按需动态编译，使用Rollup进行打包，提供更好的tree-shaking，代码压缩和性能优化

vite打包速度更快：vite通过ES module方式按需加载和编译模块

vite热更新更快：webpack的热更新是全量更新，即使修改一个小文件，也会重新编译整个应用，这在大型应用中可能会导致编译速度变慢；vite的热更新是增量更新，只更新修改的文件，所以即使在大型应用中也能保持极快的编译速度

vite生态不够完善：loader，plugin没有webpack生态丰富

总结：webpack适用于大型、功能复杂的项目；vite适用于中小型项目和快速开发

虚拟dom

模版转化为视图的过程

虚拟dom是对真实dom的抽象描述，本质是包含标签名、属性、子节点信息的js对象，相当于在真实dom和js中间做了一层缓存

提供了虚拟节点Vnode，通过新旧Vnode进行比对（diff算法），找出变化的部分将其应用在真实dom的更新上

具有跨平台（js）、高效合理更新视图的优点

vue3+vite调试工具

先安装npm库

npm install vite-plugin-vue-devtools -D

vite.config.ts

import { defineConfig } from 'vite'
import VueDevTools from 'vite-plugin-vue-devtools'
 
export default defineConfig({
  plugins: [
    VueDevTools(),
    vue(),
  ],
})

项目启动后可以通过http://host:port/__devtools__/单开页面使用调试，也可以在本地页面alt+shift+D在当前页使用

js

普通函数和箭头函数的区别

• 普通函数和箭头函数写法不同
• 箭头函数内部没有this，但箭头函数具有穿透性，箭头函数可以访问到上下文中的this，所以this的指向不同
• 箭头函数不能作为构造函数使用
• 箭头函数不具有prototype原型对象
• 箭头函数没有super方法

浏览器字体如何设置小于12px

• transform:scale(0.5)
• zoom:0.5

localStorage和cookie的区别

cookie本质是服务器颁发的一段用来记录用户信息的key-value字符串，是浏览器存储数据的一种机制，浏览器再次请求网站时会携带cookie，服务器根据cookie去辨认用户状态，具有不跨域的特征

localStorage的数据存储在本地，数据可能被类似chrome中的插件所获取

js闭包

在一个函数内返回另一个函数、内部函数引用外部函数的变量

函数外部也可以访问到函数内部的变量、但容易造成内存泄露

把函数内部的值保存起来或者传递到外部使用

==判断原则及对象转原始类型方式

1. 类型相同，比较值
2. 类型不同且都为原始类型，转为数字比较
3. 一端为原始类型，一端是对象，对象转为原始类型后进入第一步

ps：NaN和任何值都不等，undefined、null和自己或互相比较时相等

const obj = {
    [Symbol.toPrimitive](hint) {
        console.log('toPrimitive', hint);
        return this.a++;
    }
    valueOf() {
       console.log('valueOf', this.a);
       return this.a++;
    }
    toString() {
        console.log('toString', this.a);
        return this.a++;
    }
}

图片保持宽高比

• 存在兼容性问题

.item{
    aspect-ratio: 4/3;
}

• 一般用这种方法，container容器内放置要放的元素

.inner{
     width: 100%;
     padding-bottom: 75%;
     position: relative;
}
.container{
     position: absolute;
     inset: 0;
}

浏览器地址栏输入URL并按下回车时

首先浏览器进行url解析（协议，主机名，端口，参数），然后进行DNS解析域名以获取对应IP地址，浏览器通过IP和端口和服务器建立TCP连接，然后通过TCP连接向服务器发起请求，服务器收到请求后根据配置去处理并生成响应，浏览器收到响应的html后进行解析，请求css，js等文件，然后渲染页面

ajax缓存及解决方案

ajax异步获取数据后会在浏览器缓存一份，如果后续请求地址不变的话可能获取不到最新的数据

1、在XMLHttpRequest对象发送请企之前，可以设置请求头。
ajaxObject.setRequestHeader("If-motified-since", 0)。

2、在XMLHttpFRequest对象发送之前，可以设置请求头。
ajaxObject.setRequestHeader("Cache-control", "no-cache")

3、可以在url后面加上一个随机数
"fresh=" + Math.random()

4、可以在url后面加上时间戳
"nowtime" + new Date().getTime()

5、如果使用的是jquery,可以这样设置$.ajaxSetup({"cache": false})

原型链

是js中对象的一种连接方式，对象内部对另一个对象（原型）的引用，使对象之间可以通过原型继承的方式共享属性、方法；使js实现了面向对象的机制

事件循环机制

js有着单线程非阻塞的特性，js的执行代码是在一个执行栈按照先入后出的原则执行的，js运行时环境维护着一个任务队列用来存放异步任务和事件，事件循环是js处理异步任务和事件的机制，负责不断的从任务队列取出事件放入执行栈执行

事件循环的任务分为宏任务和微任务，宏任务一般包括script代码，settimeout，setinterval，I/O操作等，微任务一般包括promise.then；事件循环的执行顺序为先执行同步任务，再执行当前微任务队列中的所有微任务，后执行下一个宏任务

微任务的执行时机是上一个宏任务执行结束之后，下一个宏任务执行开始之前；微任务优先级大于宏任务；每次事件循环只包括一个宏任务

git

git reset

git reset [<options>] [<commit>]
# commit 可以是某个提交的哈希值或者分支名

git reset --soft
# 只移动指针，不改变暂存区和工作区
# 使用场景：节点差异会放入暂存区，这样可以将多个 commit 整合成一个，使提交记录更加清晰

git reset --mixed（默认）
# 移动指针，改变暂存区，不改变工作区
# 使用场景：
# 1.移除暂存区的所有更改
# 2.回退错误的 commit，避免错误的 commit 节点

git reset --hard
# 指针、暂存区、工作区都改变
# 使用场景：
# 1.抛弃某一节点之后的所有commit
# 2.改变本地目前的所有改变

暂存区覆盖工作区

git checkout .   #和 git add . 是反义词 

克隆指定分支代码

git clone -b <branch> <git>

创建一个新的本地分支并将其设置为远程分支的跟踪分支

git checkout -b <branch> origin/<branch>

查看远程仓库分支

git branch -r

在远程创建与本地同名分支并跟踪

git push -u origin <branch>

在本地创建与远程同名分支并跟踪远程分支（并切换到该分支）

git checkout --track/-t origin/<branch>

将其他分支上的特定提交应用到当前分支

git checkout <branch>
git cherry-pick <HashA> <HashB>

树状图输出所有分支的提交记录

git log --all --decorate --graph --oneline