前端vue面试经常问到的css scope属性和v-for为什么要用key并且不能用index作为key

news/2024/7/9 23:40:58 标签: vue, 面试, javascript, es6, html5

vuecss_scope_0">1.vue里面css scope属性

vue组件中,为了使样式私有化(模块化),不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块,这是一个非常好的举措,但是为什么要慎用呢?因为在我们需要修改公共组件(三方库或者项目定制的组件)的样式的时候,scoped往往会造成更多的困难,需要增加额外的复杂度。
简单来说就是专一性呗,就是设置了scope属性后就只对当前的组件产生css效果
原理就是加了scope后 当前组件的css和dom都会带着专一的 data-v12345这样的属性,就是组件的私有化操作,该组件的加了scope的css并且只会对当前组件的一级dom产生影响,二级或者其他级的父组件和子组件都不会影响到,这也就是为了保证样式私有化吧,避免了很多耦合性的样式误操作和样式污染吧

那么重点来了,是否有一种办法可以影响到子组件但是又不影响全局呢,这是很必要的,答案是肯定的, 在样式控制的前面加一个样式穿透/deep/ .div 这样就能影响到子孙组件的样式了,是不是很方便呢在这里插入图片描述

2.v-for为什么要用key并且不能用index作为key

vue官方文档已经明确规定要用key了 ,这也是为了给每一个循环出来的dom添加一个唯一标识,就像我们的身份证一样,一出生就要给一个标识,那么不用key会导致什么问题呢,
vue之所以那么受欢迎的最大特点就是vue的轻便和效率吧,内部的虚拟dom和组件复用大大提升了性能,每个真实dom输出的都是一个大量的数据集合,如果每次都执行再重新渲染会导致内存消耗严重,页面卡死问题,虽然vue最后还是虚拟dom转成真实dom渲染,但是大大减少了渲染的次数了,
好了,回到正题吧,不加key的会导致每次操作dom都会重新销毁又生成新的dom,这就使得性能消耗极大,
加的key不是唯一如用index作为key会导致内部复用错误的组件和dom,
这里面会涉及到很多底层原理,可以百度或者看看源码了解下,
vue会不会复用当前vnode会第一时间比对当前的key值,然后再执行内部方法判断再去寻找patch过程再觉得要不要复用和复用哪个,

这时候大多人人都觉得不操作dom的时候就可以用index做key,我也存在这个问题,但是这也是一种规范问题吧,代码也是要给别人看的,虽然自己知道这里面的原理但也不能误导别人或者被同事说代码写得不严谨,所以代码规范人人有责,请自觉遵守维护吧


http://www.niftyadmin.cn/n/1162387.html

相关文章

Docker思维导图总结

自己为了学习总结了一些思维导图,后面附有GitHub链接 ,分享给大家。https://github.com/panjianlong13/MindMapSummary

Docker思维导图总结2

自己为了学习总结了一些思维导图,后面附有GitHub链接 ,分享给大家。https://github.com/panjianlong13/MindMapSummary

Docker Swarm思维导图总结

自己为了学习总结了一些思维导图,后面附有GitHub链接 ,分享给大家。https://github.com/panjianlong13/MindMapSummary

浅谈vue生命周期和vue实例的钩子函数前端vue面试

vue用了好几年了,对生命周期也算是入门了吧,下面来整理下思绪吧, 很多人做项目刚接触一个框架或者其他的都是不求所以然的上手就干,虽然事是完成了,但是性能是比较差的,然后也不知道为什么要这么用。 1.首先…

Istio思维导图总结

自己学习总结了一些思维导图(持续更新中),后面附有GitHub链接 ,分享给大家。https://github.com/panjianlong13/MindMapSummary

TypeError: Right-hand side of 'instanceof' is not an object

vue.js:1897 TypeError: Right-hand side of ‘instanceof’ is not an object vue项目严格模式显示的错误 检查了许久才发现是父子组件传值写错了 告诫自己要认真对待代码,在非严格模式下没报错的,启用了严格模式就报错了,要多注意规范&a…

Java语法思维导图总结

自己学习总结了一些思维导图(持续更新中),后面附有GitHub链接 ,分享给大家。https://github.com/panjianlong13/MindMapSummary

vue项目,严格模式下报警告[Vue warn]: Property or method tableData is not defined on the instance

[Vue warn]: Property or method “tableData” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property 最近我用的vue项目启用…