前端面试题 一期

1、vue 中 data 属性为什么必须是函数？

当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。

2、computed 和 watch 的区别？

watch和computed各自处理的数据关系场景不同

• watch擅长处理的场景：一个数据影响多个数据
  
• computed擅长处理的场景：一个数据受多个数据影响
  computed用于处理复杂的逻辑运算，主要和methods储存方法来进行区分；methods储存方法，computed储存需要处理的数据值；methods每次都会调用，computed有缓存机制，只有改变时才执行，性能更佳； watch顾名思义，用于监听数据变化，其中可以监听的数据来源有三部分：props、data、computed内的数据；watch提供两个参数（newValue，oldValue），第一个参数是新值，第二个参数保存旧值；

computed和watch的区别：
computed是计算属性，事实上和data对象里的数据属性是同一类的（使用上）； 支持缓存，只有依赖数据发生改变，才会重新进行计算； 不支持异步，当computed内有异步操作时无效，无法监听数据的变化； computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过的数据通过计算得到的； 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed； 如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法； watch是侦听属性； 不支持缓存，数据变，直接会触发相应的操作； watch支持异步； 监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值； 当一个属性发生变化时，需要执行对应的操作；一对多；

3、v-if 和 v-show 的区别？

v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建。v-if也是惰性的：如果初始渲染时条件为假，则什么也不做--直到第一次为真时才开始渲染条件块。 v-show不管初始条件是什么，总是会被渲染，并且只是简单的基于css进行切换。 一般来说，v-if具有更高的切换开销，而v-show具有更高的初始渲染开销。因此，如果需要频繁的切换则使用v-show更好，反之，使用`v-if``。

4、vue 双向数据绑定的实现原理

核心就是数据劫持+发布/订阅模式，使用Object.defineProperty()方法监控对数据的操作，从而自动触发数据同步。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都执行一次检测。

5、webpack打包后文件体积过大怎么办

异步加载模块（代码分割）；提取第三方库（使用cdn或者vendor）；代码压缩；去除不必要的插件；去除devtool选项等等。

6、说说CSS选择器以及这些选择器的优先级

• !important
• 内联样式（1000）
• ID选择器（0100）
• 类选择器/属性选择器/伪类选择器（0010）
• 元素选择器/关系选择器/伪元素选择器（0001）
• 通配符选择器（0000）

7、你知道什么是BFC么

什么是BFC
BFC 全称为块级格式化上下文 (Block Formatting Context) 。BFC是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用，当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。可以说BFC就是一个作用范围，把它理解成是一个独立的容器，并且这个容器里box的布局与这个容器外的box毫不相干。

触发BFC的条件

• 根元素或其它包含它的元素
• 浮动元素 (元素的 float 不是 none)
• 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
• 内联块 (元素具有 display: inline-block)
• 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
• 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
• 具有overflow 且值不是 visible 的块元素
• 弹性盒（flex或inline-flex）
• display: flow-root
• column-span: all BFC的约束规则
  
• 内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）
• 处于同一个BFC中的元素相互影响，可能会发生外边距重叠
• 每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
• 计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算
• 浮动盒区域不叠加到BFC上 BFC可以解决的问题
• 垂直外边距重叠问题
• 去除浮动
• 自适用两列布局（float + overflow）

8、了解跨域吗，一般什么情况下会导致跨域

跨域行为

• 同源策略限制、安全性考虑
• 协议、IP和端口不一致都是跨域行为

JSONP
Web前端事先定义一个用于获取跨域响应数据的回调函数，并通过没有同源策略限制的script标签发起一个请求（将回调函数的名称放到这个请求的query参数里），然后服务端返回这个回调函数的执行，并将需要响应的数据放到回调函数的参数里，前端的script标签请求到这个执行的回调函数后会立马执行，于是就拿到了执行的响应数据。
缺点： JSONP只能发起GET请求。

CORS（跨域资款共享） CORS（跨域资源共享 Cross-origin resource sharing）允许浏览器向跨域服务器发出XMLHttpRequest请求，从而克服跨域问题，它需要浏览器和服务器的同时支持。

• 浏览器端会自动向请求头添加origin字段，表明当前请求来源。
• 服务器端需要设置响应头的Access-Control-Allow-Methods，Access-Control-Allow-Headers，Access-Control-Allow-Origin等字段，指定允许的方法，头部，源等信息。
• 请求分为简单请求和非简单请求，非简单请求会先进行一次OPTION方法进行预检，看是否允许当前跨域请求。

简单请求：请求方法是以下三种方法之一：

• HEAD
• GET
• POST HTTP的请求头信息不超出以下几种字段：
• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain 后端的响应头信息：
• Access-Control-Allow-Origin：该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。
• Access-Control-Allow-Credentials：该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。
• Access-Control-Expose-Headers：该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。

非简单请求:
非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

• Access-Control-Request-Method：该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法，上例是PUT。
• Access-Control-Request-Headers：该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段，上例是X-Custom-Header。 如果浏览器否定了"预检"请求，会返回一个正常的HTTP回应，但是没有任何CORS相关的头信息字段。这时，浏览器就会认定，服务器不同意预检请求，因此触发一个错误，被XMLHttpRequest对象的onerror回调函数捕获。

其他跨域解决方案

• Nginx反向代理
• postMessage
• document.domain

9、HTTP2和HTTP1有什么区别

相对于HTTP1.0，HTTP1.1的优化：

• 缓存处理：多了Entity tag，If-Unmodified-Since, If-Match, If-None-Match等缓存信息（HTTTP1.0 If-Modified-Since,Expires）
• 带宽优化及网络连接的使用
• 错误通知的管理
• Host头处理
• 长连接： HTTP1.1中默认开启Connection： keep-alive，一定程度上弥补了HTTP1.0每次请求都要创建连接的缺点。

相对于HTTP1.1，HTTP2的优化：

• HTTP2支持二进制传送（实现方便且健壮），HTTP1.x是字符串传送
• HTTP2支持多路复用
• HTTP2采用HPACK压缩算法压缩头部，减小了传输的体积
• HTTP2支持服务端推送