面试中问到的问题(有答案,不对请指出)

1:说一下vue的缓存keep-alive,并说出当一个页面被缓存后要走哪些生命周期钩子

        1,把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。

        2、<keep-alive>是抽象组件,它自身不会渲染DOM元素,也不会出现在父组件链中。

        3、当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

      注:在 2.2.0 及其更高版本中,activated 和 deactivated 将会在 <keep-alive> 树内的所有嵌套组件中触发。

使用keepAlive后生命周期:

        首次进入缓存页面:beforeRouteEnter --> created --> mounted --> activated --> deactivated

        再次进入缓存页面:beforeRouteEnter --> activated --> deactivated

        注:

                1、这里的activated非常有用,因为页面被缓存时,created,mounted等生命周期均失效,你若想进行一些操作,那么可以在activated内完成(下面会举个栗子:列表页回到上次浏览位置)

                2、activated  keep-alive组件激活时调用,该钩子在服务器端渲染期间不被调用。 3、deactivated  keep-alive组件停用时调用,该钩子在服务端渲染期间不被调用。

2:跨域产生的原因和如何解决(什么是跨域?跨域产生原因与解决方法 – 余浩的博客

原因:同源政策(扩展 :1、协议相同  2、域名相同 3、端口相同同源策略目的 目的:保证用户信息安全,防止恶意网站窃取数据。同源策略是必须的,否则cookie可以共享)是浏览器的一种安全机制,服务端之间是不存在跨域的

解决:1:跨域资源共享cors解决跨域  

            2:nginx反向代理解决跨域(前端常用)

            3:添加响应头解决跨域

            4:通过jsonp解决跨域(老方法)

3:VUE路由的两种模式

        1:hash模式:链接中带有#号,#号后面的不被后台获取,#号前面的地址一直不变,http没有获取到新的地址,就不会去访问后台数据库,避免了因为地址改变而频繁的访问后台

        2:history模式:具有对url历史记录进行修改的功能

        比较:hash模式很多场景不适用,比如微信的微信支付 ,对找不到的页面不做任何处理,(切换:mode:’history’)

                    history模式,找不到的页面会出现404错误,这个错误是要由后台去进行处理的(切换:mode:’hash’)

4:说一下插槽和具体用法

        定义:插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码

        基本语法:子组件B中添加一个<slot></slot>,在父组件的子组件引用中写上需要添加的内容

        分类

            1:具名插槽:定义一个name(子组件:<slot name="myslot"></slot>),将对应内容插在有相同name的template上(父组件<B><template v-slot:myslot></template></B>)

            2:作用域插槽:子组件,(<slot:item="item"></slot)。父组件,(<B><template v-slot:default="slotProps"></template></B>)。父组件中的slotProps可以自定义名称,接收来自子组件的传参item(动态接收数据的写法:v-slot:[dynamicSlotName])

5:兄弟组件之间的传信

            1:事件总线EventBus(在Vue中使用EventBus,你应该知道这些细节! - 掘金)(插件,也可直接安装插件npm install vue-bus --saveVue中 事件总线(eventBus)详解及使用_明天也要努力的博客-CSDN博客_vue中的事件总线

            2:使用vuex(如何使用vuex实现兄弟组件通信 - 博客 - 编程圈

6:如何理解父子组件的生命周期

父组件:beforeCreate——created——beforeMounted——子组件beforeCreate——created——beforeMounted——mounted——父组件mounted——beforeUpdate——子组件beforeUpdate——updeted——父组件updated——beforeDestroy——子组件beforeDestroy——destroyed——父detroyed

7:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容