样式标签中加入scoped,其中的原理是什么？以及样式穿透是什么？怎么解决样式优先级问题以及扩展类型
Scoped原理：它就是给各组件的样式添加了一个唯一标识，让他们自己管理自己的样式，互不打扰。避免造成互相渲染页面，这个唯一标识就是自定义属性，若你在样式当中，添加scoped,那么你运行界面，F12打开控制台，在它的样式中会显示一个唯一的标识，例如:data-v-xxx,给选择器添加了一个唯一标识，所以才能实现各组件样式的隔离。
扩展：
若你想要在填有在scoped的组件中使用，其他的组件库时，那么该组件的style样式，优先级就会降低，有时候不会生效，这个时候需要使用样式穿透
代码如下：
<div class="demo">
父组件
<css-demo class="son"></css-demo>
</div>
</template>
<script>
import cssDemo from './components/cssDemo .vue'
export default {
name: 'App',
components: {
cssDemo
}
}
</script>
<style scoped>
.demo{
width: 200px;
padding: 10px;
border: 1px solid rgba(0,0,0,1);
color: #000;
}
.son{
color: green;
}
.son .c2{
color: green !important;
}
.c1 .c2{
color: green !important;
}
.son.c1 .c2{
color: green !important;
}
</style>
<div class="c1">
子组件根元素(red)
<div class="c2">
子组件非根元素(blue)
</div>
</div>
</template>
<style scoped>
.c1{
border: 1px dashed #000;
margin-top: 10px;
padding: 5px;
color: red;
}
.c1 .c2{
border: 1px dotted #000;
color:blue;
}
</style>
这时候你就应该加上样式穿透
<div class="demo">
父组件
<css-demo class="son"></css-demo>
</div>
</template>
<script>
import cssDemo from './components/cssDemo .vue'
export default {
name: 'App',
components: {
cssDemo
}
}
</script>
<style scoped>
.demo{
width: 200px;
padding: 10px;
border: 1px solid rgba(0,0,0,1);
color: #000;
}
.son{
color: green;
}
.son .c2{
color: green !important;
}
>>>.c1 .c2{
color: green !important;
}
.son.c1 .c2{
color: green !important;
}
</style>
针对不同的样式类型（css,less,scss）有不同的样式穿透方法
css使用>>>
less使用/deep/
scss使用::v-deep
代码例子：
<style scoped>
>>> .c1 .c2{
color: green !important;
}
</style>
<style scoped lang="less">
/deep/ .c1 .c2{
color: green !important;
}
</style>
<style scoped lang=”scss“>
::v-deep .c1 .c2{
color: green !important;
}
</style>
v-for与v-if为什么不能一起使用？
1.vue2中v-for的优先级比v-if高，一起使用会造成性能的浪费
解决方法有两种：把v-if放在v-for的外层或者把需要v-for的属性先从计算属性中过滤一次
2.v-if和v-for的优先级问题在Vue3中不需要考虑，vue3更新了v-if和v-for的优先级，使v-if的优先级高于v-for
nextTick
在下次DOM更新循环结束之后执行延迟回调函数，由于vue中的DOM更新是异步操作的，也即是说修改数据变化的时候，它不会立即更新，而是会监听数据变化并缓存在同一事件当中，等同一数据循环当中，等同一数据循环中的所有数据变化完成之后，在统一进行试图更新，经常我们会在DOM还没更新的时候，就使用某一个元素，这样是获取不到变更之后的DOM的，为了能够得到更新后的DOM就设置了nextTick的方法，在修改数据之后，立即获取更新之后的DOM,一般用在Created钩子函数中又或者是，数据发生变化，想要执行变化的DOM的操作，可以使用nextTick
例子：轮播图：只有页面结构完整才能实现轮播效果，所以在遍历轮播图中，它是一个动态页面，这时就应该使用nextTick回调函数，结构已经完整了，这时就可以遍历轮播图了。
