相信很多兄弟都知道 Vue3 的那些新特性,如基于 Proxy 的响应式系统、编译器优化、Composition-API 等等,但你知道 Vue3 中有哪些小细节是和 Vue2 不同的吗?
今天就给大家分享 Vue3 实战过程中,一些可能让你眼前一亮的小细节。用的好的话,不仅可以提升工作效率,同时也能提高程序运行的性能。话不多说,就是干!
作用域样式 style
全局选择器
在 Vue2 组件中,设置一个全局样式,我们通常是新建一个 标签,如:
<style scoped>
style>
<style>
.red {
color: red;
}
style>
而在 Vue3 中,可以在作用域样式中使用 :global 这个伪类:
<style scoped>
:global(.red) {
color: red;
}
style>
插槽选择器
默认情况下,作用域样式不会影响到 渲染出来的内容,因为它们被认为是父组件所持有并传递进来的。而使用 :slotted 伪类可以打破这种情况。
<template>
<div class="child">
<slot
div>
template>
<style scoped>
:slotted(.red) {
color: red;
}
style>
深度选择器
Vue2 中样式穿透,一般是使用 ::v-deep 或 /deep/,而 Vue3 中我们可以使用 :deep 这个伪类:
<template>
<div class="parent">
<ChildView
div>
template>
<style scoped>
.parent :deep(.red) {
color: red;
}
style>
细心的兄弟会发现,以上选择器的风格是统一的,都是使用伪类的方式来实现。这样书写起来更加优雅,同时也更加方便记忆。
style 中的 v-bind
组件的 内支持使用 v-bind 绑定动态的组件状态:
<script setup>
import { ref } from 'vue'
const color = ref('red')
script>
<template>
<p>hellop>
template>
<style scoped>p {
color: v-bind('color');
}
style>
既然可以绑定动态的组件状态,那么切换主题就变得非常简单了:
<script setup>
import { reactive } from 'vue'
const theme = reactive({})
setWhiteTheme()
function setWhiteTheme() {
theme.fontColor = '#000'
theme.backgroundColor = '#fff'
}
function setBlackTheme() {
theme.fontColor = '#fff'
theme.backgroundColor = '#000'
}
script>
<template>
<div class="main">
<button @click="setWhiteTheme">白色主题button>
<button @click="setBlackTheme">黑色主题button>
<div class="content">
<div>Hello Vue3!div>
div>
div>
template>
<style scoped>
.content {
color: v-bind('theme.fontColor');
background-color: v-bind('theme.backgroundColor');
}
style>
虽然尤大大推荐使用 ,但有时候还得用到普通的 ,这时候我们可以混合起来使用。以下是用到普通 的场景: