面试题--yc

1. 浏览器的cors是什么，如何解决cors引起的跨域问题，你在平常的项目中常用的跨域方式有那些。

• 同源访问策略，即域名端口协议一致的浏览器安全限制策略

cors

• cors是跨域资源共享（Cross-origin resource sharing）
• cors允许浏览器向跨源服务器发出请求，克服了ajax只能同源访问的限制
• cors需要服务器和浏览器同时支持 [操作仅需服务器配置响应头allow-origin]

跨域解决方案

1 webpack中配置proxy代理实现

  devServer: {
    proxy: {
      '/api': {
        target: `http://192.168.67.107:13012`,
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }

2 nginx配置

• 利用nginx反向代理把跨域为不跨域，支持各种请求方式

配置步骤

1. 配置文件根目录 root + index
2. 配置代理地址

  location ^~/applycard-service/ {
    rewrite ^~/applycard-service/(.*)$ /applycard-service/$1 break;
    proxy_pass IP
  }

2. cookie是什么, cookie是如何和后台通讯的,如何新增一个cookie变量

cookie是什么

• cookie被称为 会话跟踪技术 ，顾名思义就是在每一次会话中记录一些状态，首先会话指的是浏览器打开一个网站到访问它的其他页面直到网站关闭的过程。cookie就可以从会话开始到结束的整个状态全程跟踪记录客户端状态（是否已登录，购物车信息，是否已下载，是否已点赞，播放进度…）

新增cookie

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT"

3. cookie 与 localStorage , sessionStroage 之前的区别在那里

区别	cookie	localStorage	sessionStorage
特性	一般由服务器生成,可设置失效时间; 关闭浏览器后失效	除非手动清除,否则永久保存	仅在当前会话下有效; 关闭浏览器后失效
存放数据大小	4k左右	5M左右	5M左右
与服务端通信	每次都会携带在http头,如果cookie过大会影响性能	仅保存在客户端,不参与通信	仅保存在客户端,不参与通信

4. const var let 有什么区别

• var 会进行变量声明的提升，且同一作用域内允许重复声明
• let const 不会进行变量声明的提升，且同一作用域内不允许重复声明，在声明它之前是不允许使用该变量的，即声明之前是变量的 暂时性死区
• const 声明一个只读的常量，且声明后，常量的值是不能改变的; 引用类型的属性值可以修改

5. vue中的 $nextTick 有什么作用 ，请举出一个具体的业务场景进行说明

• 由于vue的数据驱动视图更新是异步的，即修改数据的当下，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。
• 在同一事件循环中的数据变化后，DOM完成更新，立即执行nextTick(callback)内的回调。

应用

<div class="input" :class="[wrong=='phone'?'wrong':'']">
    <span>{{guardian}}手机号码：</span>
    <input type="number" v-model="userInfo.mobile" @blur="check('phone',$event)" @focus="changeClass" placeholder="请输入手机号码" :readonly='isReadonly' ref="mobile" />
    <img v-if="!isReadonly" src="../../assets/img/edit-icon.png" alt="" @click="gotoFocus" />
</div>

gotoFocus() {
    this.$nextTick(() =>{
        this.$refs.mobile.focus()
    })
},

6. css 如何进行垂直居中

 /* ① */
.father_box {
  display: flex;
}
.son_box {
  margin: auto
}
/* ② */
.father_box {
}
.son_box {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
/* ③ */
.father_box {
}
.son_box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}
/* ④ */
.father_box {
}
.son_box {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -(son_box.width/2)px
  margin-top: -(son_box.height/2)px
}

7. css中 position 属性里面 abosolute ， fixed ，relative 的区别

相同点

• 都脱离了文档流

不同点

• abosolute相对定位，相对于最近的有定位属性的父元素，脱离文档流
• fixed固定定位，相对于屏幕，脱离文档流
• relative绝对定位，相对于本身原来的位置而言

8. http状态码有哪几类，403代表什么

分类

分类	分类描述
2XX	成功，操作被成功接收并处理
3XX	重定向，需要进一步操作
4XX	客户端错误，请求包含语法错误or无法完成请求
5XX	服务端错误，服务器在处理请求的工程中发生了错误

2XX 类

状态码	英文名称	描述
200	OK	请求成功

4XX 类

状态码	英文名称	描述
400	Bad Request	客户端请求的语法错误，服务器无法理解，请求参数有误
401[407]	Unauthorized	请求要求用户身份认证
403	Forbidden	服务器理解客户端的请求，但拒绝执行此请求
404[410]	Not Found	服务器无法根据客户端的请求找到资源
405	Allowed Method Not	客户端请求中的方法被禁止
406	Not Acceptable	请求的资源的内容特性无法满足请求头中的条件，无法生成响应实体
408	Request Time-out	请求超时
413	Request Entity Too Large	请求体过大
414	Large Request-URI Too Large	请求的URI过长(URI通常为网址)，服务器无法处理

5XX 类

状态码	英文名称	描述
500	Error Internal Server	服务器内部错误，无法完成请求
501	Not Implemented	服务器不支持请求的功能，无法完成请求
502	Bad Gateway	充当网关或代理的服务器，从远端服务器接收到了一个无效的请求
503	Service Unavailable	由于超载或系统维护，服务器暂时的无法处理客户端的请求
504	Gateway Time-out	充当网关或代理的服务器，未及时从远端服务器获取请求

9. 浅拷贝与深拷贝的区别, 如何实现浅拷贝，如何实现深拷贝

• 浅拷贝：只拷贝了变量存储的内容
  • Object.assign()
• 深拷贝：基本类型变量拷贝变量存储的内容；引用类型变量拷贝变量存储的指针指向的内容
  • json.toString() + json.stringify
  • 自定义方法

function deepClone(o) {
  if (o == null || typeof o !== 'object') {
    return o
  } else {
    // let result = new val.constructor();
    // for(let key in val){
    //   if(val.hasOwnProperty(key)){
    //   // result[key] = val[key];
    //     result[key] = deepClone(val[key]);//递归：函数自己调用自己
    //   }
    // }
    let type = Object.prototype.toString.call(o)
    if (type == '[object Object]') {
      let newO = {}
      o.keys().map(item => newO[item] = deepClone(o[item]))
      return newO
    } else if (type == '[object Array]') {
      let newO = []
      o.map(item => newO.push(deepClone(item)))
      return newO
    }
  }
}

10. vue中 created 与 mounted 的区别 ， 请举出一个具体的业务场景进行说明

• created: 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

• mounted: 在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

应用

mounted() {
    this.chart = echarts.init(document.getElementById(this.id))
    // ...
},

11. vue中 v-if 与 v-show 的区别 ， 请举出一个具体的业务场景进行说明

v-if	v-show
通过创建/移除的方式控制元素的显示隐藏	通过display属性控制元素的显示隐藏
不频繁的显示隐藏	频繁的显示隐藏

12. vue-router里 hash 模式 与 history 模式 的区别

• vue-router 在 hash 模式下，hash 虽然在 URL 中，但 不被包括在 HTTP 请求中

• vue-router 在 history 模式下，如http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将 返回 404 错误

13. 请阐述javascript的prototype工作原理

14. 请阐述javascript的闭包工作原理， 请举出一个具体的业务场景进行说明

• 闭包是指有权访问另一个函数作用域的变量的函数。

• 常见方式：在一个函数内部创建另一个函数

• 内部函数的作用域链包含了外部函数的作用域

应用

// 节流
function jieliu(func, delay) {
	let run = true
	return function() {
		if(!run) {
			return
		}
		run = false
		setTimeout(() => {
			func.apply(this, argument)
			run = true
		}, delay)
	}
}
// 防抖
function fangdou(func, delay) {
	let timeout
	return function() {
		clearTimeout(timeout)
		timeout = setTimeout(() => {
			func.apply(this, arguments)
		}, delay)
	}
}

15. vue中 computed 与 watch 的区别

• watch用于监听实例下属性,当监听的属于发生改变时,会触发对应的方法;

• computed 当它依赖的响应式属性发生改变时,会触发该属性重新计算;

  • computed定义的值没有在视图层被用到，依赖到的响应式属性改变时是否重新计算? 不会

  • 视图在渲染时没用到computedTest，也不会为computed收集依赖，所以this.a、this.b的修改并不影响computed

16. vuex的作用是什么，为什么使用它，mutation 与 action 的区别

• vuex是一个专门为vue开发的状态管理工具, 采用 集中式存储 管理所有组件的公共状态

• vuex的出现就是 为了解决多组件间的数据通讯

• vuex方便获取、修改、更新数据

区别

1、流程顺序

• 相应视图 -> 修改state 拆分成两部分: 视图触发action; action再触发mutation。

2、角色定位

基于流程顺序，二者扮演不同的角色。

• mutation：专注于修改state，理论上是修改state的唯一途径。

• action：业务代码、异步请求。

3、限制

角色不同，二者有不同的限制。

• mutation：必须同步执行。

• action：可以异步，但不能直接操作state，而是通过 action 来提交 mutations

17. vue的响应式工作原理

• vue在实例化的过程中会遍历data下的数据, 通过Object.definedProperty将他们设置为存储器属性(即具有getter setter属性).

18. 浏览器缓存原理

19. 分析一下get和post的不同

1. get参数通过url传递，参数可见且不够安全，不能用来传递敏感信息；post放在request body中，参数不可见，相对而言比较安全

2. get请求在url中传递的参数是有长度限制的（一般不超过2k-4k，取决于浏览器）；而post没有

3. get请求只能进行url编码，而post支持多种编码方式

4. get请求会浏览器主动cache，而post除非手动设置，否则不会

5. get只接受ASCII字符的参数类型，而post没有限制

6. get请求参数会被完整保留在浏览历史记录里，而post中的参数不会被保留

7. get和post本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同

8. get产生一个TCP数据包；post产生两个TCP数据包

• 对于get请求，浏览器会把 http header 和 data 一并发送出去，服务器响应 200；

• 而对post请求，浏览器先发送 header，服务器响应 100，浏览器再发送 data，服务器响应 200。