关于 Vue 样式的关于七个你(可能)不知道的技巧

作者：fadamakis.com 2023-11-06 11:32:46开发 前端 作用域样式不会消除对类的需求。由于 CSS 选择器的知道工作方式，当使用作用域时，关于p { color: red } 的知道速度会慢很多倍。如果使用类来代替，关于性能方面的知道影响可以忽略不计。

单文件组件由三个不同的关于实体组成：模板、脚本和样式。知道所有这些都很重要，关于但后者往往被忽视，知道尽管它可能会变得复杂，关于并经常导致挫折和错误。知道更好地理解可以改进代码审查并减少调试时间。关于

这里有 7 个小贴士可以帮助你：

• 1.样式作用域和插槽内容
• 2.作用域选择器性能
• 3.全局样式
• 4.样式中的知道 Javascript 变量
• 5.CSS 模块
• 6.CSS 与 SCSS 中的变量
• 7.SCSS include 与 extend

1.样式作用域和插槽内容

将样式的作用域限定为只影响当前组件，是关于防止组件耦合和意外副作用的有效策略。

它是通过添加 scoped 属性来转换以下内容来实现的：

<template>  <div class="title">Hello world!</div></template><style scoped>  .title {     font-size: 24px;  }</style>

to

<template>  <div class="title" data-v-7ba5bd90>Hello world!</div></template><style scoped>  .title[data-v-7ba5bd90] {     font-size: 24px;  }</style>

如果想让样式影响子组件，可以使用 deep 选择器。

<style scoped>  .a :deep(.b) {     /* ... */  }</style>

其编译为：

.a[data-v-7ba5bd90] .b {   /* ... */}

使用插槽选择器对插槽内的内容也是如此。

<style scoped>  :slotted(div) {     color: red;  }</style>

2.作用域选择器性能

作用域样式不会消除对类的需求。由于 CSS 选择器的工作方式，当使用作用域时，p { color: red } 的速度会慢很多倍。如果使用类来代替，性能方面的影响可以忽略不计。

<!-- DO --><template>  <h1 class="title">Hello world!</h1></template><style scoped>  .title {     font-size: 24px;  }</style>

<!-- DONT --><template>  <h1>Hello world!</h1></template><style scoped>  h1 {     font-size: 24px;  }</style>

3.全局样式

影响整个应用程序的样式可能不是一个好主意。如果您还是想这么做，可以将作用域样式与非作用域样式混合使用，或者使用 :global 伪选择器

<style scoped>  :global(.red) {     color: red;  }</style>

4.样式中的 Javascript 变量

自 Vue 3.2 版起，可以在样式标签内使用 v-bind。这可以带来一些有趣的用例，比如只需几行代码就能实现颜色选择器。

<template>  <h1 class="text">Hello World!</h1>  <input type="color" v-model="color" /></template><script setup>  import {  ref } from "vue";  const color = ref("");</script><style>  .text {     color: v-bind(color);  }</style>

一个更高级的用例是使可重用应用程序图标组件的图标大小动态化。

<template>  <p>    <input type="radio" v-model="size" :value="sizes.s" />S    <input type="radio" v-model="size" :value="sizes.m" />M    <input type="radio" v-model="size" :value="sizes.l" />L    <input      type="radio"      v-model="size"      :value="sizes.xl"    />XL  </p>  <div class="icon" /></template><script setup lang="ts">  import {  ref } from "vue";  enum sizes {     s = 8,    m = 16,    l = 32,    xl = 64,  }  const size = ref(sizes.xl);</script><style>  .icon {     width: v-bind(size + "px");    height: v-bind(size + "px");    background: #cecece;  }</style>

5.CSS 模块

只需在样式标签中添加 module 属性，即可立即支持 CSS 模块。这些类会通过 $style 变量自动显示在模板中。

<template>  <p :class="$style.red">This should be red</p></template><style module>  .red {     color: red;  }</style>

6.CSS 与 SCSS 中的变量

SCSS 变量是我们编写 CSS 方式的一次重大变革。在使用预处理器之前，使用变量是不可能的。此后，CSS 迎头赶上，现在所有主流浏览器都支持 CSS 变量。CSS 变量提供了 SCSS 变量所能做到的一切，此外还提供了更简便的主题功能，因此在这场争论中，CSS 变量明显胜出。

7.SCSS include 与 extend

这两个 SCSS 助手经常会引起混淆，因为它们都可以用来减少 SCSS 代码的重复。CSS 输出中存在一些细微的差别，您应该注意。

@include 帮助程序用于包含在 mixin 块中编写的代码。

<template>  <p class="error-text">Hello World!</p>  <p class="error-notification">Hello World!</p></template><style lang="scss">  @mixin error {     color: red;  }  .error-text {     @include error;    font-size: 24px;  }  .error-notification {     @include error;    border: 1px solid red;    padding: 8px;  }</style>

生成的 CSS 将根据需要多次重复代码

.error-text {   color: red;  font-size: 24px;}.error-notification {   color: red;  border: 1px solid red;  padding: 8px;}

这里的 error mixin 只有一条规则，但在实际应用中通常会有更复杂的 mixin。

另一方面，当元素几乎相同时 @extend 更有用。

<template>  <p class="error-text">Hello World!</p>  <p class="error-notification">Hello World!</p></template><style lang="scss">  %error {     color: red;  }  .error-text {     @extend %error;    font-size: 24px;  }  .error-notification {     @extend %error;    border: 1px solid red;    padding: 8px;  }</style>

生成的代码为：

.error-notification,.error-text {   color: red;}.error-text {   font-size: 24px;}.error-notification {   border: 1px solid red;  padding: 8px;}

这里的一般规则是选择 extend，除非你想在 mixin 中使用一个参数，在这种情况下，只有 include 才有效。

原文：https://fadamakis.com/7-quick-tips-about-vue-styles-you-might-didnt-know-5ec2fcecb384

责任编辑：武晓燕 来源： 独立开发者张张 CSS选择器作用域

(责任编辑：休闲)