LoginSignup
100
58

More than 5 years have passed since last update.

Vue.js 3.0の変更点

Last updated at Posted at 2018-09-30

はじめに

こちらがEvan Youさんが9月30日に書いた原文です。
https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf
この中から一般的な利用ユーザーにとっては把握しておかなければならない重要な変更点、破壊的かもしれない公開APIの変更点のみを抜粋します。
編集リクエストどんどん受け付けています!

TL;DR

render関数とスコープ付きslotの構文以外は、互換性ビルドを介して同じままにするか、2.x互換にすることができます。

Everything except render function API and scoped-slots syntax will either remain the same or can be made 2.x compatible via a compatibility build.

なるほど、全て移行できれば移行したいですが、もし難しい部分があればそれだけ2.xの時の互換性を持たせたまま3系を使うことができるんですね!なんて優しいんでしょう😊

前置き

新しいメジャーバージョンなので、いくつかの大きな変更があります。
しかし我々は下位互換性を真剣に受け止めているので、できるだけ早くこれらの変更を伝えます。
現在計画されている公開APIの変更点は次のとおりです。

Since it’s a new major, there is going to be some breaking changes. However, we take backwards compatibility seriously, so we want to start communicating these changes as soon as possible. Here’s the currently planned public API changes:

1. テンプレートの構文

テンプレートの構文は同じ99%のままです。
スコープ付きスロットのシンタックスには微妙な微調整があるかもしれませんが、それ以外にテンプレートの変更は計画されていません。

Template syntax will remain 99% the same. There may be small tweaks in scoped slots syntax, but other than that we have no plans to change anything else for templates.

2. #TypeScript対応 #babel変換を必要としない、ネイティブでclass-based componentsを対応

3.0は、babelのtranspilationやstage-x機能を必要とせずにネイティブES2015で快適に使用できるAPIを提供することを目的として、class-based componentsをネイティブにサポートします。
現在のほとんどのoptionsは、class-basedのAPIで妥当なマッピングを持ちます。
class fieldsやdecoratorsなどのstage-xの機能は、DXを向上させるためにオプションとして使用できます。
さらに、APIはTypeScript型推論を考慮して設計されています。
3.xのコードはTypeScriptで記述され、改良されたTypeScriptサポートを提供します。(つまり、アプリケーションでのTypeScriptの使用は完全にオプションです。)

3.0 will support class-based components natively, with the aim to provide an API that is pleasant to use in native ES2015 without requiring any transpilation or stage-x features. Most current options will have a reasonable mapping in the class-based API. Stage-x features such as class fields and decorators can still be used optionally to enhance the authoring experience. In addition, the API is designed with TypeScript type inference in mind. The 3.x codebase will itself be written in TypeScript, and providing improved TypeScript support. (That said, usage of TypeScript in an application is still entirely optional.)

3. 2.xオブジェクトベースのコンポーネントとの互換性

2.xオブジェクトベースのコンポーネントは、内部的にオブジェクトに対応するclassへ変換することによって引き続きサポートされます。z

The 2.x object-based component format will still be supported by internally transforming the object to a corresponding class.

4. Mixinは引き続きサポートされます

Mixinは引き続きサポートされます

Mixins will still be supported.*

5. トップレベルのAPIについて

これの翻訳難しかった。。。
Vuexとかを新たなVueインスタンスへinstallした場合、Vueの子コンポーネントとかが生成される際、その子インスタンスにだけ$storeを生やしてstoreのグローバル汚染とかを避けてます。
そのコードがVuexのinstall関数内に見受けられますが、その辺の事を言ってる気がします。

Top level APIs will likely receive an overhaul to avoid globally mutating the Vue runtime when installing plugins. Instead, plugins will be applied and scoped to a component tree. This will make it easier to test components that rely on specific plugins, and also make it possible to mount multiple Vue applications on the same page with different plugins, but using the same Vue runtime.*

6. 非同期コンポーネント

Functional componentsは最終的にはplain functionsになりますが、非同期コンポーネントはヘルパー機能を使って明示的に作成する必要があります。

Functional components can finally be plain functions —however, async components will now need to be explicitly created via a helper function.

7. jsx使わないでrender関数を書いてる人は要注意

ほとんどの変更を受け取る部分は、render関数で使用される仮想DOM形式です。
現在、主要なライブラリの製作者からのフィードバックを集めており、変更にもっと自信が持てるように詳細を共有しますが、アプリで手書きの(非JSX)render機能に大きく依存しない限り、 合理的に簡単なプロセスでなければなりません。

The part that will receive the most changes is the Virtual DOM format used in render functions. We are currently collecting feedback from major library authors and will be sharing more details as we are more confident of the changes, but as long as you don’t heavily rely on hand-written (non-JSX) render functions in your app, upgrading should be a reasonably straightforward process.

最後に

Vue.js3.0めっちゃ楽しみですね!
個人的にはclass-based componentが大好きで普段から使ってるので、ネイティブ対応はめっちゃ嬉しいです!
また、h関数を自分で書いてたりするのでその部分の対応は大変そうですね。
elementuiの内部コードもh関数を割と使ってたので結構大変そうな匂いがしてますが、リリースされたら頑張ってバージョンアップして新たなパワフルな機能達を使っていきたいですね!

100
58
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
100
58