setupメソッド

今まで別々に分かれていたdataやwatch、methodsが全てsetupに集約されます。

<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>

なぜこんなことに？

Vueの良さはわかりやすさにありました。ReactやAngularに比べてどこで何をするかが分かり易かったため、特に初学者に対して敷居が低く好まれてきました。
この劇的な変化は分かりやすさという点において後退が見られます。

しかしこのsetupメソッドに全てを集約する記述によって、カプセル化を行うことができるようになります。
例えば、マウスの位置を扱う処理は次のようにuseMouse()の中にカプセル化できるようになるのです。

function useMouse() {
  const x = value(0)
  const y = value(0)
  const update = e => {
    x.value = e.pageX
    y.value = e.pageY
  }
  onMounted(() => {
    window.addEventListener('mousemove', update)
  })
  onUnmounted(() => {
    window.removeEventListener('mousemove', update)
  })
  return { x, y }
}

// in consuming component
const Component = {
  setup() {
    const { x, y } = useMouse()
    return { x, y }
  },
  template: `<div>{{ x }} {{ y }}</div>`
}

これは従来の記述と比較するとそのカプセル化を理解できます。
マウスの位置を取得するための処理やデータが、data,mounted,methodsとバラバラになっていました。コンポーネントが肥大化した時にスパゲティコードになりがちになっていました。

<template>
    <div>
        {{ x }} {{ y }}
    </div>
</template>

<script>
export default {
  data() {
    return {
      x: 0,
      y: 0,
    };
  },
  mounted() {
    window.addEventListener('mousemove', this.update);
  },
  beforeDestroy() {
    window.removeEventListener('mousemove', this.update);
  },
  methods: {
    update(e) {
      this.x = e.pageX;
      this.y = e.pageY;
    },
  },
};
</script>

もっと

今までのVueはTypescriptの型推論を適切にサポートできていませんでした。しかし今回提案されたカプセル化によってVueにTypeScriptの恩恵が導入されます。
さらに、関数名と変数名は標準の最小化で短縮できるため（オブジェクト/クラスのメソッドとプロパティではできません）、コードはよりよく圧縮できるようになります。

最後に

今回のVueの変更の提案はかなりドラスティックで面白いと思いました。
SwiftUIでもそうでしたが、フロント側の技術はパラダイムシフトのように大きく変化するのでキャッチアップしていきたいです。
僕自身は今回のVueのこの変更の提案はすごく面白いと思いますし、さらなるVueの進化につながると思います。

参考 : https://dev.to/stefandorresteijn/vuejs-is-dead-long-live-vuejs-1g7f

Vue.jsバージョン3はこう変わるかもしれない

setupメソッド

なぜこんなことに？

もっと

最後に