vue面试题目|slot,过滤器,保持页面状态,

7. slot是什么?有什么作用?原理是什么

slot又名插槽,是vue内容分发机制,组件内部的模版引起shiyongslot元素作为承载内容分发的出口,插槽slot是子组件爱你一个模版标签,而这一个标签元素是否显示,以及怎么显示是由父组件决定的。slot又分三类,默认插槽,具名插槽和作用域插槽。

默认插槽:

又称为匿名插槽当slot没有指定name属性值的时候一个默认显示的插槽,一个组件只有一个匿名插槽

具名插槽:

带有具体名字的插槽,也就是带有name属性的slot,一个组件可以出现多个具名插槽。

作用域插槽

:默认插槽、具名插槽的一个变体,可以是匿名插槽,也可以是具名插槽,该插槽的不同点是在子组件渲染作用域插槽时,可以将子组件内部的数据传递给父组件,让父组件根据子组件的传递过来的数据决定如何渲染该插槽。

实现原理:

当子组件vm实例化的时候,获取到父组件传入的slot标签的内部

8. 过滤器的作用,如何实现一个过滤器

需要格式化数据的情况,比如需要处理时间,价格等数据格式的输出和现实

比如后端返回一个年月日的日期字符串,前端需要展示位多少天前的数据

过滤器是一个函数,他会把表达式当中的值始终当做函数的第一个参数,过滤器用在插值表达式{}}和v-bind的表达式当中,

9. 如何保存页面的当前的状态

既然是要保持页面的状态(其实也就是组件的状态),那么会出现以下两种情况:

●前组件会被卸载

●前组件不会被卸载那么可以按照这两种情况分别得到以下方法组件会被卸载:

(1)将状态存储在LocalStorage / SessionStorage

只需要在组件即将被销毁的生命周期在localStorage、sessiosnStorage当中把当前组件的state通过JSON.stringfy存储下来就可以了,在这里面需要注意的是组件更新状态的事迹

比如从b组件跳转到a组件的时候a组件需要更新自身的状态,但是如果从别的组件跳转到b组件的时候,实际上是希望b组件重新渲染的,也就是b组件重新渲染的,也就是不要从storage当中读取信息,所以需要再storage当中的状态加入一个flag属性,用来控制a组件是否读取storage当中的状态

有点:

兼容性好,不需要额外的库或者工具

简单快捷,基于可以满足大部分需求

缺点:

状态通过json方法存储,相当于深拷贝,●状态通过 JSON 方法储存(相当于深拷贝),如果状态中有特殊情况(比如 Date 对象、Regexp 对象等)的时候会得到字符串而不是原来的值。(具体参考用 JSON 深拷贝的缺点)

●如果 B 组件后退或者下一页跳转并不是前组件,那么 flag 判断会失效,导致从其他页面进入 A 组件页面时 A 组件会重新读取 Storage,会造成很奇怪的现象

如果b组件后退或者下一页跳转并不是前组件,那么flag判断就会失效,导致从其他页面进入a组件页面的时候a组件会重新读取storage,会造成很奇怪的现象

路由传值:

通过react-router的link组件的prop=to可以实现路由间的传递参数的效果,在这里需要用到state参数,在b组件当中通过history.location.state就可以拿到sate的值,保存他,返回a组件的时候再次携带state大道路由状态保持的结果

优点

●简单快捷,不会污染 LocalStorage / SessionStorage。

●可以传递 Date、RegExp 等特殊对象(不用担心 JSON.stringify / parse 的不足)

缺点

●如果 A 组件可以跳转至多个组件,那么在每一个跳转组件内都要写相同的逻辑组件不会被卸载:

1.单页面渲染

要切换的组件作为子组件全屏渲染,父组件中正常储存页面状态。

优点●代码量少●不需要考虑状态传递过程中的错误

要切换的组件作为子组件全屏渲染,父组件当中整出存储页面状态

缺点

●增加 A 组件维护成本

●需要传入额外的 prop 到 B 组件

●无法利用路由定位页面

除此之外,在Vue中,还可以是用keep-alive来缓存页面,当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行被包裹在keep-alive中的组件的状态将会被保留

<keep-alive>
	<router-view v-if="$route.meta.keepAlive"></router-view>
</kepp-alive>

router.js

{
  path: '/',
  name: 'xxx',
  component: ()=>import('../src/views/xxx.vue'),
  meta:{
    keepAlive: true // 需要被缓存
  }
},

全部评论

相关推荐

作为带过好几个实习生的老mentor,我见过有同学带着一腔热血来实习,最后却只带走一份单薄的履历。实习,是你从学校到职场最关键的过渡期,它的价值远不止一份实习证明。今天,我不讲大道理,就从我作为Mentor的视角,给你们几条能立刻用上的建议。记住,你的目标不是当个好学生,而是成为一个值得信赖的职场新人。一、&nbsp;心态转变:从被动答题到主动解题这是我最想强调的一点。学生思维是:等待老师布置明确的作业,然后完成它。职场思维是:主动发现模糊的问题,然后解决它。反面事例:接到任务后,埋头就做,遇到困难不吭声,直到截止日期才说“这个我不会”。Mentor期待的是啥呢?首先是确认目标:接到任务后,先用自己的话复述一遍:“我理解这个任务是要达成XX效果,对吗?”&nbsp;确保方向没错。然后是主动思考:不要只带问题来,要带“选择题”。问“这个数据我不会查,我尝试了A和B方法都失败了,您看是方法C更合适,还是我有其他没考虑到的渠道?”&nbsp;这证明了你的思考和努力。最后是闭环思维:任务完成后,主动告知结果:“XX任务已完成,数据/文件已发您邮箱,并同步在团队网盘了。其中有个小发现是……,供您参考。”&nbsp;让一切有始有终。二、&nbsp;沟通方式:实习生的很多错误,都源于“想当然”和“不敢问”。反面教材:在做一个PPT时,因为不确定公司模板,就套用了自己觉得好看的模板,结果不能用。那么怎么确认,怎么提问呢?第一个,不懂就问,但别重复问:第一次问,是学习;同样的问题问第三次,就是不用心。准备一个笔记本,把关键信息、操作流程、注意事项都记下来。第二个,及时汇报,别等追问:特别是遇到卡壳或可能延期时,一定要提前说。Mentor不怕你慢,就怕你失联。没事儿更新一下进度:目前已完成80%,但在XX环节遇到点阻力,正在想办法沟通等回复,预计今天下班前确定结果,到时候给您,这样说能让人极度安心。第三个,珍惜1on1机会:和Mentor的定期沟通,不是你被动接受批评,而是你主动获取信息和反馈的黄金时间。提前准备好:a)&nbsp;本周工作进展;b)&nbsp;遇到的困惑/挑战;c)&nbsp;希望学习的新技能;d)&nbsp;对团队业务的任何好奇。三、&nbsp;工作习惯:&nbsp;专业性体现在细节里职业素养不是空话,它藏在每一个你容易忽略的细节中。1.&nbsp;邮件/沟通软件礼仪:邮件:标题清晰(如【实习生XX-XX项目周报】),正文称呼得体,结尾有落款。别用“在吗?”开头。工作群:别发表情包刷屏,沟通事情简明扼要。收到任务或通知,回复“收到,谢谢”,这是基本的确认和尊重。2.&nbsp;文件管理与命名:我会观察实习生的桌面,看他们的使用习惯,乱糟糟的桌面说明他没条理。文件命名要使用统一的命名规则:日期_项目名_内容_版本_姓名。例如:20231027_秋招海报_初版_张三。这能为整个团队节省大量沟通成本。3.&nbsp;对待杂活的态度:复印、整理数据、会议纪要……这些dirty&nbsp;work是不可避免的。但优秀的人是能从中找到价值的:整理数据时,可以留意数据之间的关联或异常,做会议纪要时,可以梳理出会议的决策和待办事项。四、&nbsp;终极目标:带走三样东西1.&nbsp;一段能讲出STAR法则的实战经历:这直接决定了你未来求职简历的厚度。2.&nbsp;一位可以为你未来背书的Mentor/同事:好好表现,离职时保持联系,他们可能成为你未来求职的推荐人和内推渠道。3.&nbsp;对行业和岗位的真实认知:通过这次实习,你想清楚自己是更热爱这个行业,还是想赶紧跑路?这个答案,价值千金。最后,作为你们的Mentor,我想说:大胆去试,勇敢去问,别怕犯错。实习期是你犯错成本最低的时候。展现出你的靠谱、主动和思考,我们做Mentor的,会非常乐意把更核心的任务交给你,因为带你,也是在为团队培养未来的战友。希望这些建议能帮你少走弯路,打一场漂亮的实习战!
家族企业:实习一年比在大学多年都有用
第一次找实习,我建议__
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务