如何对 Vue.js 中的值变化产生副作用？答案

【问题标题】：how to run side effect on value change in Vue.js?如何对 Vue.js 中的值变化产生副作用？
【发布时间】：2022-07-16 12:14:14
【问题描述】：

我的目标是在“monthIndex”更改时产生副作用。在反应中，我会使用带有依赖项的 useEffect 钩子，但我是 vue 的新手。我基本上是通过按钮增加“monthIndex”，这会改变数组“daysInMonth”中的索引。每次月份索引更改时，它都应该运行 updateCalendar 方法并呈现日历中的日期。这是我的目标，谢谢！

<template>
  <div id="app">
    <div class="header">
      <div class="controls">
        <button v-on:click="prevMonthHandler">prev</button>
        <h2>Date</h2>
        <button v-on:click="nextMonthHandler">next</button>
      </div>
    </div>
    <div class="weekdays">
      <p class="weekday" v-for="(weekday, index) in weekdays" :key="index">
        {{ weekday }}
      </p>
    </div>
    <div class="grid">
      {{ calendarDays }}
      <!-- <div class="day" v-for="(day, index) in calendarDays" :key="index">
        {{ day }}
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "App",

  mounted() {
    this.updateCalendar();
  },

  data() {
    return {
      monthIndex: 0,
      calendarDays: [],
      daysInMonth: [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30],
      weekdays: [
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday",
      ],
    };
  },



  methods: {

    updateCalendar() {
      for (let i = 0; i < this.daysInMonth[this.monthIndex]; i++) {
        this.calendarDays.push(i);
      }
    },

    nextMonthHandler() {
      if (this.monthIndex > 12) {
        this.monthIndex++;
      }
    },

    prevMonthHandler() {
      if (this.monthIndex < 0) {
        this.monthIndex--;
      }
    },
  },
};
</script>

【问题讨论】：

我想过在按钮事件中运行 updateCalendar() 但不确定这是正确的方法。
对不起，但你的代码对我来说没有意义：next 和 prev 处理程序不会做任何事情：点击 nextMonthHandler -> 如果它增加 monthIndex大于 12？但它不是（初始化为 0），所以永远不会。 prevMonthHandler 也是如此（只是“小于 0”）。 updateCalendar 函数将数字推送到一个数组中，所以它最终会是：[0, 1, ..., 30, 0, 1, ..., 28, ...]。你到底想做什么？
我之所以问，是因为可以通过多种方式对值更改做出反应，其中只有一种是使用 watcher（与 useEffect 有依赖关系）。可能整个逻辑可能会有所不同——让您的生活更轻松，代码更简洁。
最后：我总是建议人们不要自己干涉DateTime。该领域有很多边缘情况，“这不是你指望的事情”，几乎总是最好使用一个库（如DayJS），它已经解决了所有问题并提供了一个很好的API来使用.

标签： vuejs2 v-for computed-properties side-effects

【解决方案1】：

您可以使用 watch 属性来检测变量的变化。

你可以看到watchhere的更多功能

watch : {
  monthIndex(newVal, oldVal) {
    console.log(`Value updated from ${oldVal} to ${newVal}`)
  }
}

【讨论】：