【Vue.js】v-onと$refsを使ってクリックごとに数が増えるボタンを作る2つの方法

v-onを使うもの


See the Pen
クリックごとに数が増えるボタン
by りっしー (@hiwriterprogram)
on CodePen.

$refsを使うもの


See the Pen
$refsを使ったカウントアップボタン
by りっしー (@hiwriterprogram)
on CodePen.

2つの違いは?

1つ目はdataにcountという値を持たせて数を増やしている一方で
2つ目はDOMを直接参照して値を更新しています。

ただし2つ目の場合、DOM自体(ref=countで参照しているもの)は仮想DOMに上書きされてしまうため、v-showで非表示にした後に再び表示させると値は0に戻ってしまいます。