序文
「Vue3：2020年半ばのステータスアップデート」を翻訳する際、You Yuxiが7月中旬にRCバージョン（候補バージョン）をリリースし、8月上旬に公式バージョン3.0をリリースすることを望んでいることが記事で言及されました。
しかし、それはすでに8月初旬です、なぜそれはまだリリースされていないのですか？今月の初めは何日ですか？そこで、急いでgithubにアクセスして、何か問題がないか調べたところ、突然、非常に興味深い機能が見つかりました。以前は、データで定義した変数をCSSでも使用できるとしたら、それは素晴らしいことです。（このように考えたことはありますか）
ファンタジー
以前にプロジェクトに取り組んでいたとき、私はよく次のように考えました。
<template>
<h1>{
{ color }}</h1>
</template>
<script>
export default {
data () {
return {
color: 'red'
}
}
}
</script>
<style>
h1 {
color: this.color;
}
</style>
もちろん、それについて考えることは不可能です。JSとCSSは異なるコンテキストに属していますが、CSSはどこから来ているのでしょうか。
では、CSSでJS変数をどのように使用できるでしょうか。次に、JSを使用してDOMを操作し、変数をスタイルに詰め込むことしかできません。たとえば、refを使用してDOM要素を取得してから、dom.style.color = this.colorを使用します。
またはテンプレート内：
<template>
<h1 :style="{
color }">Vue</h1>
</template>
<script>
export default {
data () {
return {
color: 'red'
}
}
}
</script>
ただし、この方法にはまだ欠陥があります。たとえば、style属性にスタイルを書き込むことはお勧めできません。また、変数の再利用は面倒です。たとえば、DOM要素のグループがこの変数を使用する場合は、これを指定する必要があります。変数。クラス名をグループ化し、mountdでdocument.getElementsByClassName（）を作成します。DOMコレクションを取得すると、各要素をループしてdom.style.color = this.colorを追加するため、パフォーマンスが大幅に低下します。
実際、CSS自体には多くの欠陥があり、チューリング完全ではありません。そのため、Sass、Less、Stylusなどのさまざまなプリプロセッサが登場しました。
それらはCSSに多くの機能を提供します：ループ、条件文、変数、関数など...
機能の1つは非常に便利で、それが変数です。そこでCSSは変数の概念も導入しました。CSS変数が導入されたので、多くのことが本当に便利です。JSを介してCSS変数を操作し、必要に応じてCSS変数を使用することは以前よりはるかに効率的です。
CSS変数とは何ですか
JS（JSだけでなく、すべての言語が類似している）では、変数には次の特性があります：
- ステートメント
- 使用する
- 範囲
ステートメント
理解を容易にするために、JSを使用して類推してみましょう。
var color = '赤';
これは次と同等です。
-赤色;
もちろん、これはJSと同じではありませんが、PHPやSassなどの言語を学ぶ場合は、理解しやすいはずです.PHPまたはSassでは、変数を宣言するときにキーワードはありませんが、変数名の最初のものです。ドル記号$がビットに追加されます。これは、変数が宣言されていることを意味します。
PHP：
$color = 'red';
サス：
$color: color;
ただし、$記号はSassで占められ、@記号はlessで占められているため、CSSは他の記号しか考えられません。CSS記号は2つのマイナス記号です–
使用する
変数を宣言するだけではあまり意味がなく、それを使用する場合にのみ、変数は価値があると見なすことができます。
JS：
console.log(color)
varは変数を宣言するための単なるキーワードであり、colorは変数の名前であることがわかります。
PHP：
echo $color;
Scss：
h1 {
color: $color;
}
しかし、PHPまたはSassでは、変数を$で宣言するときは、それらを使用するときに$も運ぶ必要があります。
これは多くの開発者を混乱させるので、CSSは変数を使用するときにvar（）と呼ばれる関数を使用します。
CSS：
h1 {
color: var(--color);
}
PHPやSassと同じですが、プレフィックスを付けて呼び出す必要があります（これは変数名の一部であるため）が、違いは、変数をラップするためにvar（）が必要なことです。
範囲
これは理解しやすいです。JSにはスコープがあるだけでなく、CSSにも次のようなスコープがあります。
JS：
var color = 'red';
function h1 () {
console.log(color);
}
function div () {
var color = 'blue';
console.log(color);
}
h1(); // red
div(); // blue
CSSに似ています：
body {
--color: red;
}
h1 {
color: var(--color); /** 这里获取到的是全局声明的变量，值为red **/
}
div {
--color: blue;
color: var(--color); /** 这里获取到的是局部声明的变量，值为blue **/
}
言い換えると、変数のスコープは、変数が配置されているセレクターの有効なスコープです。
中国語のCSS変数
考えの多い2つのライブラリを見て、CSS変数を次のように再生できることがわかりました。
名前からわかるように、どちらも中国語で始まるため、CSS変数が中国語で作成されている可能性が高いです。クリックして表示するのは正しくありません。
つまり、CSS変数は非常に包括的です。これまでのプログラミング時とは異なり、英語で名前を付ける必要があります。今回は中国語でも完全に実行できます。信じられない場合は、試してみましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 在这里用link标签引入中文布局 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-layout">
<!-- 在这里用link标签引入中文渐变色 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
<style>
/* 清除默认样式 */
* {
padding: 0; margin: 0 }
ul {
list-style: none }
/* 全屏显示 */
html, body, ul {
height: 100% }
/* 在父元素上写入九宫格 */
ul {
display: grid;
grid: var(--九宫格);
gap: 5px
}
/* 给子元素上色 */
li {
background: var(--极光绿)
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
操作結果：
言い換えると、CSS変数は次のように定義できます。
body {
--蓝绿色: aquamarine;
}
次に、電話をかけるとき：
h1 {
color: var(--蓝绿色);
}
vueの変数
では、<script>で宣言された変数をvue3の<style>でどのように使用できるでしょうか。
まず、vue3をサポートするviteプロジェクトを最初に作成します。
npm init vite app vars
次に、依存関係をインストールするフォルダーを入力します。
cd変数
海抜と
次に、コンポーネントを作成します。コンポーネントタイプは次のようになります。
<template>
<h1>{
{ color }}</h1>
</template>
<script>
export default {
data () {
return {
color: 'red'
}
}
}
</script>
<style vars="{ color }">
h1 {
color: var(--color);
}
</style>
記事の冒頭で書いたファンタジーの構成要素は次のとおりです。
<style>
h1 {
color: this.color;
}
</style>
ただし、vueが優れていても、別のプリプロセッサが作成されない限り、これをCSSに追加することはできませんが、今回はCSS変数を使用することで、ファンタジーのコンポーネントに非常に近いものにすることができます。
<style vars="{ color }">
h1 {
color: var(--color);
}
</style>
まず、<style>タグにvars = "{}"を書き込み、次にデータで宣言した値を中かっこで囲みます。
この変数がレスポンシブである場合は、もう一度試してみましょう。<script>タグのthis.color値を動的に変更すると、ビューが変更されますか？それを試してみてください：
<template>
<h1>Vue</h1>
</template>
<script>
export default {
data () {
return {
opacity: 0
}
},
mounted () {
setInterval(_ => {
this.opacity >= 1 && (this.opacity = 0)
this.opacity += 0.2
}, 300)
}
}
</script>
<style vars="{ opacity }">
h1 {
color: rgb(65, 184, 131);
opacity: var(--opacity);
}
</style>
操作結果：
300ミリ秒ごとにthis.opacityの値を変更し、CSS変数にマップされ、this.opacityが変更され、それに応じて–opacityの値が変更され、ビューがデータの更新に従うことがわかります。それに応じて更新すると、この機能は単純に素晴らしいです！
脳は大きく開いている
以来2つのCSSライブラリ中国の勾配と中国のレイアウトをしているCSS中国の変数の実現可能性を検証し、私は、オブジェクトのプロパティも中国語で書くことができることを覚えている、のは中国語で書くためにVUEでこの黒魔術を使用してみましょう：
<template>
<h1>Vue</h1>
</template>
<script>
export default {
data () {
return {
'透明度': 0
}
},
mounted () {
setInterval(_ => {
this['透明度'] >= 1 && (this['透明度'] = 0)
this['透明度'] += 0.2
}, 300)
}
}
</script>
<style vars="{ 透明度 }">
h1 {
color: rgb(65, 184, 131);
opacity: var(--透明度);
}
</style>
演算結果：
ホーム！もちろん！チューブ！使用する！アップ！
将来、名前の付け方がわからない場合は、拼音を使用せず、中国語で書いてください。変数名は、その後のメンテナンス時に一目でわかります（ただし、英語を使用することをお勧めします）。
原理
また、dom.style.setProperty（ '– opacity'、this.opacity）と同様のメソッドが使用されている可能性が高いと推測できます。f12を押してコンソールを開き、それを確認します。予想どおり、コンポーネントを制御します。要素。style属性：
ただし、現時点では<style>タグでvarのみを使用しています。Scopedも非常に一般的に使用されているため、2つが一致した場合は何がコンパイルされますか？
<style vars="{ 透明度 }" scoped>
h1 {
color: var(--透明度);
}
</style>
実行結果：
あなたはVueのは、CSS変数をコンパイルしていることがわかりますように後にランダムな文字列と同じデータ-V-：
私は定義した場合、問題は、され-color属性グローバルスタイルでは、私が持ってる私がしたいですコンポーネントには、このグローバルCSS変数を使用してスコープ属性が、CSS変数は一度使用されている中でスコープ、それがにコンパイルされます。-62a9ebed色が、グローバル定義がされていない色を-62a9ebedが、-colorそれがするので、グローバル属性が見つからない場合、この問題を解決するにはどうすればよいですか？実際、非常に単純で、必要なのは-プラス*ビハインド、Ltd。無料参加： *次のいずれかになります。
<style vars="{ color }" scoped>
h1 {
color: var(--global:color);
}
</style>
コンパイルされたCSSは次のようになります：var（–color）！
結論
いかがですか？今回のVueのアップデートは誠意に満ちていますが、誰もがComposition-APIに焦点を当てており、これらの目立たないコーナーに気づいていませんでしたが、これらのコーナーは開発エクスペリエンスを大幅に向上させることができます。
ちなみに、CSS変数にも互換性があります。caniuseのWebサイト
から、IEと互換性がないことがわかります。使用するときは、プロジェクトの互換性の範囲を確認することを忘れないでください。