

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

[code]

    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' ]
      }
    });
    
[/code]


CC BY-SA 4.0
2021-03-19T09:50:30.203
74764
2021-03-19T14:17:24.043
2021-03-19T11:46:45.830
3060
43237
question
vue.js
Vue.jsのcreatedに内で使われるthisついて


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で定義したほうが個人的に良いかなと思います


CC BY-SA 4.0
2021-03-19T14:17:24.043
74769
2021-03-19T14:17:24.043
298
74764
answer