开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情
1.组件
1-1. 组件之间的样式冲突问题
默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题。
- 导致组件之间样式冲突的根本原因是：
- 单页面应用程序员,所有组件的 DOM 结构,都是基于唯一的 index.html页面进行呈现的
- 每个组件中的样式,都会影响整个 index.html 页面中的 DOM 元素
1-2. 思考：如何解决组件样式冲突的问题
为每个组件分配唯一的自定义属性,在编写组件样式时,通过属性选择器来控制样式的作用域,示例代码如下：
<template>
<div class="container" data-v-001>
<h3 data-v-001>轮播图组件</h3>
</div>
</template>
<style>
/*
通过中括号 "属性选择器", 来防止组件之间的 "样式冲突问题",
因为每个组件分配的自定义属性是 "唯一的"
*/
.container[data-v-0001]{
border:1px solid red;
}
</style>
1-3. style节点的scoped属性
为了提高开发效率和开发体验,vue为style节点提供了scoped属性,从而防止组件之间的样式冲突问题：
<template>
<div class="container">
<h3>轮播图组件</h3>
</div>
</template>
<style>
/*
style 节点的 scoped 属性,用来自动为每个组件分配唯一的 "自定义属性",
并自动为当前组件的 DOM 标签和 style 样式应用这个自定义属性, 防止组件的样式冲突问题
*/
.container{
border:1px solid red;
}
</style>
1-4. /deep/样式穿透
如果给当前组件的style节点添加了scoped属性,则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效,可以使用/deep/深度选择器
<style>
.title{
/* 不加 /deep/ 时, 生成的选择器格式为 .title[data-v-052242de] */
color:blue;
}
/deep/.title{
/* 加上 /deep/ 时, 生成的选择器格式为 [data-v-052242de].title */
color:blue;
}
</style>
2. 生命周期 & 生命周期函数
生命周期(Life Cycle)是指一个组件从创建->运行->销毁的整个阶段,强调的是一个时间段。
生命周期函数:是由 vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行
- 注意：生命周期强调的是时间段,生命周期函数强调的是时间点
3. 生命周期图示
可以参考 vue 官方文档给出的 "生命周期图示", 进一步理解组件生命周期执行的过程:v2.cn.vuejs.org/v2/guide/in… 生命周期图示
