vue3实现在style中使用响应式变量

vue2的时候需要在style模块中访问script模块中的响应式变量，为此不得不使用css变量去实现。现在vue3已经内置了这个功能啦，可以在style中使用v-bind指令绑定script模块中的响应式变量。

示例

<template>
  <div>
    <span>hello </span>
    <span class="color">wolrd</span>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  const color = ref("#ff0000")
</script>
<style scoped>
  .color {
    color: v-bind(color);
  }
</style>

我们在script模块中定义了一个响应式变量color，并且在style中使用v-bind指令将color变量绑定到color样式上面。

我们在浏览器的network面板中来看看编译后的文件，如下图：

从上图中可以看到在network面板中编译后的HelloWorld.vue文件有两个，并且第二个里面有一些query参数，其中的type=style就表示当前文件的内容对应的是style模块。第一个HelloWorld.vue对应的是template和script模块中的内容。

我们来看看第一个HelloWorld.vue，如下图：

从上图中可以看到setup函数是script模块编译后的内容，在setup函数中多了一个_useCssVars函数，从名字你应该猜到了，这个函数的作用是和css变量有关系。别着急，我们接下来会详细去讲_useCssVars函数。

我们再来看看第二个HelloWorld.vue，如下图：

从上图中可以看到这个index.vue确实对应的是style模块中的内容，并且原本的color: v-bind(color);已经变成了color: var(--e17ea971-color);。

很明显浏览器是不认识v-bind(color);指令的，所以经过编译后就变成了浏览器认识的css变量var(--e17ea971-color);。

我们接着在elements面板中来看看此时class值为block的span元素，如下图：

从上图中可以看到color的值为css变量var(--e17ea971-color)。这里从父级元素div中继承过来一个---e17ea971-color: #ff0000;。

这个就是声明一个名为--e17ea971-color的css变量，变量的值为#ff0000。

还记得在script模块中定义的响应式变量color吗？他的值就是#ff0000。

所以这个span元素最终color渲染出来的值就是#ff0000。