0

createdの中でthis.intervalとしており、intevalという変数を定義しているのはわかるのですが、dataの中にintervalというプロパティーが定義されていないのにどうしてthis.intevalとなっているのでしょうか?

new Vue({
  el: '#app',
  created: function() {
    let that = this;
    this.interval = setInterval(function(){
      that.current = (that.current + 1) % that.components.length;
    }, 3000);
    
  },
  beforeDestroy: function() {
    clearInterval(this.interval);
  },
  computed: {
    currentBanner: function() {
      return 'banner-' + this.components[this.current];
    }
  },
  data: {
    current: 0,
    components: [ 'member', 'new', 'env' ]
  }
});

1 件の回答 1

0

Javascriptは動的型付け言語なので宣言のないプロパティであっても、オブジェクトの新しいプロパティとして代入できます

createdの中の this(変数that) はVueオブジェクトになるので、dataの中にintervalプロパティが追加されたわけではありません。Vueオブジェクトにintervalプロパティが新規追加された状態になります

Vue.jsはdataを定義するとそれらのgetter/setterメソッドを内部的に生成して利用されます。dataは this.$data が実態になります。仕組みはドキュメントにあるのでぜひ一読してみてください
https://jp.vuejs.org/v2/guide/reactivity.html

記載頂いたコードではdataを使わずVueオブジェクトを通して値のやり取りを行っているコードになります。

リアクティブが必要でなければdataに定義しなくても良いですが、基本的にそのVueコンポーネント内で使う変数はdataで定義したほうが個人的に良いかなと思います

2
  • そういうことなんですね!ということはthis.intervalのthisはVueオブジェクトを表しているという理解でよろしいでしょうか? Commented 2021年3月19日 23:02
  • そうなります、手元で動かせるならconsole.logでthisを表示するとわかりやすいです
    – sugumura
    Commented 2021年3月20日 4:37

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。