在style中使用v-bind

在style中使用v-bind

最近在公司写项目的时候想实现一个更改主题的功能，查阅网上资料大家给了多种方案，但是其中一种方案比较吸引我，卧槽？什么东西，Vue3可以在style中使用v-bind？
WDF?！！！赶紧试试！

<script setup>
 // 这里可以是原始对象值，也可以是ref()或reactive()包裹的值，根据具体需求而定
 const theme = {
   color: 'red'
 }
</script>

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

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

具体实现就如上，用法可以说相当简单了
Vue3通过给style样式中v-bind绑定，其实就是给css变量绑定，在绑定的数据更新时调用CSSStyleDeclaration.setProperty通知CSS更新

优缺点

• 优点

  • 不用重新加载样式文件，在样式切换时不会有卡顿
  • 在需要切换主题的地方利用v-bind绑定变量即可，不存在优先级问题
  • 新增或修改主题方便灵活，仅需新增或修改JS变量即可，在- v-bind()绑定样式变量的地方就会自动更换

• 缺点

  • IE兼容（想笑）
  • 首次加载的时候可能会多花一点时间获取样式
  • 只要绑定了，就会在绑定位置把属性编译成CSS变量，可能达到一定数量的时候会出现某些性能问题