文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

为什么 Vue3 选择了 CSS 变量

2024-12-14 01:09

关注

Vue 3 新增了一条实验性的功能——「单文件组件状态驱动的 CSS 变量」

详见:  https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-style-variables.md

看到这个,我脑子里有以下的疑问?

以下对这些问题进行探讨

CSS 变量基础

CSS 变量并不是某个框架的产物,而是 CSS 作者定义的一个标准规范

CSS 变量又称为 CSS 自定义属性,它包含的值可以在整个文档中重复使用。由自定义属性标记设定值(比如: --main-color: black;),由 var() 函数来获取值(比如: color: var(--main-color);)

为什么选择两根连词线(--)表示? 因为变量 ? 被 Sass 用掉了,@ 被 Less 用掉了。为了不产生冲突,官方的 CSS 变量就改用两根连词线了

CSS 变量一个简单例子如下,CSS 变量基础演示地址 

  1. <div class="parent">  
  2.   I am Parent  
  3.   <div class="child">  
  4.     I am Child  
  5.   div>  
  6. div>  
  1. .parent {  
  2.     
  3.   color: var(--body-child);  
  4.     
  5.   --parent-color: blue;  
  6.  
  7. .child {  
  8.     
  9.   color: var(--parent-color);  
  10.   --child-color: green;  

结果展示

我们现在 .parent 中定义变量 --parent-color: blue;,在 .child 中使用 color: var(--parent-color);

需要注意的是,变量的作用域就是它所在的选择器的有效范围,比如 .child 中定义的 --child-color: green;, 在 .parent 读取不到的,只针对 .child 元素下的元素有效

如果希望能够在 HTML 文档中都能访问到,则可以定义在类 :root 中

除了基础的使用,还有以下几点需要注意

  1. // 获取一个 Dom 节点上的 CSS 变量  
  2. element.style.getPropertyValue("--my-var"); 
  3. // 获取任意 Dom 节点上的 CSS 变量  
  4. getComputedStyle(element).getPropertyValue("--my-var");  
  5. // 修改一个 Dom 节点上的 CSS 变量  
  6. element.style.setProperty("--my-var", jsVar + 4);  

这里就演示了最简单的使用,具体可以查看 MDN 文档

在 Vue 2 中使用CSS 变量

上面说了,CSS 变量并不是什么某个框架的产物,而是原生 CSS 的标准规范。那么在 Vue 2 中直接使用 CSS 变量肯定可以的,并没什么约束。

关键是我们怎么让 Vue 组件中的状态同步到 CSS 变量中,其实也很简单,通过 Style 绑定 即可。Vue 2 演示地址 

  1. <template>  
  2.     
  3.   <div class="hello" :style="styleVar">  
  4.     <div class="child-1">I am Child 1div>  
  5.     <div class="child-2">I am Child 2div>  
  6.     <div @click="onClick">Change Red TO Bluediv>  
  7.   div>  
  8. template>  
  9. <script>  
  10. export default {  
  11.   name: "HelloWorld",  
  12.   props: {  
  13.     msg: String,  
  14.   },  
  15.   data() {  
  16.     return {  
  17.       styleVar: {  
  18.         "--colorBlue": "blue",  
  19.         "--colorRed": "red",  
  20.         "--fontSize": "30px",  
  21.         "--fontSizeTest": "30px",  
  22.       },  
  23.     };  
  24.   },  
  25.   methods: {  
  26.     onClick() {  
  27.       this.styleVar["--fontSizeTest"] = "40px";  
  28.     },  
  29.   },  
  30. };  
  31. script>  
  32.   
  33. <style scoped>  
  34. .child-1 {  
  35.   color: var(--colorBlue);  
  36.   font-size: var(--fontSize);  
  37.  
  38. .child-2 {  
  39.   color: var(--colorRed);  
  40.   font-size: var(--fontSizeTest);  
  41.  
  42. style> 

结果:

我们只需要在组件的根元素中设置 :style="styleVar"(如果要该组件都可以使用,则必须放置在根元素下),就可以在 Vue 2.x 中实现组件中的状态和 CSS 值的绑定,而且这种绑定关系是响应式的,比如我定义一个方法,改变 font-size 的值,是可以实时更新的。

  1. onClick() {  
  2.   this.styleVar["--fontSizeTest"] = "40px"; 
  3. }, 

效果演示:

:style VS CSS 变量

这里有个问题,现有的 Vue 可以通过 :style 的方式定义去动态绑定 CSS,比如我可以直接在上面的 .child-1中做如下绑定,效果跟上面是一致的。 

  1. <div class="child-1" :style="{ color: 'blue', fontSize: '30px' }">  
  2.   I am Child 1  
  3. div> 

那我为什么还要使用 CSS 变量?这样大费周章是否真有意义?

我总结有如下两个原因:

原因一: 复杂的网站都会有大量的 CSS 代码,通常也会有许多重复的值。当组件中的一个状态被几十个地方用到时,那么你可能需要绑定很多个 :style。一来代码会显得可读性不强,二来性能上应该是比原生的要差,毕竟要将更改经过 Vue 的指令绑定到每一个元素上(这一点暂未验证)

通过 CSS 变量,就可以直接通过在组件的根元素设置变量,在组件内部