watch( () => props.containerList, (newVal, oldVal) => { props.containerList.forEach((item, index) => { if (item.hyWeight) { weightList.push(item.hyWeight / 1000); } else { weightList.push(""); } if (item.hyWeight2) { weightList2.push(item.hyWeight2 / 1000); } else { weightList2.push(""); } item.checkboxName = "勾选投保"; }); getbaseRateList(); console.log(props.containerList); } );什么意思

这段代码是Vue.js框架中的响应式属性监听器，用于监听props中containerList数组的变化，并在数组变化时执行回调函数。

具体来说，watch()函数接受两个参数：一个是需要监听的属性，另一个是当属性值变化时需要执行的回调函数。在这段代码中，我们监听了props中的containerList属性，并在属性值变化时执行了一个回调函数。

回调函数中包含了一些逻辑，我们循环遍历了containerList数组中的每个元素，如果该元素的hyWeight属性存在，则将其值除以1000后添加到weightList数组中；如果该元素的hyWeight2属性存在，则将其值除以1000后添加到weightList2数组中；最后将该元素的checkboxName属性设置为"勾选投保"。

接着，我们调用了getbaseRateList()函数，并在控制台打印了containerList数组。

总的来说，这段代码的作用是在containerList数组发生变化时，更新数组中的元素属性，并调用getbaseRateList()函数执行一些操作。这种响应式编程的方式让我们可以更加方便地处理数据变化，实现更加灵活的业务逻辑。

相关问题

watch( () => props.showBuTian, (newVal, oldVal) => { console.log("🚀 ~ file: index.vue ~ line 358 ~ newVal", newVal); // dialogVisible.value = newVal; if (newVal) { showDialog({}); } } );这段代码什么意思

这段代码是Vue.js框架中的响应式属性监听器，用于监听props中showBuTian属性的变化，并在属性值变化时执行回调函数。

具体来说，watch()函数接受两个参数：一个是需要监听的属性，另一个是当属性值变化时需要执行的回调函数。在这段代码中，我们监听了props中的showBuTian属性，并在属性值变化时执行了一个回调函数。

回调函数中包含了一些逻辑，当showBuTian属性的值为true时，调用了showDialog()函数。因此，当showBuTian属性的值从false变为true时，就会弹出一个对话框。

值得注意的是，在Vue.js中，我们可以通过watch()函数来监听一个属性的变化，并在变化时执行一些操作。这种响应式编程的方式让我们可以更加方便地处理数据变化，实现更加灵活的业务逻辑。

watch(() => [...props.component_infos], (newval:any, oldval) => { // leftimg_lists.value = { // commonComponentList: newval.filter(f => f.panel_class == 'common'), // drawComponentList: newval.filter(f => f.panel_class == 'draw'), // chartComponentList: newval.filter(f => f.panel_class == 'chart') // }; leftimg_lists.value = newval.forEach((item:any)=>{ if(item.child.length){ item.child.forEach((sItem:any)=>{ if(sItem.child.length){ sItem.child.forEach((iItem:any)=>{ iItem.create_type = "draggable" iItem.type= iItem.name iItem.title= iItem.name iItem.props= ['prop_data'] if (iItem.extendAttr) { iItem.extend_attr = JSON.parse(iItem.extendAttr) } }) } }) } }) console.log(newval,'newval'); console.log( leftimg_lists.value ,' leftimg_lists.value '); });

这段代码使用了Vue.js的watch API，当props.component_infos的值发生变化时，会执行回调函数。回调函数首先将props.component_infos转换为数组，然后根据panel_class属性将组件分类，并将结果存储在leftimg_lists.value对象中。

接下来，回调函数使用forEach()方法遍历props.component_infos数组，并对其进行修改。如果组件具有子组件，则将子组件的create_type、type、title和props属性设置为固定值，并从extendAttr属性中解析出extend_attr属性。

最后，回调函数打印出新的props.component_infos值和leftimg_lists.value值，用于调试和验证。

总的来说，这段代码是在Vue.js框架中，用于对props.component_infos属性进行监听，并在其发生变化时进行分类和修改。