Vue class绑定中，对象绑定的原理是什么？

box1和box2都是内部样式
请问为什么在46行 :class="classObj"中的classObj,在55行data:{ }里写的classObj{ box1:true}这里的box1和box2啥的都是属性，为什么可以直接在:class=""中绑定使用呢？？而前面的绑定数组和类名都是字符串，而这里直接绑定对象，然后box1和box2作为属性同样可以生效

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .basic{
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
        .happy{
            background-color: aqua;
        }
        .sad{
            background-color: cadetblue;
        }
        .normal{
            background-color: lightgreen;
        }
        .box1{
            border-radius: 15px;
        }
        .box2{
            border-color: lightgreen;
        }
        .box3{
            background-color:skyblue
        }
    style>
    <script src="./vue.js">
    script>
head>
<body>
    
    
    <div id="app">
    <div  class="basic"  :class="mood" @click="click">div>

    
    <div  class="basic"  :class="classArr" @click="click1">div>
    
    
    <div  class="basic"  :class="classObj" @click="click">div>
div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                mood:"",
                isMood:true,
                classArr:["box1","box2","box3"],
                classObj:{
                    box1:true,
                    box2:true,
                    box3:true,
                }
            },
            methods:{
                click(){
                    this.isMood=!this.isMood;
                },
            },
            watch:{
                isMood:{
                    immediate:true,
                    handler(){
                        this.mood=this.isMood?"happy":"sad";
                    }
                }
            }
        })
    script>
body>
html>

因为vue api里面支持这种写法(class-and-style)[https://v2.cn.vuejs.org/v2/guide/class-and-style.html]

img

vue中动态绑定class有三种形式，内部的处理方式是：vue会判断动态class绑定的字段的字段类型是什么？如果是string就直接用，如果是数组就会拼接，如果是对象，通过判断对象key对应的值是否为true，如果为true就会将true的key拼接起来