vue3踩坑：静态dom无法初始化渲染 -> 父组件props与侦听器的交互

今天遇到一个没有渲染dom的问题，原因是父组件如果传递的是未被ref或reactive包裹的静态值，那么传递到子组件中被watch包裹，即使深监听也不会触发响应式变化。

需要搭配onMounted+watch进行动态和静态组合触发。

// 静态props挂载到dom上
onMounted(() => {_clonedProps.tabsArr = cloneDeep(props.tabConfig.slotListMap);_clonedProps.rightArr = cloneDeep(props.rightListArr);
});// 侦听逻辑
watch(() => props.rightListArr,(newVal) => {_clonedProps.rightArr = cloneDeep(newVal);},{ deep: true }
);
// ....

这样才能动态和静态props都能兼顾进行响应式渲染。