Vue の忘れがちな事のメモ

値の変更をトリガーにしてタイマーセットする

値の変更を検知してタイマーセットする。
v-on などのイベントによらず、値変更がトリガーになるので適用範囲が広がる。

clearInterval を使ってリセットしないと、次の実行から interval 0 になる。

var t; // timer
var timerRun; // timer status
var timerSet = new Vue({
  el: '#timer_obj',
  data: {
    message: '',
    icon: ''
  },
  methods: {
    icon_clear: function(){
      this.icon = '';
      this.message = '';
      timerRun = false; // done
    }
  },
  watch: {
    // triggered when changed
    icon: function(val){
      if (t && ! timerRun) {
        clearInterval(t) ; // reset interval 
      }
      if (val !== '') {
        timerRun = true;
        t = setInterval(this.icon_clear,3000); // method
      }
    }
  }
});

コンポーネント間でやりとりする

• Props Down, Event Up
• emit を使う

cf.

• Vue.js最初の難関、「props down, event up」を初心者にわかるように解説してみた
  
  • わかりやすい
• VueコンポーネントのState管理を考える
  • • コンポーネント同士のやり取りどうするの？

computed はキャッシュする

• 算出プロパティの項目を参照
• computed 内で利用している data の変更に基づいて更新される
• methods は常に計算する
• getter に向いている

Vue のエラー防止ルール

• スタイルガイドの優先度A