Vue3でscript setupをつかったComposition APIまとめ

Vue3.2以上でscript setupをつかったComposition APIの情報がなかなか少なかったので分かってることをまとめてみた。

ちなみに、だいぶ書きやすくなって使いやすい。可読性もバツグン。

Composition APIをつかう準備

ViteをつかってVueの環境をつくっていこう。

ちなみにVue CLIよりViteをつかったほうが早いからつかっているが、Vue CLIでもVue3.2以上にupdateすればOK。

// npm 7以上、ViteでVueを構築する場合
> npm init vite@latest something-app-name -- --template vue

Scaffolding project in D:\development\something-app-name...

Done. Now run:

  cd something-app-name
  npm install
  npm run dev

> cd something-app-name
something-app-name > npm i

added 32 packages, and audited 33 packages in 12s

4 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

something-app-name > npm run dev

  vite v2.7.13 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 663ms

インストールが完了したらhttp://localhost:3000/へアクセスしてHelloWorldが表示されるか確認しておくこと。

hello world vite

コンポーネントのscriptには必ずsetupを書いておく。これで準備完了。

<script setup>
</script>

作成したコンポーネントを他のコンポーネントでつかうには

importするだけ。components: {}とか書かなくていい。

// AppButton.vue
import BaseButton from './components/BaseButton.vue'

templateで今まで通り読み込めばコンポーネントが反映される。

<!-- AppButton.vue -->

methodsは"通常の関数"に

methods: {}はJavaScriptでつかってる関数または関数式でOK

function someExample() {
  // Something process
}
const someExample = () => {
  // Something process
}

propsは"defineProps"に

props: {}はdefinePropsに変更。なにかimportする必要もなくシンプル。

// BaseExample.vue
defineProps({
  message: String
})
<!-- AppExample.vue -->
<template>
  <ExampleComponent message="some message" />
</template>

dataは"ref" or "reactive"に

data() {}はref, reactiveに変更。refとreactiveに明確なつかい分けはないが、refは単体でつかうもの。reactiveは複数オブジェクトがあるとき。でつかい分けている。

ref, reactiveどちらとも、()内に入っているデータから型を識別してくれる。

// AppUserCount.vue
import { reactive, ref } from '@vue/reactivity'

const count = ref(0)
const user = reactive({
  name: "saito",
  age: 22,
  birthday: "1999-01-01"
})
<!-- AppUserCount.vue -->

$emitは"defineEmits"に

$emitはdefineEmitsに変わる。defineEmitsにカスタムイベントを配列として格納。

// BaseButton.vue
const emit = defineEmits(["increment", "decrement"])

const emitをイベントに持っていき、それぞれのイベント名を書いていく。

<!-- BaseButton.vue -->
<template>
  
  
</template>

下記のようにApp側にカスタムイベントを挿入すればOK。

// AppClickButton.vue
import { ref } from '@vue/reactivity'
import BaseButton from './components/BaseButton.vue'

const count = ref(0)

const increment = () => count.value++
const decrement = () => count.value--
<!-- AppClickButton.vue -->

mountedは"onMounted"に

mounted() {}からonMounted()に変更。上記はaxiosをつかってJSONPlaceholderというサイトからデータを取得してマウントさせている。

import { onMounted } from '@vue/runtime-core'
import { ref } from '@vue/reactivity'
import axios from 'axios'

const results = ref([])

onMounted(() => {
  axios.get('https://jsonplaceholder.typicode.com/users')
    .then(response => results.value = response.data)
    .catch(error => console.log(error))
})

まとめ: script setupをつかってみよう。

今までのVueでの書きかたとはだいぶ違う部分もあるが、正直今回紹介した書きかたのほうがいいのは分かってもらえたかと。

script setupのおかげで今までよりシンプルに書けるようになった。開発がだいぶラクになるだろう。ぜひ使ってみてほしい。

現時点で自分が分かっていることは以上だが、新しいことが分かり次第追記していく。

事務作業を自動化してもっと"ラク"しませんか?

あなたの会社の事務作業...効率化してラクに。もっと重要な業務に集中できるようになります。

日々増えるルーティンの事務作業...
「この作業めんどくさい...」
「事務作業に時間をとられて他に集中できない...」

あなたの代わりにVBAを使ってパソコン業務を自動化。あなたはもっと価値のあることに時間を使うことができるため売上UP、ムダなコストの削減が期待できます。

また、作って終わりではなくつぎの3つのことを約束します。

  • しっかりドキュメント作成
  • きれいな見やすいコードでムダな工数カット
  • できるだけボタン1つポチッと押すだけで業務が完了

どんなにささいなめんどくさい事務作業でも相談してください。相談は無料です。
3年の業務効率化実績があるため、力になれるかもしれません。

※件名には「業務効率化の相談」と記載ください。できるだけ24時間以内に返信します。