リアクティビティーの基礎 での「ref」と「reactive」がVueの一番の基礎
結局 ref は 値の value への代入時に value への setter通過時、その変化を検知するようにしてあるというもの。
JavaScriptで、値の変更自体を検知するproxy的な仕組みを使って組んだことがある人なら普通に理解できている仕組み。
(逆にそういったものを作ったことがない人は、「そういったもの」という理解になってしまうので長い目では理解が及ばず苦しむかも)
reactive は変数が「オブジェクト」の場合に、ref の代わりに reactive を使った方が楽というモノ。
(ref でも動作はするが、ネストが深くなるのでアクセスしにくくなる)
ref だけは使い方を覚えよう
refの値を変化させた時、DOMにそれが反映されたことを確実に待つのが nextTick
JavaScriptではあまりこのような同期順番待ち的な行為はしないため、出番は少ない。
「refを使ってもいいし問題なく動作する」んだけど、元々がオブジェクトなものを、
ref すると、さらにネストでオブジェクト化されるので、
reactive を使った方が、ほんの超わずかだけ動作が速いよね、というだけのこと。
とはいえ、ネストが深くなるとアクセスするのも面倒くうさいので、
プリミティブなら「ref」、オブジェクトなら「reactive」とおぼえてしまうのが吉。
これは注意。
JSやTSに慣れてくれば来るほど、分割代入しがちなので、
reactiveしたオブジェクトのメンバーは分割代入で引き受けできないことを知っておく必要がある。