HTML5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

*HTML5 现在已经不是 SGML(标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言) 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

*拖拽释放(Drag and drop) API

  语义化更好的内容标签（header,nav,footer,aside,article,section）

  音频、视频API(audio,video)

  画布(Canvas) API

  地理(Geolocation) API

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

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

*支持HTML5新标签：

* IE8/IE7/IE6支持通过document.createElement方法产生的标签，

  可以利用这一特性让这些浏览器支持HTML5新标签，

  浏览器支持新标签后，还需要添加标签默认的样式：

* 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

  <!--[if lt IE 9]>

  <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

  <![endif]-->

*如何区分： DOCTYPE声明\新增的结构元素\功能元素

css3中的transform有哪些属性？分别用来实现什么效果？

*transform 可用于内联(inline)元素和块级(block)元素，它有几个属性值参数：

translate 位移：基于 X 和 Y 坐标重新定位元素，当使用一个参数时表示 X 轴和 Y 轴的参数相同，效果类似 position:relative 。

scale 缩放：可以让任一元素变大、变小。它使用一个或者两个正数和负数以及小数作为参数，当使用一个参数时表示 X 轴和 Y 轴的缩放相同。

rotate 旋转：通过传递一个度数值来转动一个对象。

skew 倾斜：参数是度数，当使用一个参数时表示 X 轴和 Y 轴的参数相同。

matrix 矩阵变换：基于 X 和 Y 坐标重新定位元素，它使用 6 个参数。

localStorage、sessionStorage、cookie有什么区别？

*sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

localstorage和cookie的区别

localStorage的概念和cookie相似，区别是它是为了更大容量存储设计的。

Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，localStorage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而localStorage仅仅是为了在本地“存储”数据而生。

什么是同源策略？你都知道哪些解决跨域的方法？

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。

如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

同源

域名、协议、端口相同，也就是在同一个域里。

JSONP的基本原理 动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。

CORS（跨域资源共享）

图像 Ping 跨域

document.domain 跨域

服务器代理

window.name 跨域

location.hash 跨域

postMessage 跨域

列举JavaScript的基本数据类型和引用数据类型

Number、String 、Boolean、Null和Undefined。基本数据类型是按值访问的，因为可以直接操作保存在变量中的实际值。

引用类型数据：也就是对象类型Object type，比如：Object 、Array 、Function 、Data等

Vue2.0的生命周期有哪些？分别解释其意思

1.beforeCreate

创建前的状态(创建实例前，vue实例的属性值为undefined)。

2.created

实例创建完成后(data被定义了，但el属性为undefined)。然而，挂载阶段还没开始，$el属性目前不可见。

3.beforeMount

挂钩前(DOM渲染前)，el属性已经拿到对应的DOM元素。

4.mounted

挂载结束(Dom渲染完成，el属性的Dom的数据将被渲染)，对已有dom节点的操作可以在这期间进行。

5.beforeUpdate

数据变化前的调用。

6.updated

数据变化后的钩子。

7.beforeDestroy

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

8.destroyed

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

详述组件通信

父组件传值给子组件

1、给子组件绑定一个自定义属性用来挂载父组件的变量

2、在子组件中用props来接受自定义属性  props:['属性1'，‘属性2’……]

3、在方法中中或者模板输出（接受的自定义属性）即可

子组件传值给父组件

在子组件中调用父组件的方法

1、给父组件创建方法

2、在子组件绑定自定义事件（v-on）,在自定义事件上挂载父组件的方法名

3、在子组件的方法中 调用父组件的方法

调用方式  this.$emit('自定义的事件名'，)

this.$emit(自定义的事件名,实参列表);

路由钩子函数（导航守卫）

概念

导航发生变化时，导航钩子主要用来拦截导航，让它完成跳转或取消

拦截方式

全局的

beforeEach - 前置钩子函数

参数to、from、next

to：去哪里

from：从哪里

next()：是否跳转由它决定

使用场景 - 未登录去下单，跳转到登录页

afterEach - 后置钩子函数

参数to、from

to:去哪里

from:从哪来

使用场景 - 改变浏览器title

单个路由独享的

beforeEnter

参数to、from、next

同beforeEach

组件级的

beforeRouteEnter - 进入组件前

参数to、from、next

同beforeEach

使用场景 - 进入这个组件前你要做什么初始化操作

beforeRouteUpdate - 组件更新或改变时

参数to、from、next

同beforeEach

使用场景 - 复用组件时（对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候）

beforeRouteLeave - 离开组件时

参数to、from、next

同beforeEach

使用场景 - 清除定时器等等

v-show和v-if有什么区别？及使用场景

v-show  操作的是css 中display属性 给不符合条件的数据加上display：none

v-if 不符合条件的数据 不渲染

v-show 与v-if的区别：

v-show 有更高的渲染成本 v-if有更高的切换成本

v-for和v-if的优先级

v-for 比 v-if 具有更高的优先级

Vue常用的指令

v-if//v-show//v-else//v-for//v-bind//v-on

Vue常用修饰符

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

<!-- 在“change”时而非“input”时更新 -->

<input v-model.lazy="msg" >

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符

<input v-model.number="age" type="number">

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<div id='other'>

        <input v-model.trim='trim'>

        <p ref='tr'>{{trim}}</p>

        <button @click='getStr'>获取</button>

</div>

事件修饰符

<!-- 阻止单击事件继续传播 -->

<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->

<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->

<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->

<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->

<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->

<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->

<!-- 即事件不是从内部元素触发的 -->

<div v-on:click.self="doThat">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->

<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<!-- 同上 -->

<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->

<input @keyup.enter="submit">

v-on可以监听多个方法吗？

可以

vue中key值的作用

key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

用于管理可复用的元素 因为vue会尽可能高效的渲染，通常会复用已有元素而不是从头渲染、

需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

Vue组件中的data为什么必须是函数

因为组件是要共享的，但他们的data是私有的，所以每个组件都要return一个新的data对象

组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。

而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

keep-alive组件的作用？

keep-alive是 Vue 内置的一个组件，可以在组件切换过程中将状态保留在内存中，防止重复渲染dom

单页面应用和多页面应用区别及优缺点

单页面应用，通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。

所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。

多应用于pc端。多页面，就是指一个应用中有多个页面，页面跳转时是整页刷新单页应用? ?优点：页面切换快? ?缺点：首屏加载稍慢，seo差多页应用? ?优点：首屏时间快，seo效果好?

缺点：页面切换慢什么是计算属性？什么情况使用computed 是vue实例中的计算属性computed是实时响应的，要根据data里一个值随时变化做出一些处理时，就需要用conputed去实时计算computed，methods的区别?computed计算属性的方式在用属性时不用加(),而methods方式在使用时要像方法一样去用，必须加()?computed是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。?methods在重新渲染的时候，函数总会重新调用执行。

keep-alive组件的作用？

keep-alive?是 Vue 内置的一个组件，可以在组件切换过程中将状态保留在内存中，防止重复渲染dom

单页面应用和多页面应用区别及优缺点

单页面应用，通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。

但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。

多应用于pc端。多页面，就是指一个应用中有多个页面，页面跳转时是整页刷新

单页应用? 优点：页面切换快? ?缺点：首屏加载稍慢，seo差；多页应用? ?优点：首屏时间快，seo效果好? 缺点：页面切换慢

什么是计算属性？什么情况使用

computed 是vue实例中的计算属性computed是实时响应的，要根据data里一个值随时变化做出一些处理时，就需要用conputed去实时计算

computed，methods的区别？

computed计算属性的方式在用属性时不用加(),而methods方式在使用时要像方法一样去用，必须加()?computed是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。?

methods在重新渲染的时候，函数总会重新调用执行。

什么是自定义指令，有哪些钩子函数及自定义指令的使用场景

有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

一个指令定义对象可以提供如下几个钩子函数 (均为可选)

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。

父组件获取异步动态数据传递给子组件，报错如何解决？

开始的时候让子组件隐藏,然后等数据返回的时候，让子组件显示

通过v-if，也就是判断数据是否为空，为空就不渲染，也能解决了

为不能读取的属性添加一个默认值，就可以很好的解决了

query和params的区别

- 地址栏的展现形式不同

  - query：?key=value

  - params:：/value

- 接收方式不同

  - query：this.$route.query

  - params:this.$route.params

- 使用场景的不同

  - query一般用在搜索

  - params一般用在详情页

什么是Vuex？详述Vuex的工作流程

官方介绍：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex其实就是一个Vue的集中状态管理工具，类似于redux，但使用方法很明显优化了许多

什么时候使用Vuex？

官方的话说，在你需要用的时候自然而然就知道自己什么时候要用了

在我看来，当项目需要使用公共数据，并且这个公共数据的访问量较大的时候，我们可以使用Vuex，用来集中管理公共的数据，而一些小型的项目，我们可以靠中央通信总线的发布订阅模式来实现数据管理与通信

Vuex的工作流程

首先通过dispatch提交一个action

在action中我们可以执行一些异步的操作，或者根据不同的情况分发不同的mutation

接着在action中调用commit，触发一个mutation

所有修改state的操作，全部应该放在mutation中来做

而state更新之后，会调用Vue的底层方法，通知视图进行更新渲染

Vuex不像redux，redux在任何项目工程内都可以使用，不仅限于react，但是Vuex是基于Vue的底层实现的一个状态管理工具，其实Vuex中的store本质就是没有template的隐藏着的vue组件

详述Vuex的核心属性及使用

state

state存储了Vuex的基本数据，在state中存储的数据都是经过Vue底层watcher侦听的数据，可以实现响应式数据

actions

actions存放了Vuex中所有的异步操作，可以在actions中通过commit分发不同的mutation，在不同的情况下执行不同的方法

mutations

mutations存放了Vuex中所有关于state的操作，修改state只能通过mutations，否则的话数据不会响应式更新

getters

getters就类似与Vue实例中的computed，计算属性，所有关于数据的复杂计算应该放在getters中来操作

modules

modules，类似于redux中的reducer，每一个module都拥有自己的state、mutations、actions、getters；将整个store根据功能或者数据分解成不同的模块，最后合并在一个Store中

Vue和Jquery的区别

Jquery直接操作DOM，使用选择器以及便捷的DOM操作方式来修改视图以及数据

Vue不直接操作DOM，而是通过双向数据绑定的方式，将DOM节点在Vue内部转化对象的形式，通过修改数据直接修改视图

Jquery是一个前端类库，只是提供了很多便捷操作DOM的方法，而Vue是一个框架，有一套完整的体系

Vue中的slot是什么？

在Vue中，我们一般使用UI界面来划分组件，而每一个UI界面可以划分很多个组件，不同的UI界面中难免会有相似之处，这种相似的地方，我们如何通过一种优雅的方式来达到复用这个UI组件呢？就是使用slot插槽了

slot插槽，其实就是用来做内容分发，使得可以最大程度的复用组件，达到每次使用同一个组件的时候可以根据情况创建不同的内容的功能

匿名插槽

不具有name属性的slot就是匿名插槽，也可以叫默认插槽

由父组件提供样式和内容，子组件只负责显示

匿名插槽/默认插槽只可以使用一次

<slot>里边写的是默认值</slot>

在子组件内定义slot时，内部可以定义默认值，当父组件有内容分发的时候，显示父组件的内容，没有的时候，显示默认内容

具名插槽

有name属性

在组件中可以使用N次（name值不同的情况下）

父组件通过html模板上的slot属性关联具名插槽

<template v-slot:插槽名称><div>插槽内容</div></template>

没有slot属性的html模板默认关联匿名模板

父组件提供样式和内容

<slot name="插槽名称"></slot>

作用域插槽（带数据的插槽）

父组件只提供样式，子组件提供内容

在slot上面绑定数据

子组件的值可以传给父组件使用

父组件展示子组件数据有3种方式：flex显示、列表显示、直接显示

使用v-slot必须使用template;之前使用的是slot-scope，但是这个属性已经在2.6.0废弃了，现在使用v-slot指令来代替原有的slot-scope属性

scope返回的值是slot标签上返回的所有属性值，并且是一个对象的形式保存起来

// 子组件中// 父组件中{{item}}{{scope.message}}

SPA首屏加载慢，该如何解决？

抽取css文件

使用CDN资源

使用路由模块化加载

按照页面或者组件分块懒加载

使用gzip减小网络传输的流量大小

使用服务端渲染的方式

使用预渲染的方式