Prefacio
Al traducir "Vue 3: Actualización de estado de mediados de 2020" , se mencionó en el artículo que You Yuxi esperaba lanzar la versión RC (versión candidata) a mediados de julio y la versión oficial 3.0 a principios de agosto.
Pero ya estamos a principios de agosto, ¿por qué no se ha lanzado todavía? ¿Qué día es el comienzo de este mes? Así que me apresuré a ir a github para ver si algo iba mal, y de repente encontré una característica muy interesante. Solía pensar de esta manera: si las variables que definí en los datos también se pueden usar en CSS ¡Eso sería genial! (¿Alguna vez lo has pensado de esta manera?)
fantasía
Cuando trabajaba en proyectos antes, a menudo pensaba de esta manera:
<template>
<h1>{
{ color }}</h1>
</template>
<script>
export default {
data () {
return {
color: 'red'
}
}
}
</script>
<style>
h1 {
color: this.color;
}
</style>
Por supuesto, es imposible pensar en eso, JS y CSS pertenecen a contextos diferentes, ¿de dónde viene CSS?
Entonces, ¿cómo podemos usar variables JS en CSS? Entonces solo puede usar JS para manipular el DOM y rellenar las variables en el estilo. Por ejemplo, use ref para obtener el elemento DOM, y luego dom.style.color = this.color.
O en la plantilla:
<template>
<h1 :style="{
color }">Vue</h1>
</template>
<script>
export default {
data () {
return {
color: 'red'
}
}
}
</script>
Sin embargo, este método todavía tiene fallas. Por ejemplo, no se recomienda escribir estilos en el atributo de estilo, y la reutilización de variables será problemática. Por ejemplo, si un grupo de elementos DOM desea usar esta variable, debe proporcionar este variable. Agrupe un nombre de clase, y luego document.getElementsByClassName () en montado. Después de obtener la colección DOM, recorrerá cada elemento y le agregará dom.style.color = this.color, lo que desperdicia mucho rendimiento.
De hecho, CSS en sí mismo tiene muchos defectos y no es Turing completo, lo que provocó la aparición de varios preprocesadores: Sass, Less, Stylus, etc ...
Proporcionan muchas características para CSS: bucles, declaraciones condicionales, variables, funciones, etc.
Una de las características es muy útil, ¡y son las variables ! Así que CSS también introdujo el concepto de variables. Desde que se introdujeron las variables de CSS, muchas cosas son realmente convenientes. Manipular las variables de CSS a través de JS y luego usar las variables de CSS donde sea necesario es mucho más eficiente que antes.
¿Qué son las variables CSS?
En JS ( no solo JS, todos los lenguajes son similares ), las variables tienen las siguientes características:
- declaración
- usar
- Alcance
declaración
Para facilitar la comprensión, usemos JS para hacer una analogía:
var color = 'rojo';
Es equivalente a:
-color rojo;
Por supuesto, esto no es lo mismo que JS, pero si aprendes lenguajes como PHP o Sass, debería ser fácil de entender. En PHP o Sass, no hay una palabra clave al declarar variables, sino la primera del nombre de la variable. Se agrega un signo de dólar $ al bit, lo que significa que la variable está declarada.
PHP:
$color = 'red';
Hablar con descaro a:
$color: color;
Pero el símbolo $ está ocupado por Sass y el símbolo @ está ocupado por menos, por lo que CSS solo puede pensar en otros símbolos. El símbolo CSS son dos signos menos:
usar
No tiene mucho sentido simplemente declarar una variable, y solo si la usa, la variable puede considerarse valiosa:
JS:
console.log(color)
Puede ver que var es solo una palabra clave para declarar variables, y color es el nombre de la variable.
PHP:
echo $color;
Scss:
h1 {
color: $color;
}
Pero en PHP o Sass, al declarar variables con $, también debe llevar $ cuando las use.
Esto confunde a muchos desarrolladores, por lo que CSS usa una función llamada var () cuando usa variables :
CSS:
h1 {
color: var(--color);
}
Aunque es lo mismo que PHP y Sass, debe llamarse con un prefijo ( porque es parte del nombre de la variable ), pero la diferencia es que se necesita una var () para envolver la variable.
Alcance
Esto es fácil de entender. JS no solo tiene alcance, sino que CSS también tiene alcance, como:
JS:
var color = 'red';
function h1 () {
console.log(color);
}
function div () {
var color = 'blue';
console.log(color);
}
h1(); // red
div(); // blue
Similar a CSS:
body {
--color: red;
}
h1 {
color: var(--color); /** 这里获取到的是全局声明的变量，值为red **/
}
div {
--color: blue;
color: var(--color); /** 这里获取到的是局部声明的变量，值为blue **/
}
En otras palabras, el alcance de una variable es el alcance efectivo del selector en el que se encuentra.
Variables CSS chinas
Una vez vi dos bibliotecas con muchos pensamientos y descubrí que las variables CSS aún se pueden reproducir así:
Como puede ver en sus nombres, ambos comienzan con chino, por lo que existe una alta probabilidad de que las variables CSS estén hechas en chino. Hacer clic y verlo no es cierto.
Es decir, las variables CSS son muy inclusivas. A diferencia de antes cuando se programaba, deben estar nombradas en inglés. El chino también puede funcionar perfectamente esta vez. Si no lo crees, probémoslo:
<!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>
Resultado de la operación: en
otras palabras, las variables CSS se pueden definir así:
body {
--蓝绿色: aquamarine;
}
Entonces al llamar:
h1 {
color: var(--蓝绿色);
}
Variables en vue
Entonces, ¿cómo se pueden usar las variables declaradas en el <script> en el <style> de vue3 ?
Primero, primero creamos un proyecto vite que admita vue3:
vars de la aplicación npm init vite
Luego ingrese a la carpeta para instalar las dependencias:
cd vars
sobre el nivel del mar y
Luego cree un componente, el tipo de componente se ve así:
<template>
<h1>{
{ color }}</h1>
</template>
<script>
export default {
data () {
return {
color: 'red'
}
}
}
</script>
<style vars="{ color }">
h1 {
color: var(--color);
}
</style>
Recuerda cuáles son los componentes de la fantasía que escribí al principio del artículo:
<style>
h1 {
color: this.color;
}
</style>
Sin embargo, incluso si vue es excelente, no puede agregar esto a CSS, a menos que se haga otro preprocesador, pero esta vez el uso de variables CSS ya puede estar muy cerca de los componentes de nuestra fantasía:
<style vars="{ color }">
h1 {
color: var(--color);
}
</style>
Primero , escribe vars = "{}" en la etiqueta <style> y luego escribe el valor que declaraste entre los datos entre llaves.
Intentemos de nuevo si esta variable responde . ¿ Cambiar dinámicamente el valor this.color en la etiqueta <script> hará que la vista cambie? Intentalo:
<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>
Resultado de la operación: podemos
ver que cada 300 milisegundos cambiamos el valor de this.opacity, se mapeará a la variable CSS, this.opacity cambia, el valor de –opacity cambiará en consecuencia, y la vista seguirá la actualización de datos y actualice en consecuencia, ¡esta función es simplemente increíble!
Cerebros bien abiertos
Dado que las dos bibliotecas CSS chinese-gradient y chinese-layout han verificado la viabilidad de las variables CSS chinas, y recuerdo que las propiedades de los objetos también se pueden escribir en chino, intentemos usar esta magia negra en vue Para escribir en chino:
<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>
resultado de la operación:
¡Hogar! ¡Por supuesto! ¡tubo! ¡usar! ¡Hasta!
En el futuro, si no sabes cómo nombrarlo, no uses Pinyin, solo escríbelo en chino, ¡jaja! El nombre de la variable puede quedar claro de un vistazo durante el mantenimiento posterior ( pero aún se recomienda usar el inglés ).
principio
También puede adivinar, la alta probabilidad es que se use un método similar a dom.style.setProperty ('- opacity', this.opacity) . Presione f12 para abrir la consola y mirarla . Como se esperaba , controla el componente elementos. El atributo de estilo:
Pero solo usamos var en la etiqueta <style> en este momento. Scoped también se usa muy comúnmente, entonces, ¿qué se compilará si los dos se encuentran juntos?
<style vars="{ 透明度 }" scoped>
h1 {
color: var(--透明度);
}
</style>
Resultado de la ejecución:
puede ver que Vue ha compilado una variable CSS que es la misma que la cadena de caracteres aleatorios después de data-v- :
Entonces el problema es que si defino un atributo –color en el estilo global , estoy trayendo I desea utilizar esta variable CSS global en un componente con atributo de ámbito , pero una vez que se utiliza la variable CSS en ámbito , se compilará en: –62a9ebed-color , pero la definición global no es –62a9ebed-color sino –color , por lo que ¿Cómo resolver este problema cuando no se puede encontrar el atributo global? De hecho, es muy simple, solo usted necesita , más un * detrás , Ltd. Unirse libre: * puede ser:
<style vars="{ color }" scoped>
h1 {
color: var(--global:color);
}
</style>
El CSS compilado se convertirá en: var (–color) !
Conclusión
¿Cómo es divertido? Esta actualización de Vue está llena de sinceridad, pero todos se han centrado en Composition-API y no notaron estos rincones discretos, pero estos rincones pueden mejorar enormemente nuestra experiencia de desarrollo.
Por cierto, las variables CSS también son compatibles: puedes ver
en la web de caniuse que no es compatible con IE, cuando lo uses recuerda confirmar el alcance de compatibilidad de tu proyecto.