在vue3中，为了更加方便地操作组件模板内的类名，提供了一个新的函数normalizeclass，该函数能够根据传入的数组或对象，生成一个规范化的类名字符串。
normalizeClass函数不仅可以让类名的渲染更加灵活，而且还能帮助我们更好地组织和管理类名，让组件的样式更易于维护。
接下来，我们就来详细地了解一下normalizeClass函数的用法和应用场景。
一、normalizeClass函数的基本用法
normalizeClass函数支持两个参数，第一个参数可以为数组或对象，第二个参数可以为一个可选参数，用于指定默认类名。
立即学习“前端免费学习笔记（深入）”；
- 数组作为参数
当我们传入一个数组时，normalizeClass函数会将数组内的每一个元素都作为一个类名进行处理，并将这些类名拼接成一个用空格分隔的字符串。
例如，我们有一个数组styles，其中包含了三个类名，分别为'big', 'blue'和'bold'。如果我们希望将这几个类名用空格分隔，拼接成为一个整体的类名，可以使用normalizeClass函数，代码如下所示：
<template>
<div :class="normalizeClass(styles)"></div>
</template>
<script>
export default {
data() {
return {
styles: ['big', 'blue', 'bold']
}
}
}
</script>这样，Vue3会将styles数组中的三个类名拼接成一个样式字符串，然后渲染到模板中的元素上。
- 对象作为参数
当我们传入一个对象时，normalizeClass函数会根据这个对象的属性值和属性名，生成一个类名字符串。
对象的属性值通常是一个布尔值，该值为真时，说明对应的类名要生效，而为假时，则不生效。
例如，我们有一个对象styles，其中包含了三个属性big, blue和bold，属性值分别为true和false。如果我们想要根据属性值来确定要显示哪些类名，可以使用normalizeClass函数，代码如下所示：
<template>
<div :class="normalizeClass(styles)"></div>
</template>
<script>
export default {
data() {
return {
styles: {
big: true,
blue: false,
bold: true
}
}
}
}
</script>当我们这样使用normalizeClass函数时，Vue3会根据对象styles的属性值，将big和bold两个类名拼接成一个字符串，并将其渲染到模板中的元素上。
- 指定默认类名
在某些情况下，我们希望在生成类名字符串时，为其添加一些默认的类名。这时，我们可以使用normalizeClass函数的第二个参数，代码如下所示：
<template>
<div :class="normalizeClass(styles, 'container')"></div>
</template>
<script>
export default {
data() {
return {
styles: ['big', 'blue', 'bold']
}
}
}
</script>这样，当我们使用normalizeClass函数生成类名字符串时，会将类名字符串和默认类名'container'拼接成一个样式字符串，然后渲染到模板中的元素上。
二、normalizeClass函数的高级用法
除了基本用法以外，normalizeClass函数还有一些高级用法，可以让我们更加灵活地组织和管理类名。
- 传入函数作为参数
当我们需要根据某些动态的条件来动态地生成类名时，可以传入一个函数作为normalizeClass函数的参数。
这个函数接收一个上下文对象，包含了当前组件实例、组件的props、组件的data等一些数据，我们可以根据这些数据来动态生成类名。
例如，我们有一个组件Checkbox，它有一个属性checked，用于指定是否选中，我们希望在选中时，为它添加一个类名'checked'。我们可以这样实现：
<template>
<label :class="normalizeClass({ 'checked': isChecked })">
<input type="checkbox" v-model="isChecked">
{{ label }}
</label>
</template>
<script>
export default {
props: {
label: String,
checked: Boolean
},
data() {
return {
isChecked: this.checked
}
},
watch: {
checked(value) {
this.isChecked = value
}
},
methods: {
normalizeClass(context) {
return context.props.checked ? ['checked'] : []
}
}
}
</script>这样，当props中的checked属性为真时，normalizeClass函数会返回一个包含了'checked'类名的数组，否则返回一个空数组，从而动态管理类名。
- 传入对象作为参数
当我们需要根据一些对象来动态生成类名时，可以传入一个对象作为normalizeClass函数的参数。
这个对象可以由多个属性组成，每个属性的值可以是一个布尔值，符合条件时为真，不符合条件时为假。normalizeClass函数会根据这些属性的值来决定是否添加该属性所对应的类名，从而动态管理类名。
例如，我们有一个组件Badge，它有一个属性count，表示数量，当数量为0时，我们希望为其添加一个类名'none'，用于掩盖该元素。我们可以这样实现：
<template>
<div :class="normalizeClass({ 'none': count === 0, 'has-count': count > 0 })">
<div class="badge-count">{{ count }}</div>
<slot></slot>
</div>
</template>
<script>
export default {
props: {
count: Number
},
methods: {
normalizeClass(context) {
const classList = []
for (const key in context.props) {
if (context.props.hasOwnProperty(key) && context.props[key]) {
classList.push(key)
}
}
return classList
}
}
}
</script>这样，当props中的count属性为0时，normalizeClass函数会返回一个包含了'none'类名的数组，否则返回一个包含了'has-count'类名的数组，从而动态管理类名。
总结：
normalizeClass函数是Vue3框架内置的函数之一，它可以根据数组或对象生成一个规范化的类名字符串，帮助我们更好地组织和管理组件的样式。在实际开发中，我们可以根据某些动态的条件来动态地生成类名，或根据一些对象来决定是否添加某些类名，从而实现更加灵活的样式管理。
