🐙
Vueのmethods、computedの挙動・使い分けに混乱した記憶があったので整理してみる
まずは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')
Discussion