Vue：scoped样式冲突和原理& data是一个函数

1.1 scoped解决样式冲突

1.默认情况：

写在组件中的样式会 全局生效 → 因此很容易造成多个组件之间的样式冲突问题。

1. 全局样式: 默认组件中的样式会作用到全局，任何一个组件中都会受到此样式的影响

2. 局部样式: 可以给组件加上scoped 属性,可以让样式只作用于当前组件

2.scoped原理

1. 当前组件内标签都被添加data-v-hash值 的属性
2. css选择器都被添加 [data-v-hash值] 的属性选择器

最终效果: 必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到
编译前：

<div class="header">
  <p abc>自定义属性</p> // 其中abc为自定义属性
</div>
p[abc] {  // p[abc]指p标签含有abc属性
    color: red;
}

编译后：

<div data-v-51e3981b="" data-v-7ba5bd90="" class="header">
  <p data-v-51e3981b="" abc="">自定义属性</p>
</div>

p[abc][data-v-51e3981b] {
    color: red;
}

1.2 data是一个函数

一个组件的 data 选项必须是一个函数。目的是为了：保证每个组件实例，维护独立的一份数据对象。

每次创建新的组件实例，都会新执行一次data 函数，得到一个新对象。

组件三大组成部分的注意点：

1. 结构：有且只能一个根元素
2. 样式：默认全局样式，加上 scoped 局部样式
3. 逻辑：data是一个函数，保证数据独立