前端基础重点知识

作者: 若雨千寻 | 来源:发表于2023-12-12 09:49 被阅读0次

重点知识全面复习

1. js基础

函数作用域(4)

定义在函数内的变量和常量统统成为局部作用域因为只能在函数内部使用

定义在函数外的变量成为全局作用域可以运用在全局
函数传参(5)

分为形参和实参在函数中定义形参再调用函数的时候传递实参就可以了

2. webapi

事件监听(1)

事件监听是在特定的事件发生时执行相应的代码简单来说就是捕获用户的操作实现效果

1 选择要监听的元素或对象

2.指定要监听的事件类型

3.定义一个回调函数

4.将事件监听器addEventListener附加到要监听的对象上
事件流事件委托(3)

事件流就是时间从捕获阶段到目标阶段再到冒泡阶段的一个过程而事件委托他就是当我们想给一个一个ul里面的很多个li绑定点击事件一个一个绑定比较麻烦可以直接给父元素绑定通过事件冒泡当事件在被触发的时候会沿着dom树往上冒泡到达父元素最终可以通过event target去判断是哪个子元素触发的事件
前端本地存储(5) cookie localStorage sessionStorage的区别

存储位置不同 localStorage是存储在浏览器当中是永久性的必须手动清除 sessionStorage 是存在网页当中关闭这个页面之后会自动清除 cookie的存储内存有限一般能存20个token左右但是cookie可以设置过期事件而其他两个不可以

3. js进阶

作用域/作用域链(1)

作用域指的是在程序中定义的变量的区域它决定了变量的可见性和生命周期

而作用域链是指在嵌套的作用域中查找变量的一种机制比如我想在函数内访问一个变量他最先找的是函数内如果当前作用域中不存在该变量然后就会逐级往上查找这个查找的过程就是作用域链
垃圾回收机制(1)

垃圾回收机制她是一种自动管理内存的机制它会定期的扫描程序中的程序标记在使用的清理掉没使用过的释放占用的内存
闭包(1)

函数套函数解决了变量污染的问题提示了变量的私有性

防止外部代码直接访问和修改该变量。

简单来说就是我们想在内层函数中调用外层函数是可以的

但是想从外层函数去访问内层函数是不行的需要通过return把函数释放才能调用
变量提升机制(1)

在使用 let var const 关键字声明的变量会被提升到当前作用域的顶部但是拿到的值是undefined

函数提升指的是声明的函数会被提升到当前作用域的顶部
new操作符的执行过程(2)

创建一个对象把这个对象作为this的值

把这个对象的proto 指向原型的 prototype

执行函数体 this指向这个对象

默认返回this对象如果明确返回一个引用类型数据前面this就丢弃返回该数据否则就返回this
原型链(3)

原型链是指构造函数的prototype 指向了原型对象实例的proto 也指向了原型对象

原型的 constructor指向了构造函数如果想在访问原型上的属性可以通过proto 去进行查找

原型可以通过proto 在网上查找的是object的原型在往上查找就是null

instanceof运算符的执行过程和自实现(3)

instanceof它是用于检查一个对象是否是某个构造函数的实例

function Person(name) {
  this.name = name;
}

var john = new Person('John');
console.log(john instanceof Person); // 输出: true

深浅拷贝(4)

浅拷贝是指创建一个新对象新对象的内容和原始对象相同但他们的地址是一样的修改其中一个对象的属性就会影响另外一个对象

深拷贝是重新再拷贝一份拥有不同的地址修改属性不会影响另一个对象

浅拷贝的方法 slice() concat() 扩展运算符 Array.from()

深拷贝的方法 JSON.stringify()和JSON.parse() 和递归实现深拷贝函数和 Lodash 的 cloneDeep()
this指向(4)

在全局作用域中 this指向window node.js环境中指的是golab对象

函数中作为对象使用是指向的是该对象独立函数执行时指向的时window

箭头函数的this指向的是他继承自外部的非箭头函数
谈谈call、apply、bind方法的作用，能否自己实现一下这些方法
防抖与节流(4)

防抖的作用是在连续触发一个事件时，只执行最后一次触发的事件，而忽略之前的触发。可以用于限制频繁触发的事件的执行次数。一般用在搜索框

节流的作用是在连续触发一个事件时，限制事件的执行频率，通过设置固定的时间间隔，执行一次事件回调
es6新增的Map和Set数据类型是做什么的

set 是数组祛重 map 是边路数组通过映射返回新数组
es6的Map和es5的object有什么区别
es6的class和es5的构造函数有什么区别
eval函数的作用是什么，为什么说尽量不要使用它

Promise的方法

1. Pending（进行中）：初始状态，表示异步操作正在进行中。

2. Fulfilled（已完成）：表示异步操作成功完成。

3. Rejected（已拒绝）：表示异步操作失败。

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject
同时请求三个接口 可以使用Promise.all
resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”
reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”

js继承
1. 原型链继承：通过设置子类的原型对象（prototype）为父类的实例对象来实现继承。
2. 构造函数继承：通过在子类的构造函数中调用父类的构造函数来实现继承。
es6新特性

块级作用域 let const 数组 set 方法展开运算符结构模板字符串 promise async await
数组方法

pop 末尾删除

push末尾新增

unshift 开头删除

shift 开头添加

map 遍历数组返回新数组

set数组去重

sort 排序

reserve 数组反转

slice 切片返回新数组

splice删除数组也可以进行拼接操作原数组

concat 合并数组

4. 网络编程与异步编程

URL(1)

协议域名端口路径查询参数
常用请求方法(1)

put post delet get

http常见的状态码都有哪些，分别是什么含义

100 - Continue 初始的请求已经接受

101 - 协议转换

200 - OK 一切正常，对GET和POST请求的应答文档跟在后面。

201 -服务器已经创建了文档

204 - ，浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，

301 -客户请求的文档在其他地方

304  服务器告诉客户，原来缓冲的文档还可以继续使用

400 请求出现语法错误。

401 访问被拒绝

403  资源不可用

404 无法找到指定位置的资源。

500  服务器由于遇到错误而不能完成该请求。

什么是restfulAPI设计风格(1)

把请求方法和路径结合起来设计接口的方式称之为restfulAPI风格优势是接口简洁清晰语义强就是别人一看名字就知道是用于新增还是删除更新的如果问这个风格有没有缺点肯定有但是问题不大例如这个规则不能表达所有的请求语义比如网站上经常有表达未读消息的小红点带年纪和过去查看未读消息发送获取未读消息的接口这个接口既不能说是get的也不能说是post的因为我们在获取消息的同时还会在服务器更新消息变为已读状态这种情况是既有读又有写 restfulAPI风格无法清晰表达

1.获取列表 get +/userlist;详情 get+/user/:id

2.新增 post + /user

3.删除 delete + /user/:id

4.更新 put +/user/:id 或者 patch +/user/:id
什么是幂等(1)
请求报文和响应报文 => 关联实战技能调试请求数据和响应数据(1)

1.请求：路径方法数据自定义请求头 cache-control

2.相应 : 状态码响应数据缓存时间等
原生发送ajax请求(3)

首先创建了一个XMLHttpRequest对象，使用xhr.open方法指定请求的方法调用xhr.send方法发送请求。
promise实例创建+promise的状态(3)

promise实例创建是同步任务 promise实例的then catch finally是异步微任务

promise有三个状态 promise一旦创建就是pending状态并且无法停止内部异步操作时状态固化为fulfilled 失败时状态固化为rejected

promise解决了回调方式的嵌套地狱问题同时也更加理想的把异步操作中异步发起和异步的结果使用处理分开来这样可以更好的组织程序代码 (相对而言同步编程就很美好程序可以立等结果不会需要回调(跳) 程序不会跳来跳去执行代码书写顺序就是代码的执行顺序很符合人类的思维习惯)
基于原生ajax封装成promise的方式使用(3)
同步与异步，js中都有哪些代码是异步的(4)

定时器回调函数 (callback) Promise 对象：它可以 .then .catch . .finally() async/await
异步编程的解决方案都有哪些及其比对(4)
事件循环机制(4)
1. 执行当前的宏任务。
2. 检查微任务队列，依次执行微任务直到队列为空。
3. 更新渲染（如果需要）。
4. 从宏任务队列中取出下一个宏任务，执行它。
宏任务与微任务(4)

宏任务指的就是同步任务和定时器微任务就是异步函数包括Promise回调、MutationObserver回调以及process.nextTick (在Node.js环境中)
promise的静态方法all race allSettled的适用场景(4)

1.all 等待多个异步操作全部完成后，才能进行下一步操作的场景，比如同时发送多个请求并等待它们都完成后进行数据处理

2.race 获取多个异步操作中最先完成的结果

3.allSettled 获取所有Promise对象的最终状态和结果，无论是成功还是失败，都需要处理的场景。
什么是双工通信，websocket和http有什么区别

双工通信可以同时进行双向数据传输的通信方式类似于微信聊天一类的它可以实现实时的双向交互 http 是单向通信

http三次握手、四次挥手

三次握手

客户端               服务器
  |                     |
  |---发送 SYN--------->|
  |     (连接请求)       |
  |                     |
  |<--发送 SYN + ACK----|
  |    (确认请求,同意连接)|
  |                     |
  |---发送 ACK--------->|
  |   (确认收到服务器回复)|
  |                     |
  
  
 四次挥手
  客户端               服务器
  |                     |
  |---发送 FIN--------->|
  |   (请求关闭连接)     |
  |                     |
  |<--发送 ACK---------|
  |    (收到关闭请求)    |
  |                     |
  |<--发送 FIN---------|
  |  (请求关闭连接，并传输剩余数据)|
  |                     |
  |---发送 ACK--------->|
  |  (确认收到服务器关闭请求)|
  |                     |

http长连接、短连接是什么；长轮询和短轮询是什么

1.短连接：客户端和服务器之间的连接会在每次请求和响应之后立即关闭每次请求都需要建立新的连接

2.长连接：客户端和服务器之间的连接会在建立后保持打开状态，允许多次请求和响应在同一个连接上进行

3.短轮询：客户端发送请求后，服务器立即返回响应，客户端需要不断发送请求来获取最新数据

4.长轮询：客户端发送请求后，服务器不会立即返回响应，而是将请求保持住，直到有新数据可返回时才响应给客户端。一旦客户端收到响应后，立即发送新的请求，保持轮询。
http协商缓存和强缓存的区别是什么

强缓存是在有效期内使用的是清缓存不再请求

协商缓存是当浏览器判断下次请求数据不发生变化了会执行协商缓存
谈谈http和https的区别

http是明文传输不是特别安全 https需要服务器使用数字证书进行身份验证
谈谈tcp udp协议的理解，谈谈osi七层模型
谈谈在浏览器地址栏敲下url到页面渲染出来，中间经历了哪些过程

1.域名解析dns解析把域名转换为ip地址

2.三次握手建立连接

3.发送请求数据

4.服务器nginx根据前端请求的资源的地址去查找把找到的内容返回

5.先解析html标签生成/构建dom树同时构建cssom树

6.两者合并生成renderTree渲染树

7.重排/回流把渲染树生成布局树 layoutTree

8重绘绘制每个节点的样式生成渲染层合成层

9 最后浏览器调显卡把页面绘制显示到显示器上
如何进行断点续传
什么是单点登录，如何进行？
什么是xss攻击，什么是csrf攻击，如何防范？

5. Node.js

node.js的组成，node.js的作用，node.js服务器(1)

1.node.js:Es规范 +commonjs规范的模块(package modle http fs buffer tcp path)

2.javascript :Es 规范 +w3c规范的内容（Dom+Bom)
node.js模块化，npm yarn pnpm等包管理工具(2)

速度 npm<yarn<pnpm

从盘占用 1. npm 早期是以树形目录来安装维护依赖包项目=>node_module(s)=>node_module(s)这样的管理方式会重复存放多词公共的包比如项目安装了ABC A依赖B又依赖D C依赖D D包在项目中安装的有两个

2.yarn把所有的包打平来存放在node_modules中这样确实减少了磁盘冗余占用但是新的问题幽灵依赖上面例子中的D包并没有明确安装却能使用

3.pnpm 把所有的依赖包放在一个公共的位置把所有项目通过链接指向这个公共的来使用这样节省了整个磁盘占用
es6模块化(2)

相对于commonjs规范的模块化不同的是es6模块化是静态模块化打包时根据import export 语法就能分析出项目的依赖关系可以把没有使用的代码移除掉
同源策略及跨域的解决方案(2)

同源指的就是域名端口协议

1.跨域

cors 后端配置前端使用

jsonp

反向代理利用当前提供页面的服务器做代理为我们提供解救数据

1.开发:开发服务器
1. 生产:nginx服务器
webpack打包工具的作用和项目打包流程(3)
webapck加载器loader的作用是什么，常用哪些loader(3)
webpack插件plugin的作用是什么，举例说项目中用哪些plugin(3)
如何提供webpack打包的速度，如何使用webpack进行项目性能优化
webapck和vite有什么区别

1.是先对文件进行完整的打包在启动开发服务器前端打开页面服务器对前端提供对应的html js css 等资源前端加载js文件执行vue组件的声明周期流程渲染页面更新页面等

2.是直接启动服务器前端打开页面服务器根据当前请求的路由地址提供这个路由下的文件由浏览器加载各种依赖模块然后执行组件的渲染及更新

1.是基于node.js开发的打包工具

2.是依赖了第三方的esbuild的工具包 esbuild是基于go语言开发的工具包 go要比node语言本身的执行性能更高一些

6. Vue2

MVVM设计思想(1)

m是数据 v视图 vm 视图模型然后数据改变会提醒vm vm会提醒视图来驱动更新
谈谈什么是SPA

传统的Web应用程序通常会通过每个页面的完整加载和刷新来进行页面之间的切换和交互。而SPA则采用了一种前端路由的方式，通过在单个页面中动态加载不同的内容和数据，实现页面之间的切换和交互，而无需进行完整的页面刷新
什么是响应式数据？它是如何实现的？(1)

简单来说就是数据改变页面进行更新

Vue的响应式原理是通过使用Object.defineProperty方法对每个数据递归添加数据劫持并结合Watcher观察者对象实现的。它会遍历对象的所有属性，并使用Object.defineProperty为每个属性定义getter 依赖收集和setter 数据更新方法。当属性被访问时，getter方法会被调用，将依赖项（Watcher）添加到依赖收集中。当属性被修改时，会触发对应的setter函数，setter函数会通知所有依赖于该数据的Watcher对象执行更新操作，从而实现视图的更新
data为什么必须是函数(1)

data是一个对象的时候别的组件都可以共享可能会导致数据意外被修改导致状态混乱

当data时函数的时候 vue会给每个组件创建一个副本创建实例时会返回新的数据对象

确保每个实例都有自己的数据

常用的vue指令都有哪些(1)

v-bind v-on v-model v-html v-solt v- if v-else v-for v-show
v-for中key属性的作用(1)

1key属性为每个循环项提供了一个唯一标识符如果循环项没有key属性，Vue可能会出现错位渲染或重复渲染的问题。而有了key属性，Vue可以准确地追踪每个循环项的状态
谈谈vue的diff算法

Vue的Diff算法采用了一种叫做“双端比较”的策略，它的核心思想是从头尾两端开始比较新旧节点，根据更轻松的假设和检测，尽量减少比较的次数。

1.同级比较 2.唯一标识 3.列表比较 4.组件级别比较
计算属性和侦听器(2)

根据其他属性的变化来计算一个新的属性时例如计算商品总价购物车全选反选可以使用计算属性

侦听器时监听一个属性当值变化时触发回调函数触发时机是数据变化之后可以得到旧值和新值也可以执行自定义的逻辑
v-model指令双向数据绑定是如何实现的？如果用在在组件上，又是什么作用及怎么实现的(2)

v-model指令双向数据实现原理是通过绑定 value 属性和监听 input 事件来实现的。

Vue 会自动根据元素的类型以及元素的特定属性来选择相应的属性进行绑定和监听

如果用在组件上可以让父组件和子组件之间更方便地共享数据父组件定义v-model

子组件popr接受 value 父组件也需要绑定v-model
生命周期(3)
1. beforeCreate：实例创建之前，此时还没有初始化数据和方法。
2. created：实例创建完成，此时已经可以访问到数据和方法，但尚未挂载到 DOM 上。
3. beforeMount：实例挂载前，此时模板已经编译完成，但尚未替换真实的 DOM。
4. mounted：实例挂载完成，此时已经将数据和方法挂载到了真实的 DOM 上，可以进行 DOM 操作。
5. beforeUpdate：数据更新前，此时虚拟 DOM 和真实 DOM 都还未更新。
6. updated：数据更新后，此时虚拟 DOM 和真实 DOM 都已完成更新。
7. beforeDestroy：实例销毁前，此时实例仍然完全可用。
8. destroyed：实例销毁后，此时实例所有的数据和方法都已被销毁，不可再访问。
组件通信(4)

父传子子传父祖先通信 .snyc 事件总线 vuex pinia
谈谈nextTick的理解

她是在一个异步函数执行完之后执行的钩子函数和跟update相同

update执行的时候也是执行nextTick
为什么给一个响应式数据新添加一个属性，页面不更新

因为在实例化的时候会对初始的响应式数据进行侦听，并建立响应式的 getter 和 setter

动态添加的属性 vue并没有再实例化时进行监听因为 Vue.js 使用 Object.defineProperty 或 Proxy 来追踪数据的变化，而这些方法无法拦截动态添加的属性可以通过this.$set 解决
Vue.use有什么作用，通常都用在哪里

Vue.use主要是为了安装vue.js插件使用vue.use可以将插件安装到vue实例中就可以在整个程序中使用插件提供的功能指令或组件

vue的mixin有什么作用

将一些通用的功能逻辑抽取到 mixin 中，可以在不同的组件中共享和复用这些逻辑。

不推荐用 mixin 可能会引起命名冲突

// 定义一个 mixin 对象
const myMixin = {
  data() {
    return {
      message: 'Hello from mixin!'
    }
  },
  methods: {
    greet() {
      console.log(this.message);
    }
  }
}

// 在组件中使用 mixin
export default {
  mixins: [myMixin], //在此处 把上方定义的myMixin 挂载到组件中
  created() {
    this.greet(); // 调用 mixin 中的方法
  }
}

Vue的Observable有什么作用

主要作用是为了解决在 Vue 2 中，响应式系统对于对象和数组的变化监测比较粗略的问题。在 Vue 2 中，只有对象的根级属性和数组的方法（如 push、pop、splice 等）才会被响应式系统监测到变化。而使用 Observable 可以实现更深层次的响应式监测。
.sync修饰符的作用(4)

子组件中修改父组件的数据，不需要触发事件或通过回调函数来实现双向绑定。同时，父组件也可以监听子组件的变化
vue的插槽(5)

分为 1.作用域插槽 v-solt:插槽名 =" 插槽值” 插槽内容 " 2. 匿名插槽 slot 3. 具名插槽 slot :名字他的使用场景是父组件给子组件传递html片段
vue自定义指令(5)

使用Vue.directive 创建自定义指令定义自定义指令名传入钩子函数使用的时候直接使用v-自定义指令名
vue组件缓存(6)

keep-alive 组件缓存相当于让一个组件保持活跃切换组件时不使用得组件会被销毁不想被销毁可以使用 keep alive 能提高应用程序得性能同时有两个钩子函数 activeted 当组件激活时执行的逻辑 deactiveted 组件被缓存时执行的逻辑
vue路由：hash模式和history模式有什么区别？一级路由二级路由；嵌套路由；路由传参；动态路由；路由守卫(6)
vuex：适用场景是什么，action和mutation的区别是什么，modules模块什么时候用，getters作用是什么(7)

vuex是公共状态管理包 action是异步操作 mutation 是修改 modules模块一般在开启命名空间的时候会用 getters是计算属性
axios的二次封装：创建实例；请求拦截器；响应拦截器
RBAC权限思想及实现，谈谈你们项目中的页面权限和按钮权限都是怎么实现的
谈谈你们vue项目是如何组织项目目录结构的
如何实现项目的多语言切换
vue项目常用哪些性能优化
keep-alive的作用是什么

在组件不显示的时候不销毁它只给它进行隐藏这样在切换回来的时候可以直接还原

使用范围: 平常都是把反复切换的组件包裹在keep alive内部

keep alive 有include exclude属性可以灵活定制哪些组件缓存哪些不缓存

7. 小程序-原生

小程序常用组件(1)
小程序样式及静态资源(1)
小程序适配(1)
小程序网络请求库及其封装(1)
小程序应用生命周期+页面生命周期，小程序页面栈
小程序更新页面数据为什么必须走setData

因为小程序采用了数据劫持的方式来实现数据绑定和页面更新，需要通过setData来告诉小程序框架哪些数据发生了变化
小程序页面跳转时(A页面跳B页面)如何传参？小程序页面返回时(B页面返回A页面)如何传参？

小程序的冷启动和热启动有什么区别
小程序登录

1.静默登录:

1.前端调wx.login获取登录交换凭证token

2.掉后台接口把code给后台传过去

3.后台(公司的)调微信后台的接口把appid(标识小程序身份) appsecrt(小程序密钥) code 传过去微信后台就会返回openid （当前用户相对当前小程序的唯一身份标识）及 sessicon_key 后台基于这些信息生成一个自定义的登录状态数据token 有的后台直接把openid返回给了前端

4.前端存储返回的唯一身份标识数据(openid 或 token )

5.后续请求都写带上这个身份标识(在请求拦截器中统一添加)

2.再配合上获取手机号

1.页面上添加<button open-type='getPhoneNumber' bindgetPhonenumber="handle">获取手机号<button>

2.用户点击时弹起提醒 (小程序自带的提醒) 用户是否同意授权同意的话会在handler 中收到用户的手机号加密数据和解密相关的参数数据如果不同意则中止流程进行一些文案提示

3.前端把上一步的数据调接口都发给了后台后台进行解密出手机号返回前端并存储数据库中

4.这步的作用 1.时获取用户更多的信息 2.时将来公司做的其他产品比如h5页面其他平台小程序不同产品之间可以通过手机号来确定是不是同一个用户是的话可以打通不同产品间用户的数据体验感更好
小程序支付

1.前端调取后台的下单接口后台生成订单号返回给前端

2.如果用户选择支付前端再调后台接口把订单号发过去后台内部用订单号去微信后台换一个预付款单号加上其他支付参数一起返回给前端

3.前端用wx.requestPayment 把上一步后台返回的五个支付参数发送给微信微信唤起支付弹窗用户在上面完成支付微信直接把支付结果返回给前端前端进行提示页面跳转等操作完成了整个支付流程微信同时把这个支付结果通过调接口的方式发送给系统后台后台收到通知后更新订单的支付状态

4.后续如果用户到达订单详情订单列表时前端调接口获取订单数据系统后台根据当前数据库中订单的状态如果订单状态时已完成与取消等非初始状态则说明已经更新过了订单状态直接将订单信息回给前端

如果订单状态时初始时的待付款状态再去调微信的接口询问当前的订单支付结果把这个结果更新数据库同时返回给前端来展示

H5端支付

1.前端调取后台接口发送订单id+支付方式微信或支付宝 +支付完成时的回调地址后台返回给一个第三方支付网站

2.前端跳转到这个网站，完成支付

3.用户支付完成，回跳到指定的地址
小程序分包

subpackages 字段配置子包的路径和设置然后小程序在启动时会先加载主包，然后按需加载子包。
小程序的发布流程
小程序中的父子通信
小程序中的上拉加载下拉刷新如何实现
登录页登录完成后回跳来源地址如何实现
小程序中公共逻辑(注入behaviors 技术类似vue2的mixin)
小程序的开放api如保存图片到相册、获取用户手机号、打电话、获取系统各种信息必然安全区等等

8. vue3+ts

ref和reactive的区别

ref是用于声明基本类型的响应式数据通过ref创建的数据需要通过.value进行属性访问和更新

reactive用于声明对象类型的响应式数据通过reactive创建的对象可以直接访问和更新属性
vue3响应式数据和vue2响应式数据的区别

Vue 3 使用 ES6 的proxy对象来代理响应式数据的访问和更新

**这让v3的响应式系统更加高效灵活 **
- Proxy 可以直接拦截整个对象，而不需要遍历对象的每个属性，因此性能上更高效。
- Proxy 可以拦截数组的索引和 length 属性，使得数组的响应式更加完善。
- Proxy 支持对 Map、Set、WeakMap 和 WeakSet 等数据结构的劫持，提供更丰富的响应式能力。
而v2是使用的object.definepropety 进行数据劫持依赖收集get 派发更新set实现的
vue3生命周期和vue2的对比

v3的声明周期是把created和beforecreat 组合成了set up 语法糖内嵌到script里面还有销毁时的钩子函数换成了beforeUnmount 和unmounted
vue3的组合式api和vue2的选项式api有什么不同

vue2的选项式是在 data methods 等选项里写数据逻辑但对于复杂的逻辑可能会导致选项过多不宜维护

vue3是模块化了全部变为函数需要用直接引入就可以了
什么是treeshaking，说明一下用途
vue3的性能提升主要通过哪些方面进行的
pinia的适用场景，如何使用
pinia的数据持久化
ts中常用的数据类型，联合类型、交叉类型、字面量类型、枚举类型
类型别名type和接口interface的异同
聊聊ts中的泛型
类型断言
ts的属性只读属性静态属性实例属性

9. 小程序-uniapp框架

框架创建项目的两种方式
框架的条件编译
uni.request网络库的封装
静默刷新token的解决方案是如何实现的
uniapp如何打包h5、小程序、app，重点是android app打包

10. h5c3相关

谈谈盒模型

分为标准模型和ie模型一个是设置的宽高包含了内容padding 和内容边框之类的
css选择器的优先级

! important 行内选择器类选择器标签选择器通配符
设备像素、css像素、设备独立像素、dpr、ppi 之间的区别
谈谈常用的布局方案

flex布局流式布局

百分比布局
实现元素水平垂直居中有哪些方案

margin auto

定位左50% 上50% 配合transfrom trantion 3d -50% -50%

flex布局
css3自定义动画如何实现

首先通过@keform 定义自定义动画名称定义%0 -%100的时候的状态

使用的时候可以使用anmaition 动画名称后面跟上属性
如何进行移动端的适配

可以使用 rem 假设宽是375 那么1rem就是37.5

如果使用vw 假设官渡是375 那么1vw就是3.75
css如何绘制一个三角形
css如何实现单行溢出省略和多行溢出省略
chrome浏览器对字号有最小限制吗，如何改变
重排/回流和重绘的区别

重绘是页面样式进行改变会造成重绘

重拍是框架进行改变会导致重排

重绘不一定会重排

重排一定会重绘
BFC是什么，有什么作用
页面渲染的流程是什么

11.其他

递归算法
1. 给一个数字12345，写一个递归函数处理它(不要用数组的reverse)要求得到结果 '54321'
2. 给一个这样的数据结构(层级是无限的): {a: 1, b: 2, c: {cc: 33, c2: 23}, d: {dd: {ddd: 444}} } 要求写一个函数，得到结果[1, 2, [33, 23], [[444]]]
3. 给一个如下的数据对象，要求写一个函数，实现
```
const obj = {
  a: 1,
  b: [1, 3, 3],
  abc: [2, 3],
  c: { cc: 44 },
  d: [{ dd: [1, { ddd: 123 }] }]
}

fn(obj, 'a')  => 1
fn(obj, 'b[1]') => 3
fn(obj, 'c.cc') => 44
fn(obj, 'd[0].dd[1].ddd') => 123
```
4. 有10个台阶，1步可以走1个台阶，也可以一次走2个台阶, 问10个台阶有多少种走法?
5. 深拷贝
  
  三种方法 jOSN Sringfily
```
                josn pall 

             递归实现深拷贝
```
6. 给一个数组，无限嵌套的数组，转成扁平的一维数组 [1, 2, 3, [4], [[[[[[6, 7]]]]]]] => [1, 2, 3, 4, 6, 7]
数组去重

set 数组去重
数组排序

sort数组排序
查询字符串和对象的互转
查找字符串中第一个出现次数最多的元素
把一个数字按3位分割，如12345678处理成 12,345,678
给一个数组和一个数字sum，求数组中第一次出现的和是sum的两个数组元素的索引，如 [2, 3, 4, 5, 6] sum为7，那么得出索引1和2
什么是进程，什么是线程，什么是协程

项目中进行过哪些性能优化
你们是如何进行团队协作管理代码的
项目中出了错误，你通常是如何排查的
git fetch和git pull有什么区别
npm yarn pnpm包管理工具有什么区别

npm 是一代 yarn 是二代 pnpm 是三代

前端基础重点知识

重点知识全面复习

1. js基础

2. webapi

3. js进阶

4. 网络编程与异步编程

5. Node.js

6. Vue2

7. 小程序-原生

8. vue3+ts

9. 小程序-uniapp框架

10. h5c3相关

11.其他

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读