Vue.js reactive 数组长度与对象属性同步 - 使用 watch 监听动态更新

const symptoms = reactive({});\nconst checked = reactive([]);\n\nasync function onVisibleChange(visible) {\n if (visible) {\n const symptom = await defHttp.get({ url: '/checkItemDetail/checkItemDetail/getSymptom' });\n Object.assign(symptoms, symptom);\n updateCheckedArray();\n }\n}\n\nfunction updateCheckedArray() {\n const symptomsLength = Object.keys(symptoms).length;\n if (checked.length < symptomsLength) {\n for (let i = checked.length; i < symptomsLength; i++) {\n checked.push({ name: symptoms[i].name });\n }\n } else if (checked.length > symptomsLength) {\n checked.splice(symptomsLength);\n }\n}\n\n// 监听symptoms的变化，动态更新checked数组\nwatch(symptoms, () => {\n updateCheckedArray();\n});\n\n这样，当symptoms的长度发生变化时，checked数组会自动调整为与symptoms长度一致，并为每个元素赋值相应的name属性。