前端面试题第二天

作者: jw_fc89 | 来源:发表于2019-07-01 08:32 被阅读129次

    目录:

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

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

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

    4、详述组件通信

    5、详述导航守卫

    6、v-show和v-if有什么区别?及使用场景

    7、v-for和v-if的优先级

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

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

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

    1、JSONP(地址,cb:params,回调函数)方式

    它是JSON的一种使用方法JSONP(JSON with Padding)是JSON的一种”使用模式”,可用于解决主流浏览器的跨域数据访问的问题。

    由于同源策略,一般来说位于 server1.dddd.com 的网页无法与不是 server1.dddd.com的服务器沟通,而 HTML 的script 元素是一个例外。利用<script>元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。

    要注意JSONP只支持GET请求,不支持POST请求。

    2.通过修改document.damain来进行跨域(主域相同)

    3.使用window.name来进行跨域

    window.name通过在iframe(一般动态创建i)中加载跨域HTML文件来起作用。然后,HTML文件将传递给请求者的字符串内容赋值给window.name。然后,请求者可以检索window.name值作为响应。

    4.使用HTML5新引进的window.postMessage方法

    5.CORS跨域

    6.动态创建script

    7.利用location.hash 跨域            原理是利用location.hash来进行传值。

            假设域名a.com下的文件cs1.html要和cnblogs.com域名下的cs2.html传递信息。

            1) cs1.html首先创建自动创建一个隐藏的iframe,iframe的src指向cnblogs.com域名下的cs2.html页面

            2) cs2.html响应请求后再将通过修改cs1.html的hash值来传递数据

            3) 同时在cs1.html上加一个定时器,隔一段时间来判断location.hash的值有没有变化,一旦有变化则获取获           取hash值

    8.web sockets

    9.nginx反向代理

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

    基本数据类型:number string boolean null undefined

    引用数据类型:object 、Array 、Function 、Data

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

    beforeCreate 实例创建之前

    Created          实例创建之后

    beforeMount  模板编译之前

    Mounted        模板编译之后

    beforeUpdata 数据更新之前

    Updataed      数据更新之后

    beforeDestroy 实例销毁之前

    Destory        实例销毁之后

    四、组件通信 

    父:自定义属性名+传递的数据 =》 :value="数据"

    子:props:["自定义属性名"]  接受数据

    子:this.$emit("自定义事件名",数据)  子组件标签中绑定@自定义属性名=回调函数

    父:methods:{ 回调函数(){} }

    中央通信 let bus=new Vue;   //创建一个新的Vue 实例 ,并且抛出  (mian.js)

    a:methods:{函数{bus.$emit("自定义事件名","数据")}}  发送

    b:  created(){bus.$on("自定义事件名","回调函数")

    五、详述导航守卫 (路由钩子函数共有几种?分别是什么?参数to、from、next分别是什么意思?)

    全局钩子函数 beforeEach 每次路由变化都要执行一遍

    组件钩子函数 beforeRouteEnter  beforeRouteUpdate  beforeLeave

    to(路由对象)即将要进入的目标

    from 当前导航要离开的路由

    next方法 resolve 钩子函数 必须要用的方法

    1 前置全局守卫 beforeEach

    当从一个路由跳转到另一个路由的时候触发此守卫,这个守卫也叫全局前置守卫,所以它是跳转前触发的。任何路由跳转都会触发

    2路由独享守卫  beforeEnter

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

    3组件内守卫 beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave这三个守卫是写在组件里,

    4全局后置守卫 afterEach

    钩子不会接受 next 函数也不会改变导航本身。

    六、v-show和v-if有什么区别?及使用场景

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

    2.性能消耗:v-if有更高的切换消耗;v-show有更高的初始渲染消耗;

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

    4.编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译; v-show是在任何条件下都被编译,然后被缓存,而且DOM元素保留;

    基于以上区别,因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

    七、v-for和v-if的优先级

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

    相关文章

      网友评论

        本文标题:前端面试题第二天

        本文链接:https://www.haomeiwen.com/subject/wiswcctx.html