深入理解Vue3：style中的响应式变量如何工作？

前言

在很多业务场景中，我们的style样式可能会根据业务逻辑的变化而变化，这个时候大家最容易想到的方案就是多写几个class类，根据不同场景应用不同的类，比如这样：

<div
  :class="{
  [$style.sign_day]: true,
  [$style.sign_today]: getSignStatus(item) == 1,
  [$style.sign_notyet_day]: getSignStatus(item) == 6,
  [$style.sign_day_dark]: theme == 'dark',
  }"
>
</div>

<style lang="scss" module>
  .sign_day {
    background: red;
  }
  .sign_today {
    background: yellow;
  }
  .sign_notyet_day {
    background: blue;
  }
  .sign_day_dark {
    background: orange;
  }
</style>

这样虽然也是一种不错的方式，但是如果类型有非常多的话，那么你就得在vue模版里面写大量的判断表达式，并且在style中写大量的class类。

要是在style中也可以直接使用script中的JS变量，那么这种场景处理起来是不是会更方便一点呢？

Vue2 CSS变量

在Vue2中，遇到以上业务场景如果我们不想写大量的class类的话，可以借助css中的var()函数来实现

var() 可以插入一个自定义属性（有时也被称为“CSS 变量”）的值，用来代替非自定义属性中值的任何部分。

比如：

在模版中调用getStyle函数获取颜色值，并且定义成css变量

<div
v-for="item in signList"
:key="item.day"
:class="$style.sign_day"
:style="{ '--color': getStyle(item) }"
>
  {
  { item.title }}
</div>

生成颜色值

getStyle(item) {
   
  switch (item.status) {
   
    case 0:
      return '#f8ae00'
    case 1:
      return '#e5353e'
    case 2:
      return '#1fddf4'
    case