Vue3でreactiveなオブジェクトをletで作成して良いのか？

Question

前提

タイトルのとおりですがVue2で言うと下記で言う「test」があるとします。

data:(){
  return {
    test:{
      a:1,
      b:2,
    },
  ]
}

Vue3で書くと

const test = reactive({
  a:0,
  b:0,
});

の様な感じになると思います。

例えばこの「test」をStorageにJSON.parse等で保存します。

sessionStorage.setItem('test',JSON.stringify(test));

これは当然保存できます。
ブラウザを見て普通に入っています。

で問題なのはそれを戻す際に

test = JSON.parse(sessionStorage.getItem('test'));

を実行すると当然ですが「test」はconstだとエラーが発生します。

で「test」をconstではなくてletで宣言すると普通にまるごとオブジェクトを戻せるんですが、Vue3の記述がどれを見ても今のところは必ずreactiveな変数は「const」で記述されているように見えました。

私のやったReactiveな変数をletで記載するのは出来るけどやめたほうが良いのか？

それともたまたま見た例がconstばかりだっただけで別に構わないのか？

ダメであればこういう際は通常どうするべきなのか？

行き当たりばったりでやってきたのでこれが大丈夫なのかダメなのか判断できなかったので質問させていただきます。

よろしくお願いいたします。

Answer 1

letで宣言しても問題ないのか
結論としてｈ「let」でも実装としては、問題ありません。
ただし、「const」での定義は定数を表すので、「test」に代入しようとしてもエラーが発生します。
これは、「const」定義時に代入された値が保証された形になります。

「let」で定義した場合は、「test」に代入がし放題ですので、「const」定義で初期化後に「test」に対して何らかの値が入力されてもそのまま動作します。

「test」が常に「reactive({})」のインスタンスであることが保証できるのであれば、「const」だろうと「let」(スコープに気を付ける)だろうとどちらでも問題ありません。

ですが、大事なのは、「test」が呼ばれる際に常に「reactive({})」が代入された状態が保証されていることです。
ですので、推奨は「const」による定義になります。

備考１.sessionStorageに登録する値について
「sessionStorage」に「reactive」のインスタンスを与えるのはあまりよくないと思います。
データ部のみを突っ込んだ方がよいかと思います。

備考2.vue2におけるreactive相当のapi
vue2におけるreactive相当のAPIは「observable」です。
ご掲示いただいたソースのものとは違います。
「reactive」や「observable」は基本的にstateストアを形成します。