🐙

Vueのmethods、computedの挙動・使い分けに混乱した記憶があったので整理してみる

1 min read

まずはmethods!

まずはボタンをクリックして呼び出した時の挙動。ボタンをクリックした時のみ呼び出されます。
当たり前だよね。問題は後者よ😩

index.html
<div id="app">
  <button @click="method">クリック</button>
</div>
index.js
const app = {
  methods: {
    method() {
      console.log('methodが実行されました')
    }
  }
}

Vue.createApp(app).mount('#app')

methodをマスタッシュの中に書くと初期表示リロード時または画面が再描画されるたびに呼び出されます。下記の場合は初期表示リロード時に呼ばれます。

index.html
<div id="app">
  {{ method() }}
</div>
index.js
const app = {
  methods: {
    method() {
      console.log('methodが実行されました')
    }
  }
}

Vue.createApp(app).mount('#app')

下記の場合は初期表示リロード時はもちろん、ボタンをクリックするとmethodが呼び出されます。
なぜかって?  ボタンクリックするとcounterの値が+1されて画面が再描画されるから!!!!!! 
これのせいで最初混乱した記憶がある😩
methodsは基本的にボタンなどのイベント時に使用するのが良さそう!

index.html
<div id="app">
  <button @click="counter+=1">counter++</button>
  Counter: {{ counter }}<br/>
  {{ method() }}
</div>
index.js
const app = {
  data() {
    return {
      counter: 10
    }
  },
  methods: {
    method() {
      console.log('methodが実行されました')
    }
  }
}

Vue.createApp(app).mount('#app')

computedは明日書きます