来るべきVue3.0に備える

v-sendai #2での発表内容です

自己紹介

tanshio(@_tanshio)

フロントエンドエンジニア、ウェブデザイナー
好きなものはVue・Nuxt、TypeScript、WebGLです
いま挑戦中のものはRustです
VTuberが好きです

---

基本的には、https://github.com/vuejs/rfcs に書いている情報になります。

---

Class APIの破棄

クラスベースのAPIが提案されていましたが、破棄されました。

---

<template>
  <div @click="increment">
    {{ count }} {{ plusOne }}
    <Foo />
  </div>
</template>

<script>
import Vue from 'vue'
import Foo from './Foo.vue'

export default class App extends Vue {
  static components = {
    Foo
  }

  count = 0

  created() {
    console.log(this.count)
  }

  get plusOne() {
    return this.count + 1
  }

  increment() {
    this.count++
  }
}
</script>

僕的にはシンプルかつ継承などもしやすいので残念。
rfcsのVuexがこれベースっぽかったので今後注目。

---

Function-based Component API

---

import {
  value,
  computed,
  watch,
  onMounted,
  inject
} from 'vue'

const App = {
  // same as before
  props: {
    a: String,
    b: Number
  },

  // same as before
  components: {
    // ...
  },

  setup(props) {
    // data
    const count = value(1)

    // computed
    const plusOne = computed(() => count.value + 1)

    // methods
    function inc() {
      count.value++
    }

    // watch
    watch(() => props.b + count.value, val => {
      console.log('changed: ', val)
    })

    // lifecycle
    onMounted(() => {
      console.log('mounted!')
    })

    // dependency injection
    const injected = inject(SomeSymbol)

    // other options like el, extends and mixins are no longer necessary

    // expose bindings on render context
    // any value containers will be unwrapped when exposed
    // any non-containers will be exposed as-is, including functions
    return {
      count,
      plusOne,
      inc,
      injected
    }
  },

  // template: `same as before`,

  render({ state, props, slots }) {
    // `this` points to the render context and works same as before (exposes everything)
    // `state` exposes bindings returned from `setup()` (with value wrappers unwrapped)
  }
}

---

React Hooksのようなイメージ。

---

今からでも使える
https://github.com/vuejs/vue-function-api

---

• setup
• value
  • プリミティブ型で使う
• state
  • 配列やオブジェクトなど。(Vue.observable)
• computed
• watch

---

ポータルが来る

body直下などにVueコンポーネントがおけるようになる

• モーダル・トーストの管理が非常に楽になる

z-indexでの管理が楽になる

---

Nuxtはどうなる？

VueFes 2018の質疑応答の限りでは、Vue 3.0がリリースされ次第早めに対応したNuxtもリリースしたいとのこと。

---

準備しておく

---

非推奨、動作が変わるものを見直す

• slot
  • slot-scopeが非推奨に
  • v-slotを使う
• Vue.observable
  • 参照ではなくなるので、使っている場合は注意

---

バージョンアップはきついか？

V1→V2がそこまでつらくなかったので大丈夫だと思いたい

TypeScriptをやろう

Vue 3.0ではTypeScriptが全面的にサポートされる(はず)なので、今のうちにTypeScriptに慣れておこう。
コンポーネントのpropsがエディタ上で補完出るようになってほしい…(Reactではできるので)

まとめ

• Function-based Component APIがくるぞ！
• TypeScriptをやろう

---

ありがとうございました