JavaScript

Vue.js3.0で setup() なる関数が追加されるかも?

Vue.js 3.0 の開発状況を覗いてみよう!

こんにちは。ProgLearn編集部です。

近年様々なJavaScriptフレームワークが着目されていますが、中でもVue.jsが注目を集めていますね!

現在Vue.jsはバージョン2ですが、2018年11月にVue3.0の存在が発表されたのは記憶に新しいと思います。

じゃあ実際どんなところが変わるんだろう…とワクワクしている皆様に朗報です!

実はgithubのrfcsディレクトリを確認するとどんなリクエストが出ているのか、確認することができます!

RFCsとはRequest for commentsの略で、新しい機能のリクエストを管理している箇所なんですね。

https://github.com/vuejs/rfcs/tree/master/active-rfcs

ここと、プルリクエストを確認することで、現在どのような議論が進んでいるかを確認することができます!

今回は、pull requestのなかにある Function-based Component API を取り上げたいと思います。まだステータスはOpenなので議論中のテーマではありますが、コメントの多さから多くのエンジニアが注目している変更であると伺うことができます。

setup()関数の中にdataやmethodを記述する!

まずは、どのように記述が変わるのか、サンプルプログラムを見てみましょう。

<template>
  <div>
    <span>count is {{ count }}</span>
    <span>plusOne is {{ plusOne }}</span>
    <button @click="increment">count++</button>
  </div>
</template>

<script>
import { value, computed, watch, onMounted } from 'vue'

export default {
  setup() {
    // reactive state
    const count = value(0)
    // computed state
    const plusOne = computed(() => count.value + 1)
    // method
    const increment = () => { count.value++ }
    // watch
    watch(() => count.value * 2, val => {
      console.log(`count * 2 is ${val}`)
    })
    // lifecycle
    onMounted(() => {
      console.log(`mounted`)
    })
    // expose bindings on render context
    return {
      count,
      plusOne,
      increment
    }
  }
}
</script>

コメントがついているのでごちゃっとした印象を受けるかもしれませんが、コメントを外すとかなりスッキリしていることがわかると思います!

わかりやすいように、reactive state, computed state, method部分だけを抜き出して、Vue.js ver2時代の書き方と比較してみましょう。

ver3

export default {
  setup() {
    const count = value(0)
    const plusOne = computed(() => count.value + 1)
    const increment = () => { count.value++ }
  }
}

ver2

export default {
  data () {
    return {
      count:0
    }
  },
  computed: {
    plusOne () {
      return this.count + 1
    }
  },
  methods: {
    increment () {
      return this.count++
    }
  }
}

…確認のしやすさが一目瞭然ですね。

特筆すべきはsetup()関数です。これを使うことで関数ベースのAPIでVueのコンポーネント設定を記述できるようになっているわけですね。

また、今までは利用が禁止されていたアロー関数が解禁されているのも、setup()関数でラップしているからのようです!

互換性は残るよ!

「えーー!じゃあVue.js2の文法は使えなくなっちゃうの!?」とドキドキしているあなた。

落ち着いてHigh-Level Q&Aを確認してみましょう。

Is this like Python 3 / Angular 2 / Do I have to rewrite all my code?
No. The new API is 100% compatible with current syntax and purely additive.

Python2 to Python3 の悲劇は繰り返さないぜ!という 強い意気込みが伝わってきますね。

cf. https://qiita.com/cstoku/items/353fd4b0fd9ed17dc152

ということで、今vueでシステムを構築中の皆様、ひとまず安心して良さそうです!

技術の移り変わりは激しいです。まだリリース前なので、今回ご紹介したsetup()の仕様も現在の状態から変わるかもしれませんし、そもそも使われないかもしれません。

ということで、常に最新情報をキャッチアップしていくようにしましょう!