vue3.0 結合 API の代替となる Mixins

vue3.0 結合 API の代替となる Mixins

vue3.0 結合 API のミックスインの代替 - ブリーフブック

従来の Vue2.0 ミックスインには次の欠点があります。

1. 属性名の重複により競合が発生し、ミックスイン内のデータが置き換えられ、予期しない問題が発生することがあります。
2. 再利用性が制限されており、ロジックを変更するためにミックスインにパラメーターを渡すことができないため、抽象ロジックの柔軟性が低下します。
3. データのソースを特定できない: ミックスイン内のデータが明示的にリストされていないため、コード内の多くのデータまたはメソッドのソースを特定できず、場合によってはコードが誤って削除されることもあります。

vue3.0 では、カスタム フックを使用してこれらの問題を解決します

従来のミックスインの表示:

export default {
  data () {
    return {
      msg: 1
    }
  },

  mounted () {
    this.testFn()
  },

  methods: {
    testFn () {
      console.log('testFn')
    }
  }
}

ミックスインを使用します。

<template>
  <div>{
   
   { aa }}</div>
</template>

<script>
import myMixins from './myMixins'
export default{
  mixins: [myMixins],
  mounted () {
    console.log('index mounted')
  }
}
</script>

カスタムフックの使用方法:

import { ref, onMounted } from 'vue'

export default function () {
  const aa = ref(1)

  function testFn () {
    console.log('testFn')
  }

  onMounted(() => {
    testFn()
  })

  return {
    aa
  }
}

<template>
  <div>{
   
   { aa }}</div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import myHooks from './myHooks'

export default defineComponent({
  setup () {
    const { aa, testFn } = myHooks()

    onMounted(() => {
      testFn('index mounted')
    })

    return {
      aa，
      testFn
    }
  }
})
</script>

カスタム フックを使用して導入したデータとメソッドはソースを直接参照でき、メソッドはパラメーターを渡すことができることがわかります。

オブジェクトではなく関数がエクスポートされるのはなぜですか?

1. オブジェクトとしてエクスポートするということは、カプセル化されたロジックがインポート時に実行されることを意味し、カプセル化するロジックは合成 API でラップされた特別なコードであるためです。これらのコードは通常セットアップでのみ使用できるため、1 つの関数をエクスポートする必要があります。コンポーネントのセットアップで関数を呼び出して、実行時間を指定できます。
2. 関数としてエクスポートするもう 1 つの目的は、パラメーターの受け渡しを容易にして、さまざまなコンポーネントが参照されるときに区別されたロジック処理を実行できるようにすることです。