vue-watch(监听器)

例1

watch(
  dataList,
  () => {
    console.log(dataList.value);
  },
  { deep: true, immediate: true }
);

例2

watch(
  () => plainList,
  async () => {
    await nextTick(); // 确保DOM更新完成后再执行
    setOptions({
      container: ".bar-card",
      color: ["#41b6ff", "#e85f33"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "none"
        }
      },
      grid: {
        top: "20px",
        left: "50px",
        right: 0
      },
      legend: {
        data: ["惩罚", "奖励"],
        textStyle: {
          color: "#606266",
          fontSize: "0.875rem"
        },
        bottom: 0
      },
      xAxis: [
        {
          type: "category",
          data: [
            "计划一",
            "计划二",
            "计划三",
            "计划四",
            "计划五",
            "计划六",
            "计划七",
            "计划八",
            "计划九",
            "计划十"
          ],
          axisLabel: {
            fontSize: "0.875rem"
          },
          axisPointer: {
            type: "shadow"
          }
        }
      ],
      yAxis: [
        {
          type: "value",
          axisLabel: {
            fontSize: "0.875rem"
          },
          splitLine: {
            show: false // 去网格线
          }
          // name: "单位: 个"
        }
      ],
      series: [
        {
          name: "惩罚",
          type: "bar",
          barWidth: 10,
          itemStyle: {
            color: "#41b6ff",
            borderRadius: [10, 10, 0, 0]
          },
          data: penalty.value
        },
        {
          name: "奖励",
          type: "bar",
          barWidth: 10,
          itemStyle: {
            color: "#e86033ce",
            borderRadius: [10, 10, 0, 0]
          },
          data: prize.value
        }
      ]
    });
  },
  {
    deep: true,
    immediate: true
  }
);

deep: 深度监听对象或数组内部数据的变化。当我们监听一个对象或数组时，默认情况下只会监听对象或数组的引用变化，而不会监听其内部数据的变化。
immediate：用于指定watch在组件创建时立即执行一次回调函数，而不必等待数据的变化。

参考：https://blog.csdn.net/weixin_44166849/article/details/133339827