<h1>はじめに</h1>
Vue CLI (ver4.5.3)から利用可能な Vue 3.0 beta でいろいろな変更点があったようなので個人用にまとめ。
まとめにあたって参考にした記事
<ul>
<li><a href="https://qiita.com/ryo2132/items/f055679e9974dbc3f977">先取り Vue 3.x !! Composition API を試してみる</a></li>
<li><a href="https://qiita.com/ryo2132/items/3d0379e85c38a9a5b355">正式リリース前に総予習!! Vue3 の変更点まとめ</a></li>
<li><a href="https://qiita.com/hoto17296/items/42e62989193504d512c7">[CSS] z-index とスタックコンテキスト</a></li>
<li><a href="https://uit-inside.linecorp.com/episode/51">Vue3 Study Teleport でキレイに解消するモーダルの z-index 問題</a></li>
</ul>
<h2>Options API から Composition API へ</h2>
<code>Composition API</code>は従来の<code>Options API</code>から移行することで、ロジックの柔軟な構成を可能にする関数ベースの API だそうな。(以下公式原文)
<blockquote>
Introducing the Composition API: a set of additive, function-based APIs that allow flexible composition of component logic
</blockquote>
Vue2 での<code>methods</code>, <code>data</code>等々は<code>defineComponent</code>内オブジェクトの<code>setup()</code>関数で宣言。
<pre><code>import { defineComponent } from '@vue/composition-api';

export default defineComponent({
 setup() {
 // Describe here your data, func, etc.
 },
});
</code></pre>
<code>defineComponent</code>でコンポーネントを作ることによって型推論が効くそう。
<code>Vue3</code> から <code>TypeScript</code> に互換性が出てきたらしい。
従来の<code>data</code>に対応するリアクティブな値は、<code>setup()</code>内で以下の 2 パターンで宣言。
<ol>
<li><code>ref()</code></li>
<li><code>reactive()</code></li>
</ol>
この 2 パターンの違いは<a href="https://vue-composition-api-rfc.netlify.app/#ref-vs-reactive">こちら</a>を参照。
<pre><code>import { defineComponent, reactive, ref } from '@vue/composition-api';

export default defineComponent({
 setup() {
 const state = reactive({
 hoge: 'hogehoge',
 });
 const fuga = ref('fugafuga');

 return {
 state,
 fuga,
 };
 },
});
</code></pre>
<pre><code>&#x3C;div>
 &#x3C;h2>{{ state.hoge }}&#x3C;/h2>
 &#x3C;h2>{{ fuga }}&#x3C;/h2>
&#x3C;/div>
</code></pre>
<code>props</code>は<code>defineComponent</code>内の<code>props</code>プロパティとして宣言。
以下は型推論のために type を定義してアノテーションをつけた例。
<pre><code>type Props = {
 message: string;
};

export default defineComponent({
 props: {
 message: {
 type: String,
 default: 'Default',
 },
 },
 setup(props: Props) {
 props.message;
 },
});
</code></pre>
<code>emit</code>は<code>setup()</code>の第二引数に渡す<code>context</code>のメソッドとして使用。
以下に<code>props</code>と<code>emit</code>を使ったサンプルを記述。
<ul>
<li>ChildComponent</li>
</ul>
<pre><code>import { defineComponent, SetupContext } from '@vue/composition-api';

type Props = {
 count: number;
};

export default defineComponent({
 props: {
 count: {
 type: Number,
 default: 0,
 },
 },
 setup(props: Props, context: SetupContext) {

 const increment = () => {
 context.emit('change-count', props.count++);
 }

 return {
 increment
 };
 };,
});
</code></pre>
<pre><code>&#x3C;div>
 &#x3C;button @click="increment">+&#x3C;/button>
&#x3C;/div>
</code></pre>
<ul>
<li>ParentComponent</li>
</ul>
<pre><code>import ChildComponent from '@/components/ChildComponent'; // @ is an alias to /src
import { defineComponent, computed, reactive } from '@vue/composition-api';

export default defineComponent({
 components: {
 ChildComponent,
 },
 setup() {
 const state = reactive({
 count: 0,
 });

 const changeCount = (count: number) => {
 state.count = count;
 };

 const multipleCount = computed(() => state.count * 1000);

 return {
 state,
 changeCount,
 multipleCount,
 };
 },
});
</code></pre>
<pre><code>&#x3C;div>
 &#x3C;h1>{{ state.count }}&#x3C;/h1>
 &#x3C;h1>1000倍したら{{ multipleCount }}&#x3C;/h1>
 &#x3C;ChildComponent :count="state.count" @change-count="changeCount">&#x3C;/ChildComponent>
&#x3C;/div>
</code></pre>
ライフサイクル系は<code>setup()</code>内で設定可能。
<pre><code>import { onMounted, onUpdated, onUnmounted } from 'vue';

setup() {
 onMounted(() => {
 console.log('mounted!');
 });
 onUpdated(() => {
 console.log('updated!');
 });
 onUnmounted(() => {
 console.log('unmounted!');
 });
}
</code></pre>
<h2>Teleport ( Portal Vue ) の追加</h2>
<blockquote>
A Portal Component for Vuejs, to render DOM outside of a component, anywhere in the document.
</blockquote>
定義したコンポーネント外のどこからでも別の DOM ツリー上に自身のコンポーネントを描画でき、あたかもテレポートしたように振舞う機能。
React の<code>CreatePortal</code>の<code>Vue.js</code>版。
主な使い方は以下。
<pre><code>&#x3C;template>
 &#x3C;div>
 &#x3C;teleport to="#teleport-target">
 &#x3C;div v-if="isVisible">content&#x3C;/div>
 &#x3C;/teleport>
 &#x3C;/div>
 &#x3C;template>&#x3C;/template>
&#x3C;/template>
</code></pre>
通常<code>Vue.js</code>は<code>#app</code>にマウントされ、その DOM ツリーを出ることはないのですが、
<code>teleport</code>を介してツリー構造を無視したレンダリングが可能になる。
<pre><code>&#x3C;body>
 &#x3C;div id="app">&#x3C;/div>
 &#x3C;div id="teleport-target">&#x3C;/div>
&#x3C;/body>
</code></pre>
主にモーダル等に使う機会がありそうで、<code>z-index</code>と<code>スタックコンテスト</code>で煩雑になりがちなコードをよしなにしてくれそう。
<h2>Class 型 Component</h2>
Vue2.X.X からは TypeScript を使用する際に書き方が複数あるようで、別モジュールを使用してクラスとして管理する方法もあるそう。
Function Component 以前の React みたい。
<code>vue-class-component</code> , <code>vue-property-decolator</code> を利用してクラス単位でコンポーネント管理ができる。
Vue3 の<code>Composition API</code>とどう使い分けるべきか。
<ul>
<li>Vue2</li>
</ul>
<pre><code>import Vue from 'vue';

export default Vue.extend({
 name: 'HelloWorld',
 props: {
 msg: {
 type: String,
 },
 },
 methods: {
 sayHello(): string {
 return 'Hello!';
 },
 },
});
</code></pre>
<ul>
<li>Class 型 Component</li>
</ul>
<pre><code>import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
 @Prop()
 private msg!: string;

 sayHello(): string {
 return 'Hello!';
 }
}
</code></pre>
型推論を行うなら<code>Vue.extend</code>の書き方でも問題無さそうだし、<code>Composition API</code>でも大丈夫そう。