这个变量从何而来？答案

【问题标题】：Where does this variable come from?这个变量从何而来？
【发布时间】：2019-08-08 06:03:03
【问题描述】：

我从书中看到了这个例子。

我不明白的是这个区间变量是从哪里来的？

它没有在数据块内部定义，你不能通过赋值来创建一个变量。

它是javascript中的全局变量吗？

const POMODORO_STATES = {
  WORK: 'work',
  REST: 'rest'
};
const STATES = {
  STARTED: 'started',
  STOPPED: 'stopped',
  PAUSED: 'paused'
};
const WORKING_TIME_LENGTH_IN_MINUTES = 1;
const RESTING_TIME_LENGTH_IN_MINUTES = 5;

new Vue({
  el: '#app',
  data: {
    state: STATES.STOPPED,
    minute: WORKING_TIME_LENGTH_IN_MINUTES,
    second: 0,
    pomodoroState: POMODORO_STATES.WORK,
    timestamp: 0
  },
  computed: {
    title: function () {
      return this.pomodoroState === POMODORO_STATES.WORK ? 'Work!' : 'Rest!'
    },
    min: function () {
      if (this.minute < 10) {
        return '0' + this.minute;
      }

      return this.minute;
    },
    sec: function () {
      if (this.second < 10) {
        return '0' + this.second;
      }

      return this.second;
    }
  },
  methods: {
    start: function () {
      this.state = STATES.STARTED;
      this._tick();
      this.interval = setInterval(this._tick, 1000);
    },
    pause: function () {
      this.state = STATES.PAUSED;
      clearInterval(this.interval);
    },
    stop: function () {
      this.state = STATES.STOPPED;
      clearInterval(this.interval);
      this.pomodoroState = POMODORO_STATES.WORK;
      this.minute = WORKING_TIME_LENGTH_IN_MINUTES;
      this.second = 0;
    },
    _tick: function () {
      //if second is not 0, just decrement second
      if (this.second !== 0) {
        this.second--;
        return;
      }
      //if second is 0 and minute is not 0, decrement minute and set second to 59
      if (this.minute !== 0) {
        this.minute--;
        this.second = 59;
        return;
      }
      //if second is 0 and minute is 0, toggle working/resting intervals
      this.pomodoroState = this.pomodoroState === POMODORO_STATES.WORK ? POMODORO_STATES.REST : POMODORO_STATES.WORK;
      if (this.pomodoroState === POMODORO_STATES.WORK) {
        this.minute = WORKING_TIME_LENGTH_IN_MINUTES;
      } else {
        this.minute = RESTING_TIME_LENGTH_IN_MINUTES;
      }
    }
  }
});

button:disabled i {
  color: gray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="app" class="container">
  <h2>
    <span>Pomodoro</span>
    <button :disabled="state==='started'" title="start" @click="start()">
      <i class="glyphicon glyphicon-play"></i>
    </button>
    <button :disabled="state!=='started'" title="pause" @click="pause()">
      <i class="glyphicon glyphicon-pause"></i>
    </button>
    <button :disabled="state!=='started' && state !== 'paused'" title="stop" @click="stop()">
      <i class="glyphicon glyphicon-stop"></i>
    </button>
  </h2>
  <h3>{{ title }}</h3>
  <div class="well">
    <div class="pomodoro-timer">
      <span>{{ min }}</span>:<span>{{ sec }}</span>
    </div>
  </div>
</div>

【问题讨论】：

这和this.state、this.pomodoroState、this.minute、this.second 完全一样——你似乎没有问题！
@JaromandaX 但这些变量已在数据 obj 中定义。
您需要了解使用对象（类）以及 this 的工作原理

标签： javascript vue.js vuejs2

【解决方案1】：

intervalvariable 定义在start 方法中

this.interval = setInterval(this._tick, 1000)

保存 setInterval 的引用，以便稍后在 pause 和 stop 方法中清除它。让您感到困惑的是为什么interval 没有在状态中定义？如果状态中未定义某些内容，并不意味着您不能在任何方法中将其附加到 vue 实例 (this)。您可以在 javascript 中合法地执行此操作，并且与 Vue 无关。

但是，此代码的作者应该将 interval 声明为 interval: null 这样的状态以避免混淆，这也是最佳实践。

【讨论】：