[Vue.js]Vue3のcomposition-apiについてまとめてみた

##目的
めも

##Vue2まであった問題点

• TypeScriptとの相性が悪い
• コードが膨大になると同じデータが散在し、把握しづらい
• コンポーネント間でのロジック再利用が難しい
• 配列に変更を加える際の制約

→dataで定義したものが、methodsで使われたり、computedで使われたり散在することで、コードが膨大なときは変数を追うのが難しい場合があった。

##composition-apiの使い方

• methods,data...諸々全てsetup関数内に書く（＝別ファイルに切り出せる）
• ref,reactiveを使ってdataを定義する
• moutedもsetup関数内に書く（書き方がちょっと変わったくらい）

##①methods,data...諸々全てsetup関数内に書く

####ポイント

• setup関数の実行タイミングは、beforeCreateの前。（=インスタンス生成される前に実行される。thisは使えない。）
• template内で使いたい値をreturnで返す必要がある。

##②ref,reactiveを使ってdataを定義する

####ポイント

• reacitveはobjectしか取れない
• ref = プリミティブな値(Object(オブジェクト)ではない値)をリアクティブにしているもの
• reactive = Object(オブジェクト)をリアクティブにしているもの