Vue3 Computedref

Posted on  by admin

先日、日本時間の2020年7月18日にVue 3.0のRelease Candidate(v3.0.0-rc.1)がリリースされ、今後は最終リリースまで主要なAPIのbreaking changeは想定していないとのアナウンスがされました。アナウンスを受け、現在社内ツールで進めているOptions APIからComposition APIへの移行で得られたTipsについて紹介します。.

この記事では公開時点でのVue 3.0 betaへのアップグレードの方法と、Vue + TypeScriptでのOptions APIからComposition APIへの移行のTipsについてまとめました。Vue 3.0へのアップグレードを検討されている方、またはComposition API単体での導入を検討されている方の参考になりましたら幸いです。なお、あくまで公開時点での情報であるため、今後は更新される可能性があることをご留意ください。.

Vue CLIによるVue 3.0 betaへのアップグレード方法. Vue 3.0 へアップグレード可能かどうかの判断.

Options APIからComposition APIへの書き換えComposition Function. Composition Function. 初めにVue CLI(v4.5.3)で利用可能(または提供予定)なVue 3.0 betaへのアップグレードの方法を紹介します。npmかyarnで[email protected]をインストールすることもできますが、Vue 3.0 betaを試すためのプラグインをインストールする方法もあります。.

このプラグインではVue本体だけでなく、Vuex, Vue Routerもアップグレードされます。また、コードが自動で書き換えられ、src/main.ts, src/store/index.ts, src/router/index.tsがそれぞれのbetaのAPIに書き換えられます。以下はサンプルコードのdiffです。.

このように一括でのアップグレードとコードの自動変換を行ってくれますが、あくまでトライアウト用のプラグインのようです。issueのコメントによるとVue CLIのvue createコマンドでVue 3を選択可能になった現在はこのプラグインが不要になるとのことでした。開発も最終コミットが5月でそれ以降は中断されているようで、このプラグインの最新バージョンのv0.1.3ではVue 3.0 betaのバージョンが最新ではないことに注意してください。.

Where should I start in a migration?Start by running the migration helper (still under development) on a current project. 以上の方法でVue 3.0 betaやパッケージのアップグレードの一部を簡略化できます。最終リリース以降には開発中のマイグレーションヘルパーを含めて、より便利なアップグレード方法が提供されることを期待したいですね。.

前述のようにアップグレードのサポートは提供されているとはいえ、Vue 3.0へのアップグレードはGlobal APIの書き換えが必要なため、影響範囲はプロダクト全体に及びます。当然のことながら、アップグレード後のプロダクトの正常な挙動を担保しなければなりませんが、中〜大規模であった場合にQAのリソースの確保が難しくなることも予想されます。.

以下の観点をクリアできている場合には、Vue 3.0へのアップグレードも可能でしょう。. Vue 3.0に未対応のパッケージを利用していない. 一方でVue 3.0へのアップグレードが困難ではあるものの、Vue 3.0 betaの新APIを採用したい場合はComposition APIをプラグインとしてその一部をコンポーネント単位で利用することもできます。ここからは冒頭で触れた社内ツールの開発において進めているComposition APIへの移行について紹介します。.

社内ツールでComposition APIを採用した一方で、Vue 3.0 betaへのアップグレードは一旦断念することになりました。理由としては利用しているVuetifyがVue 3.0に未対応だったためです。なお、VuetifyのRoadmapでは2020 Q3/Q4での対応を予定しているとのことです。.

Composition APIのメリットはいくつかありますが、特に採用の決め手となったのはロジックの関心ごとにコードをまとめやすくなることでした。.

v2.xのOptions APIの課題は、コードがコンポーネントのthisに依存するため関心ごとの単位でまとめることが難しく、Options APIのoptions(data, computed, methodsなど。以下: v2 options)にコードが分散しがちであることでした。.

そんな状況でComposition APIのRFCを読み、実装を試してみたところ手応えがあったため、この課題を解消すべく採用を決めました。. ここからはサンプルコードを交えて、コンポーネントをOptions APIからComposition APIに書き換えていく際のTipsについて紹介します。.

Composition APIへの移行で念頭に置いておきたいことはOptions APIと併用可能という点です。. 併用した場合の処理の順番はComposition APIのsetupが先に呼ばれ、そのあとv2 optionsが解決されます。setup内ではthisはundefinedでなおかつv2 optionsの前に呼ばれるため、setup内からv2 optionsのプロパティにはアクセスできません。逆にsetupでreturnしたプロパティはv2 optionsからアクセスできます。したがって、移行の流れとしてはコンポーネント内で他の実装に依存していないものからsetup内に移していくとよさそうです。.

Vue.extend -> defineComponent. data -> reactive. methods -> Functions.

  • v2.x computed -> v3.0 computed. emit -> context.emit. props -> setup(props). Composition Function. サンプルコードは去年のアドベントカレンダーで書いた記事のリポジトリを元にOptions APIで実装し直したものです。.
  • Options APIでTypeScriptの型推論のために Vue.extend が必要だったのと同様、Composition APIでもdefineComponentが必要になります。. 空のsetupを定義してv2 optionsの挙動を確認した後、順次このsetupにコードを移していきます。. returnでは..toRefs(state)のように書くのがオススメです。stateをそのままreturnすることもできますが、その場合はtemplateやv2 optionsでstate.xxxのように書き換える必要があります。.
  • また、toRefsに渡さずspread operatorで展開する場合はstateがリアクティブではなくなってしまうため、この場合はtoRefsが必須です。. Composition APIのcomputedはgetter関数を引数にとり、computedプロパティを返します。.
  • Composition API. 今回はシンプルなアプリのため、ここまでの変更でv2 optionsはすべてsetup内に書き換えられました。. propsの定義は上の例のようにOptions APIの時と変わらず、setupの第1引数として受け取ることができます。setupの引数に型を指定せずともpropsの型推論が効きます。.
  • ここまでの説明でコンポーネント内の主要なAPIの書き換えの流れはおおよそ掴むことができるかと思います。最後にComposition APIによって実装可能なComposition Functionを実装する際のTipsを紹介します。. Composition Functionとは、関連するロジックでまとめられ、カプセル化された関数のことです。Composition APIによってthisへの依存がなくなり、コードは関心ごとでまとめられるようになりました。まとめられた関数は純粋なJavaScript or TypeScriptの関数として抽出し、他のコンポーネントで再利用しやすくなります。.
  • Notice how all the logic related to the create new folder feature is now collocated and encapsulated in a single function.
  • The function is also somewhat self-documenting due to its descriptive name. This is what we call a composition function. を関数でラップ(あるいはカリー化)しておくと、Composition Functionが作りやすくなり、関数合成がしやすくなるというメリットがあります。. 先ほどのcomputedの例に戻って関数化していない例をもう一度見てください。setup内であれば関数化しない実装も可能ですが、その場合は他の実装に依存します。例のcomputedをComposition Function化する場合は、state.tasksやsearchedTasksへの依存を関数化した時と同じように引数への変更が必要です。その点、関数化しておくと変更が少なくて済みます。.

以下がComposition Functionとして抽出した例です。.

  • 逆に関数化をしない方がパッと見ではシンプルでわかりやすいというメリットがあるため、Composition Function化の可能性が低い場合は2番目のような実装に留めておくのがよさそうです。.
  • Composition Functionや関数化された関数で実装する時に、リアクティブな引数を受け取る場合の型定義はどうすべきか疑問に浮かぶかもしれません。. 引数次第では推論でRefやComputedRefなどになる可能性があり、一見すると使い分けるか、もしくはいずれかで統一するといった選択の余地がありそうに見えます。 結論としてはRefで統一すればよさそうですが、理解を深めるために型定義を確認してみましょう。.
  • などでリアクティブ化されたオブジェクトで、 . Vue 3.0 betaへのアップグレード方法の紹介と、社内ツール開発でのComposition APIへの移行について紹介しました。Composition APIでの実装で最近よく考えることは、コードの再編の自由度が上がった分、コードをまとめる境界をどのように見つけるのがよいかという点です。Composition Functionへの分割をパターン化できるとより開発をスムーズに進められそうです。その点を踏まえて、引き続きVue 3.0と周辺パッケージのキャッチアップと移行を進めていきたいと思います。.
  • 在 Vue3 新推出的响应式 API 中,Ref 系列毫无疑问是使用频率最高的 api 之一,而 computed 计算属性是一个在上一个版本中就非常熟悉的选项了,但是在 Vue3 中也提供了独立的 api 方便我们直接创建计算值。而今天这篇文章,笔者就会给大家讲解 ref 与 computed 的实现原理,让我们一起开始本章的学习吧。.
  • 当我们有一个独立的原始值,例如一个字符串,我们想让它变成响应式的时候可以通过创建一个对象,将这个字符串以键值对的形式放入对象中,然后传递给 reactive。而 Vue 为我们提供了一个更容易的方式,通过 ref 来完成。.
  • ref 会返回一个可变的响应式对象,该对象作为一个响应式的引用维护着它内部的值,这就是 ref 名称的来源。该对象只包含一个名为 value 的 property。.
  • 而 ref 究竟是如何实现的呢?. ref 的源码位置在 @vue/reactivity 的库内,路径是 packages/reactivity/src/ref.ts ,接下来我们就一起来看 ref 的实现。.

从 ref api 的函数签名中,可以看到 ref 函数接收一个任意类型的值作为它的 value 参数,并返回一个 Ref 类型的值。. 从返回值 Ref 的类型定义中看出,ref 的返回值中有一个 value 属性,以及有一个私有的 symbol key,还有一个标识是否为 shallowRef 的_shallow 布尔类型的属性。.