Vue CSS 变量 — 响应式样式 RFC

Posted 2023-04-27

参考技术A

单文件组件样式 RFC 为 Vue 开发人员提供了一种将组件的响应数据用作 CSS 变量的方法。

更复杂的数据结构，假设我们有一个名为 font 的对象，并且其中有一个名为 weight 的属性。

Vue 提供了内置的响应式系统，我们只需要修改响应式中的数据，便可以动态的修改页面中的外观。

使用到了 CSS 变量 ，我们样式中的 v-bind 最终将被编译为使用 CSS var 语法和我们的新 CSS 变量。

如果您希望在生产环境中实现这一点，请确保检查浏览器对 CSS 变量的支持。

如果没有 CSS 变量，SFC 样式变量将无法工作，因此如果您的应用程序需要支持某些较旧的浏览器，这对您来说可能不是一个可行的选择。

以下是 CSS 变量 支持情况：

探索 Vue.js 响应式原理

提到“响应式”三个字，大家立刻想到啥？响应式布局？响应式编程？

从字面意思可以看出，具有“响应式”特征的事物会根据条件变化，使得目标自动作出对应变化。比如在“响应式布局”中，页面根据不同设备尺寸自动显示不同样式。

Vue.js 中的响应式也是一样，当数据发生变化后，使用到该数据的视图也会相应进行自动更新。

接下来我根据个人理解，和大家一起探索下 Vue.js 中的响应式原理，如有错误，欢迎指点