今日の発見 input要素にv-modelをしたときにstringになる

まずこちらをご覧ください。

numにはリアクティブな0が入ってて、msgにはnumの値の型をcomputedで出力します。
numが代入された直後なので上に表示された型名はnumberですが、下のinput要素内の値を変えてみてください。

なんと変えた瞬間に型名がstringになったではないですか!!

そう、input要素のvalueプロパティはstringになるのです！知ってましたか？
自分は知りませんでした。しかし今日発見しました。

自分が今まで気づかなかった理由

皆さんご存じだと思いますが、JavaScriptは動的型付け言語です。
開発者ツールのコンソールなどで以下を入力してエンターしてみてください。

"2" * 2

なんと4になるではないですか!!

しかし本当は文字列なのかもしれない。という希望をもってtypeofしてみましょう。

typeof ("2" * 2)

なんと普通の数字ではないですか!!

そう、こういう文字列を数字と解釈したりするため、気づかないことがあるのです!!

ちなみに確認した範囲では-、/、**、などの演算子、
===以外の比較演算子や、Mathオブジェクト系も勝手にnumberに解釈するようです

自分が今日気づいた理由

+したら気づきました。

再現画像

なんと+するときはnumberをstringに解釈するではないですか!!

は？となりますが、このコードをみればその理由がわかるでしょう。

sample.js

let pi = 3.14;
console.log("円周率は" + pi + "だよ！");

2行目の二つの文字列をnumberに変換しようものなら両方がNaNになってNaNが出力されてしまいます。

対処法

1.演算時にparseIntする(Vueじゃなくてもいい)

import {ref} from "vue"
const num = ref(0)
watch(num,()=>{
    console.log(parseInt(num.value) + 1)
})

演算するたびにこの関数が必要になります。

2.parseIntするcomputedを参照する

import {ref,computed} from "vue"
const input = ref(0)
const inputnum = computed(()=>parseInt(input.value))
watch(inputnum,()=>{
    consle.log(inputnum.value + 1)
})

演算するたびに呼び出さなくていいし、Vueの要素プロパティに直接使えます。

3.computedのセッターとゲッターを使う

import {computed} from "vue"
let realNum = 0
const num = computed({
  get() {
    return realNum
  },
  set(newval) {
    realNum = parseInt(newval)
  }
})

値が入った瞬間に数値に変換します。
computedを代入した変数でリアクティブに使えるし、
realNumでは関数内などで.value無しで読み取りできます。
これが一番便利だと思います。

まとめ

これはVueに限らないので知っておいて損はないです。
数字のinputはparseIntしよう！