如何避免触犯`vue/no-mutating-props`规则？

为了避免触犯`vue/no-mutating-props`规则，你可以按照以下几个步骤：

1. **确保只读**: 当从父组件接收 prop 时，声明它是不可变的，例如 `readonly` 或者使用 `v-bind` 绑定而非直接赋值。

<template>
  <div :student="receivedStudent" @update:student="handleUpdatedStudent"></div>
</template>

<script>
export default {
  props: {
    student: { type: Object, required: true, readonly: true }
  },
  methods: {
    handleUpdatedStudent(newStudent) {
      this.$emit('update:student', newStudent);
    }
  }
}
</script>

2. **使用计算属性**: 如果需要基于 prop 进行计算，使用计算属性 (computed properties)。

data() {
  return {
    computedStudent: {}
  }
},
computed: {
  derivedStudent() {
    // 对接收到的 prop 进行计算
    return processThisProp(this.student);
  }
}

3. **事件通信**: 对于需要修改的状态，考虑使用事件（如自定义事件或 vuex 状态管理）通知父组件更新。

4. **专用修改方法**: 如果父组件允许，提供一个特定的方法供子组件用于更新状态，而不是直接改变 prop。

记住，遵循单向数据流原则有助于防止意外的 prop 变更，并增强组件之间的隔离性。