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: