面试题：Vue组件化开发中样式隔离的原理及作用域CSS的基础应用

Question

在Vue组件化开发里，阐述样式隔离的原理是什么？请举例说明如何使用作用域CSS（scoped）来为一个简单的Vue组件设置隔离样式，例如一个包含文本和按钮的组件。

Answer 1

样式隔离原理

在Vue组件化开发中，样式隔离主要通过 scoped 特性实现。当在 <style> 标签上添加 scoped 属性时，Vue会自动为当前组件的DOM元素添加一个独一无二的动态属性，例如 data-v-xxxxxx，然后会将样式规则中的选择器都加上这个属性选择器。这样，样式就只会应用到带有该属性的元素上，从而实现样式隔离，不会影响到其他组件的样式。

示例

假设我们有一个简单的Vue组件，包含文本和按钮，以下是代码示例：

<template>
  <div class="component-container">
    <p class="text">这是组件内的文本</p>
    <button class="button">点击我</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

<style scoped>
.component-container {
  padding: 20px;
  border: 1px solid #ccc;
}

.text {
  color: blue;
}

.button {
  background-color: green;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}
</style>

在上述代码中，<style> 标签添加了 scoped 属性，所以定义的样式只会应用于 MyComponent 组件内的元素，不会影响到其他组件的相同类名元素。