Vue组件中Watcher监听childProps不触发问题求助

核心错误点 #

1. 错误使用v-model绑定prop
   childProps是父组件传入的props，Vue遵循单向数据流原则，禁止子组件直接修改props。你给<Doughnut>绑定了v-model="childProps"，这会尝试修改childProps的值，不仅会触发Vue控制台警告，还会破坏数据流向，导致watch无法正常监听prop变化。而且vue-chartjs的Doughnut组件本身不支持v-model，这个绑定完全多余。

2. watch未配置深度监听（若childProps为对象）
   如果childProps是包含ID的对象（而非单个基本类型值），默认watch只会监听引用变化，对象内部属性更新时不会触发回调，需要开启deep: true才能监听内部属性变化。

3. 初始化时的无效请求
   mounted钩子中直接调用getAlertsByType()，此时this.id为null，会发起/widgets/test/null的无效请求，虽catch块未打印错误，但可能影响后续流程，应只在id有效时发起请求。

修改后的代码 #

模板部分（移除v-model）

<template>
  <div class="dashboard-widget-wrapper">
    <h5 class="fw-normal dashboard-table-title">Review Items By Entitlement Type</h5>
    <div>
      <Doughnut
        v-if="loaded"
        :options="chartOptions"
        :data="chartData"
        :plugins="plugins"
      >
      </Doughnut>
    </div>
  </div>
</template>

脚本部分（修复watch与初始化逻辑）

<script>
import { Doughnut } from 'vue-chartjs'
import axios from 'axios'

export default {
  name: 'WidgetReviewItemsByEntitlementType',
  props: ['childProps'],
  components: {
    Doughnut
  },
  data() {
    return {
      loaded: false,
      id: null,
      chartData: {
        labels: [],
        datasets: [
          {
            backgroundColor: ['#5acbe9', '#fabf3f', '#f67599', '#3898ff', '#fcafc1'],
            borderWidth: 0,
            data: []
          }
        ]
      },
      chartOptions: {
        layout: {
          padding: 20
        },
        plugins: {
          title: {
            display: false,
            text: 'Current Number of Alerts by Type'
          },
          customCanvasBackgroundColor: {
            color:
              document.querySelector('html').getAttribute('data-theme') === 'dark'
                ? '#44444a'
                : 'white'
          },
          legend: {
            position: 'bottom',
            labels: {
              color:
                document.querySelector('html').getAttribute('data-theme') === 'dark'
                  ? '#c0c1c2'
                  : '#606263'
            }
          }
        },
        responsive: true,
        maintainAspectRatio: false
      },
      plugins: [
        {
          id: 'customCanvasBackgroundColor',
          beforeDraw: (chart, args, options) => {
            const { ctx } = chart
            ctx.save()
            ctx.globalCompositeOperation = 'destination-over'
            ctx.fillStyle = options.color || '#99ffff'
            ctx.fillRect(0, 0, chart.width, chart.height)
            ctx.restore()
          }
        }
      ]
    }
  },
  methods: {
    getAlertsByType() {
      if (!this.id) return
      axios
        .get('/widgets/test/' + this.id)
        .then(response => {
          // 用对象展开确保响应式更新
          this.chartData = {
            ...this.chartData,
            labels: response.data.labels,
            datasets: [{ ...this.chartData.datasets[0], data: response.data.data }]
          }
          this.loaded = true
        })
        .catch(error => {
          console.log(error) // 保留错误日志方便排查
        })
    }
  },
  watch: {
    // 情况1：childProps是单个ID（基本类型）
    childProps: function (val) {
      if (val !== this.id) {
        console.log(val)
        this.id = val
        this.getAlertsByType()
      }
    },
    // 情况2：childProps是对象，取消注释并启用深度监听
    /*
    childProps: {
      handler(val) {
        const newId = val.id
        if (newId !== this.id) {
          console.log(newId)
          this.id = newId
          this.getAlertsByType()
        }
      },
      deep: true
    }
    */
  },
  created() {
    // 初始化时若childProps已有值，直接触发请求
    if (this.childProps) {
      this.id = typeof this.childProps === 'object' ? this.childProps.id : this.childProps
      this.getAlertsByType()
    }
  }
}
</script>

额外注意事项 #

• 直接修改chartData的嵌套属性可能无法触发响应式更新，建议用对象展开或Vue.set确保响应式。
• 确保父组件传递childProps时是响应式变量（如父组件data中定义的变量），否则父组件更新后子组件无法感知。

内容的提问来源于stack exchange，提问作者Eric Evans