关于#uniapp#的问题，如何解决？

Question

uniapp项目小程序

<checkbox-group v-model="checkedList" @change="checkboxChange">
            <uni-card title="基础卡片" class="list-box" v-for="(item,index) in ComListSon" :key="item.INSTMID">
                <template v-slot:title>
                    <view class="list-box-title">
                        <label class="titleName">
                            <checkbox v-model="item.INSTMID" :value="item.INSTMID" :checked="item.checked"></checkbox>
                        </label>
                        <view class="link-detail" @click="linkComListSon(item.INSTMID)">
                            <text>查看详情</text>
                        </view>
                    </view>
                </template>
                <view class="list-box-content">
                    <view class="content-left">
                        <text>{{item.INSTMNAM}}</text>
                        <text>{{item.INSTMSUPPL}}</text>
                    </view>
                    <view class="content-right">
                        <uni-number-box v-model="item.num" :min="1" :max="9"></uni-number-box>
                        <uni-icons class="iconDel" type="trash" color="#ff0000" @click="singleDel(item)" />
                    </view>
                </view>
            </uni-card>
        </checkbox-group>

data中设置
ComListSon: [{
                    INSTMID: 1,
                    img: " https://ts1.cn.mm.bing.net/th?id=OIP-C.SzR5o5S31Xd1UjLkxQbqQwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.7&pid=3.1&rm=2",
                    INSTMNAM: '锁骨器械',
                    INSTMSUPPL: '器械供应商一',
                    num: 1
                }, {
                    INSTMID: 2,
                    img: "https://ts1.cn.mm.bing.net/th?id=OIP-C.SzR5o5S31Xd1UjLkxQbqQwHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.7&pid=3.1&rm=2",
                    INSTMNAM: '锁骨器械',
                    INSTMSUPPL: '器械供应商一',
                    num: 1
                }],
isAllSelected: true,
checkedList: [], // 默认选中的值
watch中监听
isAllSelected: {
                handler(n) {
                    console.log("一开始默认全选", n)
                    // console.log(this.ComListSon)
                    if (n) {
                        // console.log("默认一开始全部选中，把数组的值全设置选中")
                        this.ComListSon.forEach((item, index) => {
                            this.$set(item, 'checked', true)
                        })
                    } else {
                        if (this.checkedList.length == 0 || this.checkedList.length == this.ComListSon.length) {
                            this.ComListSon.forEach((item, index) => {
                                this.$set(item, 'checked', false)
                            })
                        }
                    }
                },

isAllSelected初始值是true，在监听中，确实是因为true进入if，但是却没有执行遍历数组ComListSon赋值checked为true，同时还不明白的是，在进入if之前，我打印了数组ComListSon，却发现数组里已经又checked属性了，这是为什么，涉及到了哪些知识点，求指教

Answer 1

在进入监听中的if语句之前，数组ComListSon中确实没有checked属性，因为在模板中，checkbox组件的checked属性绑定的是item.checked，而这个属性在ComListSon中是不存在的。但是在模板中，当用户进行勾选操作后，v-model="checkedList"会将选中的值添加到checkedList数组中，同时会触发@change事件，checkboxChange方法中会更新ComListSon数组中每个item的checked属性。因此，在监听中的if语句执行之前，ComListSon数组中已经有了checked属性。这里涉及到Vue的响应式原理，当使用$set方法添加一个新属性时，Vue会将该属性设置为响应式属性，从而使得该属性的变化也能触发视图更新。