-
v-for中的key
为每个节点添加唯一标识,提高虚拟DOM的更新效率 -
soped的实现原理
通过PostCSS转译实现<style scoped> .example { color: red; } </style>
转译后
<style> .example[data-v-5558831a] { color: red; } </style>
PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性,然后,给CSS选择器添加一个对应的属性选择器来选择该组件中dom,这种做法使得样式只作用于含有该属性的dom——组件内部dom。
但是在引用了第三方插件,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过特殊的方式,穿透scoped
<style scoped> 外层 >>> 第三方组件 { 样式 } </style>
另外
可以通过在外层dom上添加唯一的class来区分不同组件。这种方法既实现了类似于scoped的效果,又方便修改各种第三方组件的样式
vue小技巧
最新推荐文章于 2023-01-08 19:17:25 发布