==rem布局==
R代表root也就是html em相对单位,也就是相对于html字体大小单位
在项目中的运用,举个栗子,假定屏幕的大小是1000px,我们需要10rem来铺满屏幕,只需要设定1rem = 100px,如果假定屏幕的大小为500px,我们需要10rem来铺满屏幕,那么设定1rem = 50px,所以用js来动态计算单位rem换算成px后的大小,就可以实现rem布局

==响应式布局==

网页同时适配不同分辨率和不同手机端

1.在pc端的话屏幕大小缩放时样式发生相应改变,运用媒体查询@media的方式来设置

2.移动端响应式布局:可以运用 flex布局和rem布局

Flex是flexble box的缩写,意为弹性布局,我们可以将任何一个容器都指定为flex布局,行内元素也可以使用flex布局

当我们采用了flex布局,父元素成为了flex容器,他的所有子元素会自动成为容器成员

好处就是开发的时候只需要声明布局应该具有的行为,而不需要给出具体的实现方式,浏览器负责完成实际布局

然后它的属性有flex-direction决定主轴方向(即项目的排列方向),justify-content属性,定义了项目在主轴上的对齐方式align-items属性定义项目在交叉轴上如何对齐

==谈谈对原型链的理解==

1.说到原型链 需要简单说一下原型的概念,在每一个对象内部都会初始化一个属性叫做prototype,这个prototype就是我们所说的原型

2.而当我们访问一个对象的属性时,这个对象内部如果不存在这个属性,他就会去prototype里找这个属性,这个prototype又会有自己的prototype,于是就这样一直找下去,这就是我所理解的原型链

==谈谈promise对象==

在js中的世界中,所有的代码都是单线程执行的,由于这个原因,所以导致js的所有网络操作,浏览器事件,都必须是异步执行的,而异步执行可以用回调函数实现

Promise是异步编程的一种解决方案,将异步操作以同步操作的流程表达出来,解决了回调地狱的问题

Promise构造函数接受一个函数作为参数,该函数的两个参数分别是reslove和reject两个参数,这两个是两个函数,在回调中执行一些异步操作,如果一切正常,就调用reslove,否则调用reject

对于已经实例化过的promise对象可以调用Promise.then方法 传递resolve和reject方法作为回调,

promise的3种状态 pendding初始状态 fulfilled操作成功 rejected操作失败

promise对象的状态改变,只有两种可能,

从pending变为fulfilled从pending变为rejected,

这两种情况只要发生,状态就凝固了,不会再变了

async和await是用来搭配promise用来处理异步的流程的,async是用于申明一个function是异步的,而await是用来等待一个异步方法执行的完成

==谈谈你对原型(prototype)的理解==

1.在js中,原型是一个对象,通过原型可以实现对象的属性继承

2.Js对象中都包含了一个prototype属性,这个属性所对应的就是该对象的原型,而prototype作为对象的内部属性是不能被直接访问的,所以为了方便查看一个对象的原型,火狐和谷歌内核的js引擎中提供了proto这个非标准的访问器(在ecma新标准中引入了标准对象原型访问器,object.getPrototype(object))

3.其实原型的主要作用就是为了实现继承和扩展对象

==ES6新增的方法==

1.用let 和 const来声明,let声明变量 const声明常量

Let和const是块级作用域,以{}代码块做为作用域范围,只能在代码块里面使用,不存在变量提升,只能声明之后再使用,否则就会报错

2.模板字符串 可以当做普通字符串使用可以用来定义多行字符串 在字符串中嵌入变量 js表达式 函数需要写在${}中

3.箭头函数中的this指向的是最近的一个函数 如果没有最近的函数就指向的是window

4.promise对象

==内存泄漏==

程序在运行时对不再用到内存没有及时的释放,就叫做内存泄漏

如果对持续运行的服务进程没有进行及时的释放,内存占用越来越高,会影响系统性能

Js的垃圾回收机制

1.首先js中内存的分配和回收都是自动完成的

2.其次内存在不使用的时候会被垃圾回收器周期性的自动回收

3.最后最常见的垃圾回收机制算法是是标记清除和引用计数

标记清除的原理,是当变量进入环境时,会被标记为”进入环境’,当变量离开环境时,则标记为’离开环境’标记为离开环境的时候就回收内存

引用计数的原理是跟踪记录每一个值被引用的次数


==Eacharts==

目前项目中在登记用户数量模块中会用到可视化图表,操作的流程是

1是从官网使用npm下载echarts版本

2.将下载下来的echarts版本通过script引入或者在vue的入口文件中引入

3.然后创建一个dom元素用来放置图表

4.最后配置echarts属性

==Vuex==

1.vuex简单理解的话,它是一个全局状态管理库,可以通过它来进行全局数据流的管理

2.它由5个属性

分别是state是用来存放数据的

mutations是用来存放操作数据的方法

actions是用来存放一些异步的操作(也可以进行一些同步处理),但是要注意的是actions里面是不能直接修改state数据的,需要提交mutation来修改数据

然后还有getters是用来存放state计算出来的一些值(和计算属性有点类似)

modules是分模块处理,一般大项目里面推荐分模块管理,这样每一个模块中都拥有自己的state mutation action 和getter,但是要注意的是分模块,默认的mutations actions getters是注册到全局,一般会开启命名空间 语法是namespaced:true(设置成为true)

Vuex 的state里面 刷新后数据会丢失 你怎么解决??

Vuex的出现解决了什么问题??

==Vue的通信方式==

父传子

1.父组件内设置要传的数据,

2.在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上

3.在子组件添加参数props接收就可以了

子传父

通过vue实例方法$emit进行触发并且可以携带参数,父组件监听使用@(v-on)进行监听,然后进行方法处理

非父子通信方式

1.引入第三方new vue定义为eventbus

2.在组件中created中订阅方法eventBus.$on(‘自定义事件名’,methods中的方法名)

3.在另一个兄弟组件中的methods中写函数,在函数中发布eventBus订阅的方法eventBus.$emit(‘自定义事件名’)

4.在组件的template中绑定事件(比如click)

5.vuex

==什么是闭包==

1.闭包就是能够读取其他函数内部变量的函数

2.在js中,只有函数内部的子函数才能读取局部变量

3.我们可以将闭包理解成”定义在一个函数内部的函数’

4.并且在创建闭包最常见的方式也是在一函数内部创建另一个函数

Function fn(){

var a = 1 , b = 2

Function closure(){

return a+b

}

return closure

}

==HTML5新增的一些新特性==

1.使用docutype文件类型声明统一标准

2.增加了一些新的语义化的标签,例如article header footer等这些语义化的标签

3.新增了一些标签属性 例如charset是用在meta标签上,用来设置utf-8字符集

4.新增了API 例如本地存储等等

==作用域==

1.概念=>就是变量的有效范围,在一定空间里可以对数据进行读写操作,这个空间就是数据的作用域

2.分类=>作用域可以分为 全局作用域 局部作用域和块级作用域

全局作用域就是最外层函数定义的变量拥有全局作用域,对任何内部函数来说,都是可以访问的

局部作用域 一般只在固定的代码片段内可以访问到,而对于函数外部是无法访问的,,在es6之前,只有函数可以划分变量的作用域,所以在函数的外部是无法访问到函数内的变量的

块级作用域:凡是代码块就可以划分变量的作用域

==如何解决跨域的问题==

说到解决跨域的问题

1.首先要了解为什么会出现跨域的问题,在目前前后端分离的情况下,

前后端的域名是不一致的,所以当我们通过ajax向服务器请求数据的时候会受到同源策略的限制,ajax请求不能发送,不仅是请求不能发送还包括本地存储的也是无法读取的

2.同源策略就是”协议+端口+域名”三者要相同,即使两个不同的域名指向的是同一个ip地址也并非同源 所以这个时候就需要解决跨域的问题

3.解决跨域的方式 我目前所了解的是有10中

重点说一下常见的几种跨域解决方式分别是

3.1JSONP跨域

它的原理就是利用标签没有跨域的限制

Jsonp的缺点就是只能发送get一种请求

3.2CORS是允许浏览器向服务器发送XMLHttpRequest请求,来解决ajax受同源策略无法发送请求的限制

但是CORS需要浏览器和服务器同时支持

3.3通过linx反向代理

之前一直都是让后端通过配置Access-Control-Allow-Origin来解决跨域的问题现在

在前端项目中我们通常使用webpack来打包和运行项目，在webpack的devServer配置里面添加代理参数

==本地存储的方式和区别== 存储方式有5种方式

分别是cookies localStorage sessionStorage webSQL indexdDB

webSQL这个存储方式目前已经被废弃了

indexDB的话,比较适用于需要大量存储数据的场景,存储空间的容量大于等于250MB甚至没有上限

重点区别一下cookie localStorage 和sessionStorage

Cookie可以设置过期的时间 路径是domain限制存储20个cookie 会为每个请求会自动携带上所有的cookies数据,所以的话它会在浏览器和服务器之间来回的传递,比较消耗流量,但是seesonStorage和localStorage仅仅只是在本地存储

另外存储大小的限制也不同,cookie的数据容量只有4k,所以cookie只适合保存很小的数据,浏览器的api比较原始,需要自行通过js-cookie封装操作

localStorage和seesionStorage虽然也有存储大小的限制,但是比cookie大的多,可以达到5M甚至更大

他们的数据有效期也是不同的,

像cookie的话是在cookie过期时间之前一直有效的即使窗口或者浏览器关闭,只要在它的过期时间之前一直是有效的然后locakStorage的话,它的数据有效期是永久存储的,除非手动删除,sessionStorage和localStorage类似 区别是seesionStorage仅仅在当前页面关闭后会被自动清理,自然不可能达到持久的保持

==Js的运行机制==

Js是单线程的,不可以同时执行多个任务

Js里同时也会有异步的操作,js会优先执行同步的任务然后再执行异步的操作,例如settimeout和setinterval属于异步的操作,在同步操作完成之前,异步的操作是不会被执行的

==Vue的生命周期==

Vue实例从创建到销毁的过程,就是生命周期

Vue的生命周期是从初始化数据、编译模板、挂载DOM=>渲染、更新=>渲染、卸载等一些列过程,我们称这是vue的生命周期

主要有这几个钩子函数

1.beforeCreate

在实例初始化之后

2.created是在实例创建完成之后被立即调用,在这一阶段,挂载阶段还没开始,所以$el属性目前的话还是不可见

3.beforeMount

是在挂载之前被调用,相关的render函数首次被调用

4.mounted

el被新创建的vm.$el替换,并挂载到了实例上去之后调用该钩子

5.beforeupdate数据更新时调用

6.updated数据更改导致的虚拟DOM重新渲染和打补丁,在这之后调用钩子

7.activated

Keep-alive组件激活时调用,该钩子在服务器端渲染期间不被调用

8.deactivated

keep-alive组件停用时停用,该钩子在服务器端渲染期间不被调用

9.beforeDestory

实例销毁之前调用

10.destoryed

Vue实例销毁之后调用 调用之后,vue实例指示的所有东西都会解绑定 所有的事件监听器会被移出,所有的子实例也会被销毁

还有errorCaptured当铺货一个来自子孙组件的错误时被调用,这个钩子函数会收到三个参数:错误对象 发生错误的组件实例和一个包含错误来源信息的字符串,这个钩子可以返回false来阻止错误继续向上传播

==foreach和map,filter区别==

Foreach和map的最大区别就是,foreach没有返回值,即便我们给foreach加上return也没有用

Filter是过滤的意思,filter会返回一个新数组并不会改变原数组

Find和some很类似 都是寻找符合条件的,只不过some是只要找到一个合适条件的,就会来报告true,所以并不会全部遍历,不做多余的活儿,所以some的性能比较优良

==深拷贝和浅拷贝==

我们知道数据类型有基本数据类型和对象数据类型,

基本数据的类型特点是直接存储在栈中,而引用数据类型是存储在该对象在栈中的引用,真实的数据存放在堆内存中

引用数据类型在栈中存储了指针,指针指向的是堆中该实体的起始地址,当解释器寻找引用值时,会首先检索它在栈中的地址,取得地址之后从堆中获得实体

深拷贝和浅拷贝只是针对object和array这样的引用数据类型的

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。

当我们把一个对象赋值给一个新的变量时，赋的其实是这个对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。

浅拷贝它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值；如果属性是（引用类型），拷贝的就是内存地址 ，因此如果其中一个对象改变了这个地址，就会影响到另一个对象,

但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

1.Object.assign()

Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。但是 Object.assign()进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。

2.Array.prototype.concat()

修改新对象会改到原对象:

3.Array.prototype.slice()

同样修改新对象会改到原对象:

关于Array的slice和concat方法的补充说明：Array的slice和concat方法不修改原数组，只会返回一个浅复制了原数组中的元素的一个新数组。

原理：

用JSON.stringify将对象转成JSON字符串，再用JSON.parse()把字符串解析成对象，一去一来，新的对象产生了，而且对象会开辟新的栈，实现深拷贝。这种方法虽然可以实现数组或对象深拷贝,但不能处理函数

这是因为JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串，不能接受函数

2.手写递归方法

递归方法实现深度克隆原理：遍历对象、数组直到里边都是基本数据类型，然后再去复制，就是深度拷贝

==谈谈你对BFC的理解==

BFC Block Formatting Context 块级格式化上下文

这是一个用于在盒模型下布局块级盒子的独立渲染区域

将处于BFC区域内和区域外的元素进行互相隔离

何时会形成BFC

BFC应用场景

场景一:防止两个相邻的块级元素上下margin发生重叠(解决margin合并问题)

属于同一BFC的,两个相邻块级元素的上下margin会重叠,如果想让它们不重叠,可以通过让这两个相邻的块级子元素分别属于不同的BFC

举个栗子:

有两个盒子A和B盒子分别设置宽高都是200px,A盒子设置margin-bottom:10px,B盒子设置margin-top:10px,我们预期的是两个盒子之间的距离应该是20px,但是实际情况是相邻块级元素的上下margin会重叠 所以实际两个盒子之间的距离是10px,那么这个时候如果我们让其中一个盒子触发BFC,通过将B盒子设置为display:inline-block是可以触发BFC的,这个时候,两个盒子之间的距离就是20px

场景二:清除浮动

有父盒子和子盒子两个盒子,都没有设置高度,给子盒子设置浮动,父元素会没有高度,需要清除浮动可以设置overflow:hidden


=====咱两都用同一个账号去登录,然后购物车以后去加载商品,然后你那里会同步的去显示么,登录模块是怎么去实现登录的,登录之后怎么去判断我当前登录的人是谁呢,登录成功之后 我就得去加载一下我之前的订单记录

登录了以后要获取当前登录人的用户信息

获取到登录信息之后要查询订单去判断这个人去查询他当前的订单

登录之后你怎么知道他有哪些订单呢?

你有用过vue的插槽么 你简单介绍一下项目中vue的插槽的使用

我之前所在公司 团队一共是有14个人 前端有4个人 其余呢还有ui 包括产品 项目经理等等

主要做的项目呢第一个是高校第二个医院

像高校呢主要是负责他们科研类的项目实施,就是他们会接一些国家的一些科研的课题衍生出来的一些项目或者需求,我们会帮他们去做一些实施,他们计算的项目是偏多的,主要也是通过前端vue后端Java这些,他们在页面中录入他们计算中写数据,按照流程一步一步的录入数据中间开始计算结果,会涉及到表格 地图甚至会在地图上去做一些展示

然后另外就是医院这边做的主要是有一个’’面向医院的产品,主要我们公司自己的产品,主要是面向针对家具的报修,家具的设备如果有什么故障的就可以在这个项目里面去进行报修,有手机端有PC端,报修完之后维修人员就会在他电脑上看到报修信息,然后他就会根据报修信息去进行一个线上操作或者现下去进行一个维修,维修之后它由评论和评价一连串的流程,目前公司的薪资状况 基础工资会有1~3个月的年终奖,就是平时的绩效考核情况 项目奖金 是由这三部分组成的,然后7险一金 除了社保和公积金之外 还会有意外和大病的保险 就是为了防止意外 公司上班时间是朝九晚六