Style中的v-bind——状态驱动的动态 CSSVue3学习笔记，讨论的是Vue3中的v-bind，不是写在<tem

首先向想学习Vue3源码的各位推荐一个学习利器

这个库把 Vue3 源码中最核心的逻辑剥离出来，只留下核心逻辑，以供大家学习。带有详细的中文注释，以及完善的输出，帮助用户理解运行时流程。

简单介绍

今天要讨论的是Vue3中的v-bind，当然不是写在Template中的v-bind，而是写在Style的v-bind。

在Vue3文档的末尾详细地介绍了这个API，它的用法也比较简单。

<script setup>
const theme = {
  color: 'red'
}
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

那么，它和原始的CSS变量 var()有什么不同呢？

与Var()的不同

当我们使用var()时都需要预先在使用节点的祖先节点中编写所需的CSS变量，如果想要该CSS变量与业务代码中的某些变量产生联动，则需要已内联的方式将JS变量写入节点的Style中

<template>
    <p :style="cssVars"></p>
</template>

<script setup>
const textColor = '#fff'
const cssVars = {
   '--color': textColor
}
</script>

<style>
p {
  color: var(--color);
}
</style>

我们从官方给出的示例中可以看到，使用v-bind可以直接在Style中使用script抛出的变量，在开发过程中可谓是非常方便了。

那么它是怎么做到这一点的呢?

运行流程

graph TD
SFC单文件 --> vue-loader
vue-loader -->|正则匹配出`Style`中`v-bind`所使用的变量名称| cssVars --> compilerScript;
compilerScript -->|编译script|拿到cssVars;
拿到cssVars -->|遍历保存的变量名|useCssVar --> 写入组件的节点中;