position定位有哪几种属性，区别是什么

relative 相对定位，相对与自己定位，不影响元素本身特性，不会使元素脱离文档流

absoluet 绝对定位，相对于最近一个有定位的父元素偏移；使元素完全脱离文档流（在文档流中不再占位）

fixed 固定定位，根据浏览器窗口定位
static 是默认值，默认布局，元素出现在正常的流中

sticky 粘性定位 粘性定位，该定位基于用户滚动的位置。

说一说flex布局

flex是弹性布局；通过主轴和交叉轴两条轴上的排布方式来控制布局。

使用它时，在父容器上使用 display:flex

flex-direction:row;//改变子元素流动的方向（主轴）
flex-wrap:nowrap; //改变折行
justify-content:flex-start;//主轴对齐方式（默认主轴是横轴，除非你改变了flex-direction）
align-items:stretch;//次轴对齐方式
order:1; //按着从小到大排序，-1放在第一位
flex-grow:1;//元素的占比大小
flex-shrink:5;//当空间不够时，控制谁变瘦，谁值大谁先变瘦的快 ,0时不变瘦，1是默认

说一下函数内部this指向有哪几种

1.在普通的函数中this指向window

   function fn() {
      console.log(this);
    }  
    fn();  

2.在定时器中this指向window

//setTimeout/setInterval
setTimeout(function(){
  console.log(this);
},0);

3.在构造函数中，this指向当前创建的对象Person

function Person() {
  console.log(this);
}
const p = new Person();

4.在方法中，this指向调用者obj

var obj = {
  name:'张三',
  sayHi:function() {
    console.log(this);
  }
}
obj.sayHi();

如何改变this的指向

这个和上一题是配套的，面试官一般都喜欢深入问，问完原理问优缺点，问完优缺点之后就开始问你解决方案了

可以使用applay,call,bind改变this的指向

apply()的第一个参数是null，在非严格模式下，第一个参数为null或者undefined时会自动替换为指向全局对象，apply()的第二个参数为数组或类数组。
该方法在函数被借用时，会立即执行，

var max = Math.max.apply(null, [1, 2, 3, 4, 5]);
console.log(max); // 输出5

call() 是apply的语法糖，作用和apply()一样，同样可实现继承，唯一的区别就在于call()接收的是参数列表，而apply()则接收参数数组。

var max = Math.max.call(null, 1, 2, 3, 4, 5);
console.log(max); // 输出5

bind() 的作用与call()和apply()一样，都是可以改变函数运行时上下文，区别是call()和apply()在调用函数之后会立即执行，而bind()方法调用并改变函数运行时上下文后，返回一个新的函数，供我们需要时再调用。

var person = {
  name: 'person',
  getName: function() {
    return this.name;
  }
}
var boy = {
   name: 'oldCode'
}
// bind()返回一个新函数，供以后调
var getName = person.getName.bind(boy);
// 现在调用
console.log(getName());    // 输出oldCode

什么是闭包? 有什么应用场景

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

闭包的应用场景：

• 最简单的闭包，内部函数访问上级函数参数的情况
• 外部函数可以访问另一函数内部的参数，这种是大家比较在意的一种用法
• 封装功能时(需要使用私有的属性和方法)，函数防抖、函数节流

闭包的优点

• 可以重复使用变量，并且不会造成变量污染
• 可以用来定义私有属性和私有方法。

闭包的缺点

• 比普通函数更占用内存，会导致网页性能变差，在IE下容易造成内存泄露。

用户请求到收到服务端反馈的整个过程发生了什么

一般背会第一段就可以了

用户首先在浏览器输入请求的url地址，浏览器内部会将这个url进行拆分解析，最终将域名发送到DNS服务器上，DNS服务器会根据域名去查询相关对于的ip地址，从而将IP地址返回给浏览器，浏览器持有ip地址后就会知道这个请求是要发送到哪个地方，然后跟随协议，将ip地址打在协议中，并且请求的相关的参数都会在协议中携带，最终发送到网络中去

然后经过我们自己的局域网——交换机——路由器——主干网络——最终到达服务端

服务端是有个MVC架构的请求会首先进入到控制器中进行相关的逻辑处理和请求的分发——调用Model层（负责和数据进行交互）数据交互的过程中Model会去读取redis和数据库里面的数据——获取到数据之后叫渲染好的页面通过View层返回给网络

这时候一个HTTP请求的Response又从服务端返回到浏览器，浏览器做一个render的过程（就是根据请求回来的html以及这个html所关联的css，js去进行渲染的过程，那么渲染的过程中浏览器会根据html去形成相关的dom树以及对应的css树，然后对dom树和css树进行整合，最终知道某个dom节点知道需要什么样的样式，从而进行样式的渲染）样式渲染完成之后，浏览器会进一步去执行下面的js脚本，执行动态的页面的能力，从而最终的页面就在浏览器中展现出来了

跨域有哪几种方式，如何实现

解答这道题首先回答一下什么是跨域

跨域：浏览器出于安全方面的考虑，只允许与本域下的接***互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。

解决跨域的方式：

1. CORS: 全称是跨域资源共享，是一种 ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。当你使用XMLHttpRequest发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin(访问控制允许来源); 浏览器判断该相应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。

res.setHeader('Access-Control-Allow-Origin','指定的允许地址')

如果浏览器版本过低，则不支持CORS;此时可以使用JSOP

1. JSOP:JSONP是通过script 标签加载数据的方式去获取数据当做 JS代码来执行 提前在页面上声明一个函数，函数名通过接口传参的方式传给后台，后台解析到函数名后在原始数据上「包裹」这个函数名，发送给前端。换句话说，JSONP需要对应接口的后端的配合才能实现。
   实现方式：
   HTML 中 script标签可以加载其他域下的js

script src="http://api.jirengu.com/weather.php">script>

这时候会向此接口发送请求获取数据，获取数据后做为 js 来执行。但这里有个问题， 数据是 JSON 格式的数据，这个请求到达后端后，后端会去解析callback这个参数获取到字符串showData，在发送数据做如下处理：

<script src="http://api.jirengu.com/weather.php?callback=showData"></script>    

http请求方法有哪些，有什么区别

1. GET：它本质就是发送一个请求来取得服务器上的某一资源。资源通过一组HTTP头和呈现据（如HTML文本，或者图片或者视频等）返回给客户端。GET请求中，永远不会包含呈现数据。

2. HEAD：HEAD和GET本质是一样的，区别在于HEAD不含有呈现数据，而仅仅是HTTP头信息。有的人可能觉得这个方法没什么用，其实不是这样的。想象一个业务情景：欲判断某个资源是否存在，我们通常使用GET，但这里用HEAD则意义更加明确。

3. PUT：这个方法比较少见。HTML表单也不支持这个。本质上来讲， PUT和POST极为相似，都是向服务器发送数据，但它们之间有一个重要区别，PUT通常指定了资源的存放位置，而POST则没有，POST的数据存放位置由服务器自己决定。

4. DELETE：删除某一个资源。基本上这个也很少见，不过还是有一些地方比如amazon的S3云服务里面就用的这个方法来删除资源。

5. POST：向服务器提交数据。这个方法用途广泛，几乎目前所有的提交操作都是靠这个完成。

6. OPTIONS：这个方法很有趣，但极少使用。它用于获取当前URL所支持的方法。若请求成功，则它会在HTTP头中包含一个名为“Allow”的头，值是所支持的方法，如“GET, POST”。

get和post区别:get是向服务端请求数据，post是服务端向客户端发送数据

vue双向绑定原理

当数据传入vue的实例中作为data数据时，vue将遍历此对象的所有property,并且使用Object.defineProperty把他们转化为getter和setter方法,而get和set正是对属性的读写进行监控

vuex是干什么的

Vuex 是一个专为Vue.js 应用程序开发的状态管理模式

vuex中有几个核心的方法:

  1. state用于存放全局数据

  2. getter用于对Store中的数据进行加工处理形成新的数据。不会修改原数据

  3. mutations里面就是写对数据进行操作的方法的

  4. action用于处理异步任务。

vue2.0与3.0的区别

1. 项目目录结构：vue-cli2.0与3.0在目录结构方面，有明显的不同
   vue-cli3.0移除了配置文件目录，config 和 build 文件夹
   同时移除了 static 静态文件夹，新增了 public 文件夹，打开层级目录还会发现， index.html 移动到 public 中

2. 配置项

3. 0 config文件已经被移除，但是多了.env.production和env.development文件，除了文件位置，实际配置起来和2.0没什么不同
   没了config文件，跨域需要配置域名时，从config/index.js 挪到了vue.config.js中，配置方法不变

4. 渲染
   Vue2.x使用的虚拟Dom实现的渲染
   Vue3.0不论是原生的html标签还是vue组件，他们都会通过h函数来判断，如果是原生html标签，在运行时直接通过Virtual Dom来直接渲染，同样如果是组件会直接生成组件代码

4. 数据监听
   Vue2.0使用的是es5的object.defineproperties中getter和setter实现的，而vue3.0的版本，是基于Proxy进行监听的，其实基于proxy监听就是所谓的lazy by default懒加载，什么意思呢，就是只要你用到了才会监听，可以理解为‘按需监听’，官方给出的诠释是：速度加倍，同时内存占用还减半。

5. 按需引入
   Vue2.0中new出的实例对象，所有的东西都在这个vue对象上，这样其实无论你用到还是没用到，都会跑一变。而vue3.0中可以用ES module imports按需引入，如：keep-alive内置组件、v-model指令等。

最后

欢迎关注我的专栏，我会经常发布真实面试题与解析，大家一起学习共同进步，早日得到心仪的offer