如何将Vue类绑定格式转换为可用于classList的字符串形式？

嘿，这个需求我之前也碰到过！要操作Vue应用外部的DOM元素，没法用Vue自带的类绑定语法，确实得自己处理各种格式的类输入。其实我们可以写一个工具函数，把Vue支持的所有类绑定格式（字符串、数组、对象甚至嵌套结构）转换成干净的类名数组，这样就能直接传给classList.add了。

先给你核心的工具函数，它能递归处理所有场景：

function resolveVueClasses(classInput) {
  const classes = [];

  // 处理字符串类型，分割空格并过滤空值
  if (typeof classInput === 'string') {
    classInput.split(' ').forEach(cls => cls.trim() && classes.push(cls.trim()));
    return classes;
  }

  // 处理数组（包括嵌套数组），递归解析每一项
  if (Array.isArray(classInput)) {
    classInput.forEach(item => {
      const resolvedItems = resolveVueClasses(item);
      if (resolvedItems.length) {
        classes.push(...resolvedItems);
      }
    });
    return classes;
  }

  // 处理对象类型，只保留值为true的类名
  if (typeof classInput === 'object' && classInput !== null) {
    Object.entries(classInput).forEach(([cls, condition]) => {
      if (Boolean(condition)) {
        classes.push(cls);
      }
    });
    return classes;
  }

  // 其他无效类型（比如null、undefined、布尔值）直接返回空数组
  return classes;
}

这个函数的逻辑和Vue内部处理类绑定的逻辑一致，能覆盖你提到的所有使用场景：

• 字符串格式："bg-gray-300" 会转换成 ["bg-gray-300"]，带空格的字符串比如"bg-gray-300 text-red-500"也会自动分割成两个类
• 条件表达式：isCertainPage && 'bg-gray-300' 当isCertainPage为true时返回["bg-gray-300"]，否则返回空数组
• 三元表达式：isCertainPage ? 'bg-gray-300' : '' 同样根据条件返回对应结果
• 嵌套数组：['text-red-500', ['class-in-nested-array']] 会被扁平化，得到["text-red-500", "class-in-nested-array"]
• 对象格式：{ 'bg-gray-300': isCertainPage } 只有当isCertainPage为true时，才会把bg-gray-300加入数组

接下来在你的Vue组件里这么用就行：

<script>
export default {
  props: {
    backgroundClass: {
      type: [String, Array, Object],
      default: ''
    }
  },
  data() {
    return {
      // 保存上一次添加的类，方便更新时移除旧类
      prevBodyClasses: []
    };
  },
  methods: {
    resolveVueClasses(classInput) {
      const classes = [];
      if (typeof classInput === 'string') {
        classInput.split(' ').forEach(cls => cls.trim() && classes.push(cls.trim()));
        return classes;
      }
      if (Array.isArray(classInput)) {
        classInput.forEach(item => {
          const resolvedItems = this.resolveVueClasses(item);
          if (resolvedItems.length) {
            classes.push(...resolvedItems);
          }
        });
        return classes;
      }
      if (typeof classInput === 'object' && classInput !== null) {
        Object.entries(classInput).forEach(([cls, condition]) => {
          if (Boolean(condition)) {
            classes.push(cls);
          }
        });
        return classes;
      }
      return classes;
    },
    updateBodyBgClasses() {
      // 先移除之前的类，避免重复添加
      document.body.classList.remove(...this.prevBodyClasses);
      // 解析当前的类
      const newClasses = this.resolveVueClasses(this.backgroundClass);
      // 添加新类
      document.body.classList.add(...newClasses);
      // 更新保存的旧类
      this.prevBodyClasses = newClasses;
    }
  },
  mounted() {
    // 组件挂载时初始化类
    this.updateBodyBgClasses();
  },
  watch: {
    backgroundClass: {
      handler() {
        // 类更新时同步更新body的类
        this.updateBodyBgClasses();
      },
      deep: true // 必须开启深度监听，不然嵌套数组/对象变化不会触发更新
    }
  }
};
</script>

需要注意的是，因为backgroundClass可能是嵌套数组或者对象，所以watch要加deep: true，这样内部变化时才能触发更新。另外，每次更新前要移除旧类，不然body上会积累一堆无用的类。

其实Vue源码里有个内部函数叫normalizeClass也是干这个的，但不建议直接用内部API，毕竟Vue版本更新可能会改内部实现，自己写的函数更稳定可控。

备注：内容来源于stack exchange，提问作者Soviut