关于前端:尤大在-Vue的生态进展中提到的-style-动态变量注入是啥

作者：Fernando Doglio
译者：前端小智
起源：medium

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

在 Vue RFC 中有一个对于款式的提案 SFC style CSS variable injection，这个 RFC 为 Vue 开发者提供了一种应用组件的响应性数据作为 CSS 变量的办法。

在 Vue 3 中，只需一个简略的语法，咱们就能够在运行时更新款式。

在本文中，咱们将理解如何应用这些 SFC 款式，它是如何工作的，而后理解一些来自 RFC 的高级常识。

本文次要内容：

1. 如何应用 SFC 款式？

2. Vue 中的响应式款式
3. Vue SFC 款式变量如何工作
4. 须要晓得的一些常识
   1.CSS 变量在子组件中不可用
   2. 应用前查看浏览器反对状况
5. . 总结

Single File Component : 单文件组件，简称 SFC

如何应用 SFC 款式？

要应用这个个性，只须要两个步骤：

1. 在组件的 script 中申明一个响应式变量。
2. 在 css 中应用 v-bind 来应用这个变量。

来个粟子：

<template>
<div>
  <div class="text">hello</div>
</div>
</template>

<script>
export default {data() {
        return {color: 'red',}
    }
}
</script>

<style>
.text {color: v-bind(color);
}
</style>

很简略。

如果查看浏览器中的组件，能够看到元素从数据中正确地取得了其色彩的值

这也实用于更简单的数据结构，假如咱们有一个名为 fontStyles 的对象，该对象中有一个 weight 的属性。

咱们依然应用 v-bind 拜访它，但因为咱们传递是一个对象，所以须要应用 JS 表达式来拜访这个外部属性，且须要将表达式括放在引号中。

<template>
<div>
  <div class="text">hello</div>
</div>
</template>

<script>
export default {data() {
        return {
            color: 'red',
            font: {weight: '800'}
        }
    }
}
</script>

<style>
.text {color: v-bind(color);
    /* wrapped in quotes */
    font-weight: v-bind('font.weight');
}
</style>

2. Vue 中的响应式款式

无论咱们是应用 JS 表达式还是仅仅应用根级数据绑定，咱们都能够利用 Vue 的内置响应式在运行时更新款式。

假如咱们心愿可能应用一个按钮来更改文本的色彩，那么能够这样做。

<div>
  <div class="text">hello</div>
  <button @click="color ='blue'"> Make Blue </button>
</div>

咱们所要做的就是扭转对应的变量值，CSS 款式就会本人更新。这就是这个个性如此弱小的起因，它为咱们提供了一种洁净的形式来批改页面在运行时的外观。

Vue SFC 款式变量如何工作

理解了应用形式之后，咱们来看下 Vue 是怎么做到的。如果咱们查看元素，咱们能够更好地理解 Vue 如何运作它的魔力。

在咱们的款式节中援用的任何变量都被作为内联款式增加到组件的根元素中。

像一般的 CSS 那样写，咱们申明 CSS 变量-015c408c-color，并将其设置为red，将变量--015c408c-font_weight，设置为800。

element.style { /* root element */
    --015c408c-color: red;
    --015c408c-font_weight: 800;
}

.text {color: var(--015c408c-color);
    font-weight: var(--015c408c-font_weight);
}

而后就是将 v-bind 转换成应用 CSS 变量形式。

而后，每当响应性数据发生变化时

• 咱们的内联款式扭转了，这意味着 …
• 咱们的 CSS 变量扭转了，这意味着 …
• 最终款式更改为响应式的新值

这就是如何在运行时更新款式就像下面的 color 做的那样。

CSS 变量在子组件中不可用

为了防止继承问题，定义的 CSS 变量对它的任何子组件都不可用。

例如，如果咱们向现有组件增加一个子组件。

<template>
<div>
  <div class="text">hello</div>
  <button @click="color ='blue'"> Make Blue </button>
  <child-component />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'
export default {
    components: {ChildComponent},
    data() {
        return {
            color: 'red',
            font: {weight: '800'}
        }
    }
}
</script>

<style>
.text {color: v-bind(color);
    /* expressions (wrap in quotes) */
    font-weight: v-bind('font.weight');
}
</style>

假如子组件是这样构建的。

<template>
    <div class="child-text"> Child Component </div>
</template>

<style>
    .child-text {color: v-bind(color);
    }
</style>

这不会扭转色彩，因为咱们的子组件不晓得任何 CSS 变量。

应用前查看浏览器反对状况

如果你想要我的项目应用该个性，须要先检查一下浏览器对 CSS 变量的反对状况

总结

这是一个十分乏味的个性，相似于咱们上次讲的 script setup 语法，它最终将走出试验阶段，合并到 Vue 3 中。

将 Vue 用于 CSS 变量和 SFC 款式变量是向 Vue 组件增加响应式款式的直观形式。

很棒，期待！

~ 完，我是刷碗智，去 SPA 了，下期见！

原文：https://learne.co/2021/05/how…

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://learue.co/2020/01/a-v…

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588… 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。