Vue.js3.0で setup() なる関数が追加されるかも？｜ProgLearn｜エンジニアのためのプログラミング情報メディア

Vue.js 3.0 の開発状況を覗いてみよう！
setup()関数の中にdataやmethodを記述する！
- ver3
- ver2
互換性は残るよ！

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()関数でラップしているからのようです！