Vue.js勉強記録その23 Vue3を更にパワーアップしよう 5-1 ver2

Vue.js3超入門

こちらの書籍でvue.jsの勉強をしています。
内容をログの代わりに書いています。

今回は、Composition APIのメソッドについてと、setupに渡される引数である、contextについてと、Composition APIについてのまとめです。

■Composition APIを使おう

・メソッドの使い方

従来の記述でコンポーネントを書いた時の、methodsは使わず、setup内で変数に関数を代入する形で使う。

HelloWorld.vue

<template>
 <div class="alert alert-primary">
   <h1>{{ title }}</h1>
   <p>{{ data.msg }}</p>
   <div>
     <input type="number" v-model="data.num" min="0" class="form-control" />
   </div>
   <button class="btn btn-primary m-3" v-on:click="action">Click</button>
 </div>
</template>

<script>
import { ref, reactive } from "vue";
export default {
 props: {
   title: String,
 },
 setup(props) {
   const data = reactive({
     msg: "This is reactive-value!",
     num: 0,
   });
   const action = () => {
     let total = 0;
     for (let i = 0; i <= data.num; i++) {
       total += i;
     }
     data.msg = "total: " + total;
   };
   return {
     data,
     action,
   };
 },
};
</script>

setupの中に、以下の記述がある。

 const action = () => {
    let total = 0;
    for (let i = 0; i <= data.num; i++) {
      total += i;
    }
    data.msg = "total: " + total;
};

この部分で、変数action（constなので定数）にアロー関数の形で関数を入れている。

関数の内容は、data.numの数まで足し算した結果を、data.msgに入れている。

data.numとdata.msgは、同じくsetup内の、

const data = reactive({
    msg: "This is reactive-value!",
    num: 0,
});

この記述で定義されている。

ボタンを押すと、actionメソッドが走る様になっている。

data.numは、v-model="data.num"でinputと紐づいている。

ブラウザで見るとこんな感じ。画像の例の場合、10までの数を0から足して、結果が55と表示されている。

・setupのcontextについて

propsと同様に、setupにはcontextという引数も渡されている。

contextは、コンポーネントに関する情報をオブジェクトで持っている。

以下が一例。

attrs・・・・コンポーネントタグに用意された属性をまとめたもの
slots・・・・コンポーネント内に含まれるスロットをまとめたもの
emit・・・・emitされた内容をまとめたもの

例えば、attrsを使えば、propsで設定していない属性値を子コンポーネント側で取得できる。

HelloWorld.vue

<template>
 <div class="alert alert-primary">
   <h1>{{ title }}</h1>
   <p class="mt-3 h5">{{ data.msg }}</p>
 </div>
</template>

<script>
import { ref, reactive } from "vue";
export default {
 props: {
   title: String,
 },
 setup(props, context) {
   const data = reactive({
     msg: "This is reactive-value!",
   });
   data.msg = context.attrs["msg"].toUpperCase();
   return {
     data,
   };
 },
};
</script>

propsでは、titleしか定義していないが、
data.msg = context.attrs["msg"].toUpperCase();
この記述で、msgを取得しようとしている。

App.vue

<template>
 <HelloWorld title="Composition API" msg="This is Composition API sample." />
</template>

親側で、msgに属性値を入れると、

普通に表示される。

こちらの方法は、筆者の方はあまりお勧めではないらしいw
同じことをやるなら素直にpropsを使った方がわかりやすいとの事。確かに、必要な（設定できる）属性が、propsを見れば一目で判る状態の方がコードが読みやすいですね。

■Composition APIのまとめ

vue3になり、Composition APIを使ったコンポーネントの作成ができる様になった。

なぜCompositon APIで書ける様にしたかというと、従来の方法だと、複雑なコンポーネントになると、色々な情報が雑多に散らばってしまうから。

なので、propsとsetupしかないシンプルな記述であるComposition APIが生まれた。

ちなみに、Composition APIは、従来の書き方とある程度の互換性があり、methodsやcomputedも同時に書くことができる。

export default{
  props:{内容},
  setup(props,context){内容},
  computed:{内容},
  methods:{内容}
}

こんな感じにpropsとsetupの続きに、computedやmethodsが書ける。

なので、少しずつ従来の書き方からComposition APIに移行するのがお勧めとの事。

■（この記事の）まとめ

今回は、Composition APIでメソッドを使う方法と、setupに渡されるcontextについてでした。

また、CompositionAPIに関するまとめもありました。

基本的には、従来の方法よりはComposition APIの方がシンプルに書けるからお勧めとの事だが、僕はvue3から勉強を始めているので、従来の方法の問題点がなかなかピンとこないですねw
まぁ今回みたいに、ある技術を途中から学ぶと、あるあるの疑問点ですね。ひとまず、筆者の言うことを信じて、なるべくComposition APIで、無理なら従来の方法で書いてみようと思います。