前端面试题_pinia会导致页面卡顿嘛

css

1.行内元素？块级元素？特性盒子模型是什么？

行内元素：

（1）行内元素不会独占页面的一行，只占自身的大小

（2）行内元素在页面中左向右水平排列（书写习惯一致）

（3）如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列

（4）行内元素的默认宽度和高度都是被内容撑开，不能设置width 和 height

块级元素

（1）块元素会在页面中独占一行

（2）默认宽度是父元素的全部（会把父元素撑满）

（3）默认高度是被内容撑开（子元素）

特性盒子

标准盒模型，一个块的总宽度 = width(content的宽度) + margin(左右)+ padding(左右)+ border(左右)

怪异盒模型，一个块的总宽度 = width(content + border + padding)+ margin(左右)

2.css选择器

1.元素选择器

2.类选择器(class选择器)

3.id选择器

4.通配符选择器

5.群组选择器

6.后代选择器

7.子代选择器

8.相邻兄弟选择器

9.通用兄弟选择器

10.属性选择器

11.伪类选择器

3.display有哪些值，有什么功能

none： 表示隐藏对象，与visibility属性的hidden值不同，display：none不为被隐藏的对象保留物理空间 ，然visibility：hidden就保留

inline（默认值）：表示指定对象为内联元素

block： 指定对象为块元素。

inline-block： 指定对象为内联块元素。（这是CSS2中的属性）

table： 指定对象作为块元素级的表格。类同于html标签table（CSS2）

box： 将对象作为弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）

flex： 将对象作为弹性伸缩盒显示。（伸缩盒的最老版本中属性）（CSS3）

4.消除浮动有哪些，在什么情况下使用position

1. 对父级设置适合CSS高度

2. clear:both清除浮动

3. 伪类 :after 控制（最佳）

4. 父级div定义overflow:hidden

5.display：none和visibility：hidden的区别

none： 表示隐藏对象，与visibility属性的hidden值不同，display：none不为被隐藏的对象保留物理空间 ，然visibility：hidden就保留

6.在什么时候用margin，padding

margin:用来调整盒子到盒子之间的距离，不会撑大显示的区域，但是会影响到别的盒子

padding:用来调整子元素(内容)在父元素(盒子)内的位置，会把盒子撑大，如 果不想被撑大，要在原来宽高的基础上减去对应方向的 padding 值

7.h5和c3新特性

1、拖拽释放：拖拽是一种常见的特性，即抓取对象以后拖到另一个位置，在HTML5中，

2、自定义属性data-id

3、语义化更好的标签（header, nav，footer，aside，article ，section）

4、音频、视频（audio、video）如果浏览器不支持自动播放的时候，在属性中添加autoplay

5、画布Canvas

6、地理（Geolocation）

7、本地离线存储（localStorage）长期储存数据，浏览器关闭后数据不丢失

8、sessionStorage的数据在浏览器关闭后自动删除

9、表单控件：calendar、date、time、url、search、tel、file、number

10、新的技术：webworker、websocket、Geolocation

1、颜色：新增RGBA、HSLA模式

2、文字阴影：（text-shadow）

3、边框：圆角（border-radius）边框阴影：box-shadow

4、盒子模型：box-sizing

5、背景：background-size,background-origin background-clip(削弱)

6、渐变：linear-gradient(线性渐变):

eg: background-image: linear-gradient(100deg, #237b9f, #f2febd);

radial-gradient (径向渐变)

7、过渡：transition可实现动画

8、自定义动画：animate@keyfrom

9、媒体查询：多栏布局@media screen and (width:800px)

10、border-image

11、2D转换:transform:translate(x,y) rotate(x,y)旋转 skew(x,y)倾斜 scale(x,y)缩放

12、3D转换

13、字体图标：font-size

14、弹性布局：flex

8.垂直居中实现方法

方法1（常用）：display：flex

display:flex;

justify-content:center;

align-items:center;

方法2: margin，transform配合

margin:50% auto;

transform: translateY(-50%);

方法3: inline-block+vertical-aligin

display: inline-block;

/* middle 把此元素放置在父元素的中部。 */

vertical-align: middle;

4：absolute+负margin

position: absolute; left: 50%; top: 50%; /宽高的一半/

margin-left: -50px; margin-top: -50px;

方法5 absolute+margin:auto

position: absolute;

left: 0;

top: 0;

bottom:0;

right:0;

margin:auto;

10.说一下外边距塌陷 父盒子、子盒子的外边距塌陷

塌陷的产生：脱离文档流

1，给父盒子设置边框或内边距 2，给父标签添加overflow:hidden属性，触发BFC规则（块级格式上下文，把父级渲染成一个独立区域。）

11.块级元素水平居中

行内元素居中： text-align:center

块状元素居中：左右margin”值为“auto”来实现居中

js数组

1.数组的添加方法

1.length方法

2.push

3.unshift

4.splice

5.concat

6....拓展运算符

2.数组截取splice

splice() 方法可以添加元素、删除元素，也可以截取数组片段。删除元素时，将返回被删除的数组片段，因此可以使用 splice() 方法截取数组片段

3.哪些改变了数组，哪些没有改变原数组

1.改变：1.1push 1.2 unshift 1.3 pop 1.4 shift 1.5 sort 1.6 splice 1.7 reverse

2.不改变 2.1 concat 2.2 join 2.3 reduce 2.4 map 2.5 forEach 2.6filter 2.7 slice 2.8findIndex

4.数组遍历的常用方法

1.普通for循环2.forEach循环3.map循环4.for–of 5.filter 6.every遍历7.some遍历8.reduce 9.find 10 findIndex

5.map和foreach的区别

1.相同点，都是循环遍历数组中的每一项;匿名函数中的this都是指向window。2.不同点，map()会分配内存空间存储新数组并返回，forEach()不会返回数据;forEach()允许callback更改原始数组的元素。

6.数组去重方法

1、filter()和indexOf()实现去重

2、reduce()和includes()实现去重

3、Set实现去重

6.set集合去重的弊端

无法识别相同对象和数组

7.数组的foreach、for in、for of的区别

for...in 语句以任意顺序遍历一个对象的除 Symbol 以外的可枚举属性。

for...of 语句遍历可迭代对象定义要迭代的数据，允许遍历获得键值它可以与break、continue和return配合使用

无法break forEach有个问题就是不能中断执行

8.数组长度是只读属性吗

数组的长度并不只是一个只读的属性,它可以被修改,通过修改长度属性可以增加或者删除数组数据项。

9.数组变空方法

直接值为空数组

利用length属性

利用splice（splice会改变原数组，splice方法返回删除的数组项组成的数组）

10.用set（）做过什么

11. 闭包

1. 闭包:闭包是有权访问一个函数外面的局部变量，且在外部函数调用结束被销毁后，依然可以使用

2. 闭包作用：解析了全局变量污染的问题

3. 闭包原理：利用了垃圾回收机制，当调用结束的函数被垃圾回收机制清理的时候，发现有一个变量正在被另一个函数所使用， 那么这个变量将永远不再被回收，而常驻内存。（如果在IE浏览器里，可能会造成内存泄露）

4. 闭包的优点：可以让一个局部变量在全局访问

5. 闭包的缺点：闭包的变量是始终保存在内存中，内存消耗会变大，导致网页性能问题.如果在IE浏览器里，可能会造成内存泄露.

6. 解决内存泄露的问题：将使用完毕的变量赋值为null

js

0. js类型

undefined、null、number、boolean、string,Object、array、function

1.cookie和session的区别

对象不同；存储数据大小不同；生命周期不同；存储位置不同；数据类型不同

2.http2了解过吗 常见的状态码 说说跨域 说说重绘和回流

HTTP/2 （原名HTTP/2.0）即超文本传输协议 2.0，是下一代[HTTP协议]

状态码200表示服务器响应成功

状态码302代表临时跳转

状态码403代表请求的服务器资源权限不够

状态码404代表服务器上没有该资源

状态码500代表程序错误

跨域：

指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的

同源策略：

是指协议，域名，端口都要相同

解析获取到的HTML，生成DOM树，解析CSS，生成CSSOM树

将DOM树和CSSOM树进行结合，生成渲染树（render tree）

根据生成的渲染树，进行回流（Layout）,得到节点的几何信息（位置，大

重绘（Painting）：根据渲染树以及回流得到的几何信息，得到节点的绝对像素（像素，背景色，外观等）

Display将像素发送给GPU，展示在页面上。

何时发生回流?

添加或者删除可见的DOM元素

元素的位置发生变化

元素的尺寸发生变化（包括外边距、内边距、边框大小、高度和宽度等）

内容发生变化，文本或者图片被另一个不同尺寸的图片所代替

页面开始渲染的时候

浏览器的窗口尺寸变化（回流是根据视口的大小来计算元素的位置和大小的）

重绘

在渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，不影响布局，就称为重绘。

3.Es6有哪些新特性

1，symbol 2，let和const 3解构赋值 4. Map和Set 5.对象的拓展运算符(...)三点 6. 箭头函数 7. class（类

8.模块导入和导出

4.vue中的生命周期

beforeCreate、created(此时需说明可以在created中首次拿到data中定义的数据)、

beforeMount、mounted(此时需说明dom树渲染结束，可访问dom结构)、

beforeUpdate、updated（页面与数据同步）

beforeDestroy、destroyed

5讲一下mvc

mvvm各部分的通信是双向的，而mvc各部分通信是单向的；

mvvm是真正将页面与数据逻辑分离放到js里去实现，而mvc里面未分离

MVC是包括view视图层、controller控制层、model数据层。各部分之间的通信都是单向的。

MVVM包括view视图层、model数据层、viewmodel层。

各部分通信都是双向的。采用双向数据绑定，View的变动，自动反映在 ViewModel，反之亦然。

6.数据接口怎么写的

node.js 中的express

7.怎么获取cookie中的session

session 在服务器端，cookie在客服端，session默认被存放在服务器的一个文件里，session的运行依赖session id 而session id是存在cookie中的，如果浏 在url中传递session_id

用户验证一般会用到session,因此维持一个会话的核心就是客户端的唯一标识，即sessionid

8.有哪几种组件

1、全局组件

2、局部组件

3、动态组件

4、异步组件

9.组件间传值的方式

1.父传子 props

2.子传父 this.$emit

3.兄弟组件 传数据的时候用this.$bus.$emit传 利用中央事件总线 eventbus 在要接受数据的子组件 在 created钩子函数中 用$on 方法接收

4.利用 vuex 进行组件通信 把公共的数据存在 vuex 里就可以实现组件之间都能使用这个数据了

5.$attr+$listener

6.provide 和 inject（依赖注入）

7.$parent和$children

10.null和undefined

1、undefined不是关键字，而null是关键字;

2、undefined和null被转换为布尔值的时候，两者都为false;

3、undefined在和null进行==比较时两者相等，全等于比较时两者不等

4、使用Number()对undefined和null进行类型转换

5、undefined本质上是window的一个属性，而null是一个对象；

11.get和post

1.GET在浏览器回退时是无害的，而POST会再次提交请求。

2.GET产生的URL地址可以被Bookmark，而POST不可以。

3.GET请求会被浏览器主动cache，而POST不会，除非手动设置。

4.GET请求只能进行url编码，而POST支持多种编码方式。

5.GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。

6.GET请求在URL中传送的参数是有长度限制的，而POST么有。

7.对参数的数据类型，GET只接受ASCII字符，而POST没有限制。

8.GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

9.GET把参数包含在URL中，POST通过request body传递参数

12.说一下原型链

实例对象与原型之间的连接，叫做原型链

1、每个对象都有一个proto属性,原型链上的对象正是依靠这个属性连结在一起 2、作为一个对象，当你访问其中的一个属性或方法的时候，如果这个对象中没有这个 方法或属性，那么Javascript引擎将会访问这个对象的proto属性所指向上一个对 象，并在那个对象中查找指定的方法或属性，如果不能找到，那就会继续通过那个对象 的proto属性指向的对象进行向上查找，直到这个链表结束。

13.promise

Promise是一个构造函数，自己身上有all、reject、resolve、race这几个眼熟的方法，原型上有then、catch

Promise 主要是用来解决回调地狱的问题

14.讲一下数组的扁平化

数组扁平化是指将一个多维数组变为一维数组

1.普通的递归实现

2.利用reduce函数迭代

3.扩展运算符实现

4.split和toString共同处理

5.ES6的flat函数实现

6.JSON和正则表达式共同实现

15.this指向问题

1、this总是代表着他的直接调用者，例如obj.fun()，那么fun()中的this就是obj；

2、调用的时候，没有任何前缀，则指向window，new的时候，指向new出来的对象；

3、在默认情况下(非严格模式)，没找到直接调动者，则this指向window；

4、在严格模式下，没有直接调用者的函数中的this是undefined；

5、使用call、apply、bind绑定的，this指向绑定的对象。

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

1. 箭头函数比普通函数更加简洁

2. 箭头函数没有自己的this

3. 箭头函数继承来的this指向永远不会改变

4. call()、apply()、bind()等方法不能改变箭头函数中this的指向

5. 箭头函数没有prototype

6. 箭头函数没有自己的arguments

17.定时器的this指向谁

window对象

18 .深拷贝和浅拷贝，

1.浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用

2.深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”

19.扩展运算符是什么 ?运算符使用场景?赋值解构的使用场景

...将一个数组转为用逗号分割的参数序列

1、扩展运算符做函数形参

2、扩展运算符做函数实参

3、使用扩展运算符创建数组

1.交换赋值 2.函数参数的定义 3.函数参数的默认值 4.从函数返回多个值 5.提取JSON数据 6.遍历Map结构 7.输入模块的指定方法

20.原型和继承

普通对象都具有一个相关联的对象并从上面继承（委托）属性，这个相关联的对象就是原型。

原型链继承

寄生式继承

寄生式组合继承

21.防抖和节流

防抖:避免事件的重复触发

节流:节流就是减少流量，将频繁触发的事件减少，并每隔一段时间执行

22.说一下克隆

1.克隆对象是基本数据类型我们可以直接赋值给需要的变量即可

2..克隆对象是引用数据类型则不能直接复制

23.深拷贝中json实现方式的弊端

24.axios二次封装思路

1.创建一个axios实例对象。 2.对axios请求进行请求拦截。 3.进行响应拦截。 4.封装请求方法。 5.导出axios实例对象。 6.将axios实例对象挂载到vue原型上，方便使用。

25.axios的获取数据，页面空白问题？加载白屏问题怎么解决

1.减少DOM树渲染时间

2.减少http请求次数和请求大小

3.把css放在head里将js放在body后

4.使用ssr预渲染（服务端渲染）

26.管理系统左边菜单栏的动态路由？怎么动态添加路由 ?

27.vue首屏加载空白怎么办？

原因：加载失败或者加载过慢

解决：预渲染、骨架屏、loading，ssr(服务端渲染)，路由懒加载

28.实现响应式页面？

1.meta

2.百分比

3.flex/自动换行

4.媒体查询

5.em \ rem \ vw

6.js中的onresize

29.说一下你在vue中踩过的坑

1、第一个是给对象添加属性的时候，直接通过给data里面的对象添加属性然后赋值，新添加的属性不是响应式的

【解决办法】通过Vue.set(对象，属性，值)这种方式就可以达到，对象新添加的属性是响应式的

2、 在created操作dom的时候，是报错的，获取不到dom，这个时候实例vue实例没有挂载

【解决办法】通过：Vue.nextTick(回调函数进行获取)

vue

1.vue中data为什么写成函数

防止多个组件实例对象之间共用一个data，产生数据污染。当将组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，拥有自己的作用域，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。

2.Vue-router路由懒加载

1.vue异步组件

2.使用import

3.webpack提供的require.ensure()

3.路由传参数有哪些？params和query区别？

params传参：（显示参数）

在路径中显示参数，在配置路由时，需要占位。刷新页面参数依

在配置路由文件中，不需要占位，但是需要name，页面刷新，params参数丢失。

query传参

不需要设置占位，地址栏表现为：/search?keyword=123， 跳转路由用name和path都可以

4.路由有哪些模式

hash模式:于是当 URL 改变时，页面不会重新加载，其显示的网路路径中会有 “#” 号这是最安全的模式，因为他兼容所有的浏览器和服务器。

history模式：会去掉路径中的 “#”

abstract 路由模式：在已存在的路由页面中内嵌其他的路由页面，而保持在浏览器当中依旧显示当前页面的路由path

5.说一下vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式， 采用集中式存储管理应用的所有组件的状态，解决多组件数据通信。

1.state： 统一定义公共数据（类似于data(){return {a:1, b:2，xxxxxx}}）

2.mutations ： 使用它来修改数据(类似于methods)

3.getters： 类似于computed(计算属性，对现有的状态进行计算得到新的数据-------派生 )

4.actions： 发起异步请求

5.modules： 模块拆分

6.怎么去引用state中的数据，除了this.$store.xxx Vuex中的mapStation和mapMutations用过吗

通过 $store.state.xxx 拿到数据

通过计算属性

通过mapstate

7.computed和watch区别

1.功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。

2.是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。

3.是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。

4.computed默认第一次加载的时候就开始监听；watch默认第一次加载不做监听，如果需要第一次加载做监听，添加immediate属性，设置为true（immediate:true）

5.使用场景：computed----当一个属性受多个属性影响的时候，使用computed-----购物车商品结算。watch–当一条数据影响多条数据的时候，使用watch-----搜索框.

8.讲一下ref的使用

获取dom元素，组价

9.父组件怎么使用子组件的方法

通过ref直接调用子组件的方法

通过组件的$emit、$on方法

10.路由守卫有哪些 路由守卫的参数？具体每个参数干嘛用的?路由有哪些钩子函数

全局路由守卫、组件内路由守卫、路由独享守卫。

to：要跳转到的路由

from：从哪里跳转的路由

next：函数体也是最重要的一个 必须要next()才会让路由正常地跳转和切换，如果不调用next，那么页面会留在原地

11.props和data的区别？props的值可以修改吗

data 应该只能是数据

props 可以是数组或对象，用于接收来自父组件的数据

data不需要用户（开发者）传值，自身维护

props需要用户（开发者）传值

data上的数据都是可读可写的，

props上的数据只读（防止组件修改和父组件的修改产生冲突）的，无法重新赋值

12.vue有哪些修饰符 自定义组件怎么实现v-model

lazy,trim,number,stop,prevent,self,once,capture,passive,native

在vue中，v-model 的值相当于默认传递了一个名为 value 的 prop 和一个名为 input 的方法

13.vue的核心

Vue 是一套构建用户界面的渐进式自底向上增量开发的 MVVM 框架， vue 的核心只关注视图层

14.vue的响应式原理 vue3

vue响应式也叫作数据双向绑定

首先我们需要通过Object.defineProperty()方法把数据(data)设置为getter和setter的访问形式，这样我们就可以在数据被修改时在setter方法设置监视修改页面信息，也就是说每当数据被修改，就会触发对应的set方法，然后我们可以在set方法中去调用操作dom的方法。

1、对于基本数据类型来说，响应式依然是靠Object.defineProperty()的get和set来完成的

2、对于对象类型的数据：

• 通过Proxy代理：拦截对象中任意属性的变化，包括属性值得读写、添加、删除等操作等..

• 通过Reflect反射函数进行操作

15.vue2和vue3的区别

vue2和vue3双向数据绑定原理发生了改变

vue3可以拥有多个跟节点。

vue3Composition API

生命周期

父子传参不同，setup()函数特性

pinia和vuex的区别 （1）pinia它没有mutation,他只有state，getters，action【同步、异步】使用他来修改state数据 （2）pinia他默认也是存入内存中，如果需要使用本地存储，在配置上比vuex麻烦一点

（3）pinia语法上比vuex更容易理解和使用，灵活。 （4）pinia没有modules配置，没一个独立的仓库都是definStore生成出来的

（5）pinia state是一个对象返回一个对象和组件的data是一样的语法

16.v-if和v-show的区别

1、“v-if”是根据判断条件来动态的进行增删DOM元素，“v-show”是根据判断条件来动态的进行显示和隐藏元素；2、“v-if”的切换消耗高，“v-show”的初始渲染消耗高；3、“v-show”的性能比“v-if”高。

17.nextTick()使用过吗

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM

18.说说async与await

async用于申明一个function是异步的；而await则可以认为是 async await的简写形式，是等待一个异步方法执行完成的,主要用来处理异步操作

19.说一下ajax的原理 说一下ajax的过程

ajax的工作原理就是通过XmlHttpRequest对象来向服务器发出异步请求，从服务器中获得数据，然后用Javascript来操作DOM从而更新局部页面

1.建立Ajax对象（xmlHttpRequest对象）

2.创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息 ，即使用open方法与服务器建立链接

3.向服务器发送数据

4.设置回调函数

5.在回调函数中针对不同的响应状态进行处理

20.如何中断ajax请求

1.设置超时时间让ajax自动断开

2手动去停止ajax请求，核心是调用XMLHttpRequest对象上的abort方法

21.虚拟dom原理是什么

当用原生js或jquery等库去操作DOM时，浏览器会从构建DOM树开始讲整个流程执行一遍，所以频繁操作DOM会引起不需要的计算，导致页面卡顿，影响用户体验，而Virtual DOM能很好的解决这个问题。

22.什么是会话cookie，什么是持久cookie

如果 cookie 不包含到期日期，则可视为会话 cookie。 会话 cookie 存储在内存中，决不会写入磁盘。 当浏览器关闭时，cookie 将从此永久丢失。

如果 cookie 包含到期日期，则可视为持久性 cookie。 在指定的到期日期，cookie 将从磁盘中删除

23.vuex和pinia有什么区别，

1.pinia它没有mutation,他只有state，getters，action【同步、异步】使用他来修改state数据

2.pinia他默认也是存入内存中，如果需要使用本地存储，在配置上比vuex麻烦一点

3.pinia语法上比vuex更容易理解和使用，灵活。

4.pinia没有modules配置，没一个独立的仓库都是definStore生成出来的

5.pinia state是一个对象返回一个对象和组件的data是一样的语法

24.vue3你使用了哪些api

1.setup

2.ref

3.reactive

4.计算属性与监视

5.生命周期

6.toRefs

25.懒加载

懒加载其实就是延时加载,即当对象需要用到的时候再去加载

26.页面怎么进行缓存

使用浏览器的缓存机制

使用HTML5新特性

27.说一下离线缓存

线缓存可以将站点的一些文件缓存到本地，它是浏览器自身的一种机制，将需要的文件缓存下来，以便后期即使没有连接网络，被缓存的页面也可以展示

如何实现：Application Cache 与 Cache Storage、service-worker、PouchDB、Redux-Offline、Redux 与 IndexDB 结合

28.说一下项目购物车的实现思路 后台管理系统中的权限管理是怎么实现的

29.项目的性能优化

1.vue-router路由懒加载

2.vue中使用keep-alive

3.代码层面的优化 v-if/v-show

4.减少dom操作

5.减少ajax请求

30.vue定义一个全局过滤器

31.权限管理怎么做？

1.前端只在路由跳转时做权限判断

2.后端返回路由权限名，前端存储完整路由权限表，并动态生成路由

3.使用addRoutes方法动态添加路由并进行权限判断

32平时用的常用git命令

git init

git add

git commit -m

git status

git push

git clone

git branch

git pull

git remote

33.nextTick原理

nexttick原理基于事件循环，他可以让开发者在主线程执行任务之前，现将任务放在一个消息队列里，等待主线程执行完毕后，再将消息从队列里取出来，这样就可以做到异步执行任务。

vue中的jsx用过吗 二次封装的一些深究问题，例如具体类型，slot插槽等

延迟js

第三方插件

vue和react的区别

react用过吗，用过哪些hooks

有了解网络协议吗

了解过ts吗

如何将本地的npm包发布到npmjs官网 删除指定版本的npm包

axios封装是否封装了load页面

jQuery了解多少

说一下promise.all()方法 页面数组改变能够实时的获取更新（定时器每隔一段时间发请求，websocket）

echarts的参数

实现useState你怎么实现

useMemo和useCallback使用场景

useEffect有几个参数，第二个参数有什么用 知道react的HOC吗 字

地图这一块有没有了解过，定位偏差怎么解决 说一下nvm nrm

node.js

1.模块化

提高了代码的复用性

提高了代码的可维护性

可以实现按需加载

模块化就是有组织地把一个大程序拆分成独立并互相依赖的多个小文件（模块）

1.有CommoneJS规范，最典型的实践就是Node.js，主要使用在服务器端，同步加载模块；

2.有AMD，最典型的实践就是RequireJS，依赖前置，主要使用在浏览器端，异步加载模块。

3.有ES6的Module，在语言层面定义了模块，通过export和import，吸收了CommoneJS和AMD两者的优点，兼容两标准的规范。

2.异步编程

异步编程是一项关键技术，可以直接处理多个核心上的I/O阻塞和并发操作

3.包管理

4.node.js 的导入导出common.js

导入:require(xxx.js)

导出：exports

module.exports

5.es6的导入导出

分别导出：export

统一导出：export {}

默认导出：export default

导入 import {xxx} from

import xxx from

区别：

1.语法上不同

2.CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用

3.CommonJS 模块是运行时加载，ES6 模块是编译时加载

5.express框架

6.中间件（router、static、cookie、body-parser、文件上传）

7.node.js有哪些全局对象

在浏览器 JavaScript 中，通常window 是全局对象， 而 Nodejs中的全局对象是 global

常见的全局对象有global、console、process、Buffer

8.node.js有哪些定时器（4个）

1.setTimeout

2.setInterval

3.setImmediate

4.process.nextTick()

9.模板引擎

模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。

10在浏览器输入url后会发生的过程

1.DNS对域名进行解析； 2.建立TCP连接（三次握手）； 3.发送HTTP请求； 4.服务器处理请求； 5.返回响应结果； 6.关闭TCP连接（四次挥手）； 7.浏览器解析HTML； 8.浏览器布局渲染；

11.http和https区别

1.HTTP 明文传输，数据都是未加密的，安全性较差，HTTPS（SSL+HTTP） 数据传输过程是加密的，安全性较好。

2.使用 HTTPS 协议需要到 CA（Certificate Authority，数字证书认证机构） 申请证书，一般免费证书较少，因而需要一定费用。证书颁发机构如：Symantec、Comodo、GoDaddy 和 GlobalSign 等。

3.HTTP 页面响应速度比 HTTPS 快，主要是因为 HTTP 使用 TCP 三次握手建立连接，客户端和服务器需要交换 3 个包，而 HTTPS除了 TCP 的三个包，还要加上 ssl 握手需要的 9 个包，所以一共是 12 个包。

4.http 和 https 使用的是完全不同的连接方式，用的端口也不一样，前者是 80，后者是 443。

5.HTTPS 其实就是建构在 SSL/TLS 之上的 HTTP 协议，所以，要比较 HTTPS 比 HTTP 要更耗费服务器资源。

12.git 提交代码解冲突

1.首先提交本地修改到git仓，保存自己修改的数据

2.更新本地代码，即将本地代码与服务器最新代码保持一致

3.将自己修改的代码融合进本地最新的代码，最后提交，如此个人修改的代码合入主干就不会冲突啦

io、

数据库模块

uniapp

1.tabbar

2.下拉刷新

3.生命周期

一、应用的生命周期

onlaunch：当uni-app 初始化完成时触发（全局只触发一次）

onShow：当 uni-app 启动，或从后台进入前台显示

onHide：当 uni-app 从前台进入后台

onError：当 uni-app 报错时触发

onUniNViewMessage：对 nvue 页面发送的数据进行监听，onPageNotFound：页面不存在

二、页面的生命周期

1.onInit——监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad

2.onLoad——监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例

3.onShow——监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面

4.onReady——监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发

5.onHide——监听页面隐藏

6.onUnload——监听页面卸载

7.onResize——监听窗口尺寸变化 三、组件的生命周期 uni-app 组件支持的生命周期，与vue标准组件的生命周期相同

1.beforeCreate——在实例初始化之后被调用。

2.created——在实例创建完成后被立即调用。

3.beforeMount——在挂载开始之前被调用。

4.mounted——挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTick Vue官方文档

5.beforeUpdate——数据更新时调用，发生在虚拟 DOM 打补丁之前。

6.updated——由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

7.beforeDestroy——实例销毁之前调用。在这一步，实例仍然完全可用。

8.destroyed——Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

4.网络请求: uni.request

5.上传和下载 uni.upload uni.download

6.路由和页面跳转:uni.navigateto

7.uni.switchtab 跳转到tabbar页面

8.uni.preloadpage 预加载

9.数据缓存一般异步,用于登录时保存token数据uni.setstorage

10.获取位置uni.getLocation

11.打开地图选择位置uni.chooseLocation

12.页面通讯：uni.$emit 触发全局的自定义事件，附加参数都会传给监听器回调函数

微信小程序

0、wx:if/ wx:elif/wx:else/wx:for/switch

1、wx.showToast

2、wx.hideToast

3、wx.showModal

4、wx.showActionSheet(小程序暂时无法实现分享功能)

5、wx.getStorage[Sync] 缓存

6、wx.playBackgroundAudio() 播放

7、wx.pauseBackgroundAudio() 暂停

8、wx.stopBackgroundAudio() 停止

9、wx.onBackgroundAudioPlay(function callback) 音乐开始监听

10、wx.onBackgroundAudioPause(function callback) 音乐暂停监听

11、getApp() 获取app.js

12、wx.switchTab

13、wx.redirect

14、wx.navigate

15、wx.request

16、event

17、options

18、wx.setNavigationBarTitle

19、wx.showNavigationBarLoading(Object object)

20、wx.hideNavigationBarLoading(Object object)

21、onPullDownRefresh 下拉刷新

22、onReachBottom 触底加载更多

23、bindchange

24、wx.openLocation

25、wx.login

26、wx.checkSession

27、wx.getUserInfo

28、wx.openSetting

1.wx:if wx:else :wx:for

2.wx.showToast

3.wx.hideToast

4.wx.getStorage(缓存)

5.wx.playBackgroundAudio()播放

6.wx.pauseBackgroundAudio()暂停

7.wx.switchTab

8.wx.redirect

9.wx.navigate

10.wx.request调用接口

11.onPullDownRefresh 下拉刷新

12.onReachBottom 触底加载更多

13.wx.login

14.wx.getUserInfo

项目

目标功能：

• 首页模块：顶部通栏，吸顶导航，网站头部，左侧分类，轮播图，新鲜好物，人气推荐，热门品牌，分类商品推荐，专题推荐，网站底部。

• 一级分类：面包屑，轮播图，全部二级分类，二级分类推荐商品。

• 二级分类：筛选区域，排序功能，商品列表，无限加载。

• 商品详情：商品图片展示，基本信息展示，配送城市选择，SKU选择，库存选择，商品详情展示，商品评价展示，24小时热销，相关专题，加入购物车。

• 购物车

  • 头部购物车：展示商品数量和列表，删除商品，跳转购物车页面。

  • 购物车页面：购物车商品展示，选择商品，修改数量，修改商品规格，价格计算，跳转下单

• 登录模块：表单校验，账户密码登录，手机号登录，第三方登录，绑定手机，完善信息

• 填写订单：订单商品展示，收货地址选择，收货地址修改，支付方式选择，生成订单。

• 进行支付：订单信息展示，跳转支付网关，提示正在支付，等待支付结果，跳转支付成功页面。

• 个人中心

  • 中心首页：展示个人信息，近期收藏商品，近期足迹，猜你喜欢

  • 订单管理：全部订单，待付款，待发货，待收货，待评价，已完成，已取消。立即付款，取消订单，确认收货，删除订单，查看物流。

  • 订单详情：订单状态，订单进度，详细信息。