Vue2Vue3中快捷使⽤data中的变量反映到css变量（scss也适⽤）前⾔
很多情况我们需要主题搭配，亦或是统⼀便捷的管理，css 变量是必不可少的。
在 Vue 中将 data 中的变量反映到 css 变量上也是⼤势所趋。
Vue2 ⽤法
在以前的 Vue2 中，我们通常使⽤计算属性反映 data 中的 变量到 css 中：
<template>
<div :>
<p class="text">测试⽂本</p>
</div>
</template>
<script>
export default{
data(){
return{
color:"red"
};
},
computed:{
cssVars(){
return{
"--color":lor
};
}
}
};
</script>
<style lang="scss"scoped>
.text{
color:var(--color);
}
</style>
从⽽在 data 中的数据改变时，计算属性也会被同步改变并反映到挂载的节点 style 中。
Vue3 ⽤法
在 Vue3 中，提供了⼀种新的快捷使⽤⽅法：
<template>
<div>
<p class="text">测试⽂本</p>
</div>
</template>
<script>
export default{
data(){
return{
color:"red"
};
}
};
</script>
<style scoped vars="{ color }">
.text{
color:var(--color);
}
</style>
这⾥通过 <style> 标签上的 vars 进⾏解构 data ，从⽽在样式区域就可以使⽤ css 变量了！
更多使⽤⽅法详见官⽅⽂档：
说明⽂档：
兼容 scss
官⽅⽂档中介绍以 var(--global:xxx) 在这种⽅法可以使⽤全局的 css 变量（若使⽤ scoped 会⾃动给 css 变量附带 hash 值），但只介绍了 css 的写法：
<style scoped vars="{ color }">
h1{
font-size:var(--global:fontSize);
}
</style>
这么写在 scss 是会编译报错的。摸索⼀番，如果要使⽤ scss ，请使⽤如下写法：
<style lang="scss"scoped vars="{ color }">
.home{
color: var(#{"--global:color"});
}
</style>
scss 动态取值 #{} 会将双引号⾃动去掉，从⽽得到 var(--global:color) ，解决了编译失败的问题。
总结
⽆论在 Vue2 还是 3 中，css 变量都是即时反映的，⽆需担⼼不会更新的问题。
虽然 Vue3 中的 css 变量⽐较简单，但⽬前处于 实验性 ：
css变量如果追求稳定，⽆论在 Vue3 还是 2 中，建议都使⽤计算属性的写法。