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

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如   果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说 Web 是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

所谓同源是指：域名、协议、端口相同。

同源策略又分为以下两种：

DOM 同源策略：禁止对不同源页面 DOM 进行操作。这里主要场景是 iframe 跨域的情况，不同域名的 iframe 是限制互相访问的。

XMLHttpRequest 同源策略：禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求。

1. 通过jsonp跨域

通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。

2、 document.domain + iframe跨域

此方案仅限主域相同，子域不同的跨域应用场景。

实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。

3、 location.hash + iframe

实现原理： a欲与b跨域相互通信，通过中间页c来实现。 三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。

具体实现：A域：a.html -> B域：b.html -> A域：c.html，a与b不同域只能通过hash值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c可通过parent.parent访问a页面所有对象。

实现原理： a欲与b跨域相互通信，通过中间页c来实现。 三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。

具体实现：A域：a.html -> B域：b.html -> A域：c.html，a与b不同域只能通过hash值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c可通过parent.parent访问a页面所有对象。

4、 window.name + iframe跨域

window.name属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。

5、 postMessage跨域

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：

a.） 页面和其打开的新窗口的数据传递

b.） 多窗口之间消息传递

c.） 页面与嵌套的iframe消息传递

d.） 上面三个场景的跨域数据传递

用法：postMessage(data,origin)方法接受两个参数

data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。

origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

6、 跨域资源共享（CORS）

普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。

需注意的是：由于同源策略的限制，所读取的cookie为跨域请求接口所在域的cookie，而非当前页。如果想实现当前页cookie的写入，可参考下文：七、nginx反向代理中设置proxy_cookie_domain 和 八、NodeJs中间件代理中cookieDomainRewrite参数的设置。

目前，所有浏览器都支持该功能(IE8+：IE8/9需要使用XDomainRequest对象来支持CORS）)，CORS也已经成为主流的跨域解决方案。

7、 nginx代理跨域

跨域原理： 同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨越问题。

实现思路：通过nginx配置一个代理服务器（域名与demo1相同，端口不同）做跳板机，反向代理访问demo2接口，并且可以顺便修改cookie中demo信息，方便当前域cookie写入，实现跨域登录。

8、 nodejs中间件代理跨域

node中间件实现跨域代理，原理大致与nginx相同，都是通过启一个代理服务器，实现数据的转发，也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名，实现当前域的cookie写入，方便接口登录认证。

9、 WebSocket协议跨域

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。

原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。

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

beforeCreate：组件实例化在创建之前，属性绑定之前，只是一个空壳，无法访问到数据和真实的dom和data。

created：组件实例创建完成，属性绑定完成，但是dom未绑定。可以获取到初始数据，可以使用数据，也可以更改数据，但是不会触发updated函数。

beforeMount：模块编译，事件挂载之前，变异模块将虚拟dom放在render函数中准备渲染，可以更改数据，但不会触发updated函数。

mounted：模块开始编译，事件也挂载好了，组件，数据，真实的dom都渲染执行。

beforeUpdate：组件更新之前，vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染。

updated：组件更新后，数据已经更改完成，dom也重新render完成。

beforeDestory：组件销毁之前，做一些善后工作，例如清除计时器、清除非指令绑定的事件等等。

destoryed：组件销毁后，数据的绑定，事件监听等全部去除。

答案

什么是Vue的生命周期

Vue实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂载DOM、渲染-更新-渲染、卸载等一系列过程，我们称为Vue实例的生命周期。钩子就是在某个阶段给你一个做某些处理的机会。

生命周期的作用

就是在某个阶段给你一个做某些处理的机会。

生命周期总共有几个阶段

beforeCreate（创建前）：在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，因此无法访问methods，data，computed等上的方法和数据。

created（创建后）：实例已经创建完成之后被调用，在这一步，实例已完成了以下配置：数据观测、属性和方法的运算，watch/event事件回调。然而，挂载阶段还没有开始，$el属性目前不可见。created钩子可以获取Vue的data，调用Vue方法，获取原本HTML上的直接加载出来的DOM，但是无法获取到通过挂载模板生成的DOM。这是一个常用的生命周期，因为你可以调用methods中的方法、改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上、获取computed中的计算属性等等。通常我们可以在这里对实例进行预处理。也有一些童鞋喜欢在这里发ajax请求，值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的。因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个页面发请求。

建议在组件路由勾子beforeRouteEnter中来完成。

beforeMonut：挂载开始之前被调用：虚拟dom已经创建完成，马上就要渲染，在这里也可以更改数据，相关的 render 函数首次被调用（虚拟DOM），实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

mounted[ˈmaʊntɪd]：挂载完成，也就是模板中的HTML渲染到了HTML页面中，此时一般可以做一些ajax操作，组件已经出现在页面中，数据、真实dom都已经处理好了，事件都已经挂载好了mounted只会执行一次。

beforeUpdate（更新前）：在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染。

updated[ʌp'deɪtɪd]（更新后）：在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

beforeDestroy[dɪˈstrɔɪ]（销毁前）：在实例销毁之前调用。实例仍然完全可用。1.这一步还可以用this来获取实例。2.一般在这一步做一些重置的操作。比如清除掉组件中的 定时器 和 监听的dom事件。

destroyed[dɪs'trɔɪd]（销毁后）：在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

第一次页面加载会触发哪几个钩子

beforeCreate

DOM 渲染在哪个周期中就已经完成

mounted

生命周期使用场景举例

beforeCreate：可以在这里加一个loading

created：loading结束做一些初始化操作

mounted：ajax请求，配合路由钩子做一些事情

beforeDestory：你确认删除吗？

3.详述组件通信

父子通信 ： 关键之 props

父组件 v-bind:自定义名 =‘要传的值’

子组件 props:['自定义名']

子父通信 ： 利用  传$emit

子组件 v-on:click="chuan()"  传给父组件

methods: {

                chuan() {

                    this.$emit("自定义事件名", 要传递的数据)

          }

        }

父组件 <zi v-on:子组件自定义事件名="自定义方法名"></zi>

methods: {

      自定义方法(res) {

                    console.log(res);

                    this.b = res;

        }

}

兄弟通信 ： 利用 先创建vue实例 $emit  取$on

let bus = new Vue();创建vue实例

兄弟组件 v-on:click="chuan()" 传数据 用事件方法

  methods: {

                chuan() {

                    bus.$emit("自定义名",要传递的数据)

          }

  }

  兄弟组

  mounted() {

              bus.$on("兄弟的自定义名", (x) => {

                  console.log(x);

                  this.b = x;

          })

  }

4.详述导航守卫

router.beforeEach注册一个全局前置守卫：

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。每个守卫方法接收三个参数：

to：这是要跳去的路由对象。

from：这是要离开的路由对象。

next：是一个方法，它接受参数。这个方法必须调用要不就跳不过去了，你可以把它看做保安。必须给它打个招呼，要不然不让你过。

导航被触发。在失活的组件里调用离开守卫。调用全局的beforeEach守卫。在重用的组件里调用beforeRouteUpdate守卫 (2.2+)。在路由配置里调用beforeEnter。解析异步路由组件。在被激活的组件里调用beforeRouteEnter。调用全局的beforeResolve守卫 (2.5+)。导航被确认。调用全局的afterEach钩子。触发 DOM 更新。用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数。

beforeRouteEnter  beforeRouteUpdate(2.2 新增) beforeRouteLeave

beforeRouteEnter守卫不能访问this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。不过，你可以通过传一个回调给next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

注意beforeRouteEnter是支持给next传递回调的唯一守卫。对于beforeRouteUpdate和beforeRouteLeave来说，this已经可用了，所以不支持传递回调，因为没有必要了。

这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过next(false)来取消。

1 全局守卫。router.beforeEach

to：这是你要跳去的路由对象。

from：这是你要离开的路由对象。

next：是一个方法，它接受参数。这个方法必须调用要不就跳不过去了，你可以把它看做保安。必须给它打个招呼，要不然不让你过。

next（）。这就是告诉保安我要过去，去哪里呢？ 就是to了。

next（false）。如果传入false。保安就不让过了。也就是中断跳转。

next（{path：“/”}）。这个意思是保安不让过，并把你交到另一地方审查了。也就是中断跳转，跳转到一个新的路径。

2 全局后置钩子 router.afterEach

钩子不会接受 next函数也不会改变导航本身。这个可以看做保安的狗子，它不管你去哪里，也不会拦你，比较可爱。当然你也可以使用to和from对象

 3路由独享守卫。beforeEnter

这个守卫是写在路由里面的，只有当进入这个路由时才会调用的，这些守卫与全局前置守卫的方法参数是一样的。

4 组件内守卫 beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave

这三个守卫是写在组件里，beforeRouteEnter守卫 不能 访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。

不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。其他两个都可以用this。

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

v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；

v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；

v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

总结

v-if判断是否加载，可以减轻服务器的压力，在需要时加载,但有更高的切换开销;v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

6.v-for和v-if的优先级

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用。