vue3のreactive()はcomposition APIでしか使えませんか？

Question

オブジェクトの値の変更をwatchするためにreactive関数が使いたく、以下のコードを書いてみたのですが、エラーが出ます。

公式ページにはcomposition API専用というようなことが書いてありませんが、調べるとcomposition APIの機能のような書き方をしているサイトもあります...。素のvueでは使えないんでしょうか？

let test = reactive({
    count: 0
  })

Uncaught ReferenceError: reactive is not defined

Answer 1

reactive関数はあくまでcompositionAPIで変数を格納するための関数です。なので、Vue3でcompotisionAPI使用でない場合は用いることができなかったはず。

リアクティブの基礎

素直に、Vue2以下で値の変更にかかわらず値の監視を行いたいだけなら監視プロパティを用いるといいです。

watch:{
  hoge:function(){

  }
}

また、監視条件が変数の値の変更のみに限るならば算出プロパティでもいいでしょう。

もし、TypeScriptなどを使っていてステータス変更を感知したい場合は、Vue.observableというものもあります。公式サイトによると、これが一応、reactive関数に近いようです。

Vue.observable & TypeScriptで手早く安心できる状態管理を手に入れる

Comments

[Sonono]

お礼が遅くなりすみません。やはりcompositionAPIでしか使えないのですね、ありがとうございます。深さのあるオブジェクトを監視したかったのでreactiveなオブジェクトにして監視するのが一番スマートかなと思ったのですが、別の方法で実現できました。ありがとうございました！