uniapp解决Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead

在uni-app中，避免直接修改props是因为组件间的父子通信机制遵循单向数据流原则。当你在父组件直接修改子组件的prop，每次当父组件重新渲染时，这个prop的值会被覆盖，这可能导致预期的行为丢失，尤其是当prop用于共享状态时。

为了解决这个问题，uni-app推荐以下几种处理方式：

1. **使用事件总线（Event Bus）**：在父组件和子组件之间传递事件，而不是直接修改prop。你可以创建一个全局事件中心，让父组件触发一个事件，子组件接收到这个事件后再去改变自身的状态。

// 父组件
this.$emit('update:childProp', newValue)

// 子组件
methods: {
  updateChildProp(newVal) {
    this.myProp = newVal;
  }
},
@Listen('update:childProp') handleParentChange(newVal) {
  this.updateChildProp(newVal);
}

2. **使用Vuex（State Management）**：如果需要在多个组件间共享状态，可以将状态存储在一个独立的状态管理库（如Vuex）中，这样修改的是store里的状态，不会影响prop的原始值。

import store from '@/store';
...
store.commit('updateMyProp', newValue);

3. **props的不可变性（Immutable Props）**：如果你正在使用Vue的Composition API（如setup函数），可以使用计算属性（Computed Property）包裹需要动态更新的值，使其看起来像是读取而非修改prop。

setup(props) {
  const computedProp = computed(() => {
    // 根据props的值计算新的结果
    return calculateNewValue(props.myProp);
  });

  return { myComputedProp: computedProp };
}

总之，为了保持组件的灵活性和易于维护，你应该尽量遵循单向数据流动的原则，避免直接修改props。这样无论何时父组件更新，子组件都会保持其自身的独立状态。