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

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，我也存在这个问题，但是这也是一种规范问题吧，代码也是要给别人看的，虽然自己知道这里面的原理但也不能误导别人或者被同事说代码写得不严谨，所以代码规范人人有责，请自觉遵守维护吧