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都能兼顾进行响应式渲染。