VUE 3組成APIと新機能

VUE 3の組合せ0とtypescriptは、より多くのトレンドを取得している、どのようにそれらを使用して単一のファイルコンポーネントを構築し、どのように動作を理解チェックしましょう.

組成API

vue 3で最も重要な変化の一つ.0はComposition API ,VUE 30は、Options API , しかし、Composition API あなたにコード共有のためにより多くの力を与えます.
あなたは組成APIについての詳細なシートを見つけることができますhere
cheetsheetを実行すると、構成APIの基本的な理解が得られます.

置換

コンポーネント間の共有コードの共有

組成APIは、ミックスを取り除くために、vue 2でmixinを使用します.0は以下のようになります:

import Mixin from "./Mixin.js";


export default {
  mixins: [Mixin],
  data: () => ({
    data1: null
  }),
  methods: {
    method1 () { ... }
  }
}

年に戻ってダンABLAMOVの記事を書いたと呼ばれる Mixins Considered Harmful , 彼が言及した危害は、基本的にMixinを使用することは反パターンで、それを推薦しないでしょう.同じ欠点は、反応とVUEにも当てはまります.

命名衝突

ミックスで使用される名前は、それを使用するファイルの中の1つと対峙することができます

暗黙の依存

Mixinsは、ファイル内のメソッドやプロパティを使用することもできます.特に、リファクタリングコード開発者が混雑の詳細を省略し、混乱を引き起こす場合があります

構成APIでは、オブジェクトの機能(状態、メソッド、計算など)をオブジェクトプロパティとして定義するのではなく、新しい関数から返されるJS変数として定義しますsetup 機能

// define reactive variable that functions pretty much the same as a data variable 
import {ref, computed } from "vue";

export default {
  setup(){
    const count = ref(0);
    const double = computed(() => count.value * 2)
    function increment(){
      count.value++;
    }
    return {
      count,
      double,
      increment
    }
}

一方、我々は確かに単一のファイルに共通のロジックを抽出することができます

// useCounter.js
import { ref, computed } from "vue";


export default function () {
  const count = ref(0);
  const double = computed(() => count.value * 2)
  function increment() {
    count.value++;
  }
  return {
    count,
    double,
    increment
  }
}

そして、コードはそれを輸入することによって、他のコンポーネントで再利用されることができます.

// MyComponent.js
import useCounter from "./useCounter.js";

export default {
  setup() {
    const { count, double, increment } = useCounter();
    return {
      count,
      double,
      increment
    }
  }
}

ここでは、明示的にインポートすることで論理から状態やメソッドを使う必要がありますnaming collision 問題