Vue3 mixins プロパティ

Vue3 选项式 API Vue3 オプション API

Vue.js では、mixinsは、Vue コンポーネントで再利用可能な機能を配布するための柔軟な方法です。これにより、mixins複数のコンポーネントで共有されるオプション、ロジック、またはライフサイクルフックをカプセル化し、必要なコンポーネントにこれらの機能を混入することができます。

Vue 3 では、mixinsは依然として非常に有用なツールですが、Composition API がより柔軟な機能再利用の方法を提供しているにもかかわらず、mixins一部のシナリオでは、依然としてシンプルで効果的な選択肢です。

mixins の使い方は？

1. mixin を作成する

まず、mixinオブジェクトを作成する必要があります。このオブジェクトには、data、methods、computed、watchライフサイクルフックなどのオプションを含めることができます。

例

// myMixin.js
export const myMixin = {
data() {
return {
mixinData: 'This data is from mixin'
};
},
methods: {
mixinMethod() {
console.log('This method is from mixin');
}
},
mounted() {
console.log('Mounted hook from mixin');
}
};

2. コンポーネントで mixin を使用する

次に、コンポーネントでmixinsmixins オプションを介してこのmixin。

例

<template>
<div>
<p>{{ mixinData }}</p>
<button @click="mixinMethod">Click me</button>
</div>
</template>

<script>
import { myMixin } from './myMixin';

export default {
mixins: [myMixin]
};
</script>

この例では、myMixinのdata、methodsとmountedフックはすべてコンポーネントに混入されます。

mixins のマージ規則

1. data のマージ

もしmixinとコンポーネントの両方にdata関数がある場合、Vue は2つのdata関数の戻り値をObject.assignマージします。プロパティ名が衝突した場合、コンポーネントのdataが上書きしますmixinのdata。

例

// mixin
data() {
return {
message: 'Hello from mixin'
};
}

// コンポーネント
data() {
return {
message: 'Hello from component'
};
}

// 最終結果
data() {
return {
message: 'Hello from component' // コンポーネントデータが mixin データを上書きします
};
}

2. ライフサイクルフックのマージ

もしmixinとコンポーネントの両方に同じライフサイクルフック（例：mounted）がある場合、Vue はそれらを1つの配列にマージし、mixinコンポーネントに先立つ順序で順次実行されます。

例

// mixin
mounted() {
console.log('Mounted from mixin');
}

// コンポーネント
mounted() {
console.log('Mounted from component');
}

// 実行順序
// Mounted from mixin
// Mounted from component

3. methods と computed のマージ

methodsとcomputedのマージ規則はdata似ています。メソッド名または算出プロパティ名が衝突した場合、コンポーネントのメソッドまたは算出プロパティがmixin内のものを上書きします。

mixins の制限

とはいえ、mixins非常に強力ではありますが、いくつかの制限もあります：

命名の衝突：複数のmixinsまたはコンポーネントに同じプロパティ名やメソッド名がある場合、予期しない上書きが発生する可能性があります。
暗黙的な依存：mixins内のロジックがコンポーネントの特定の状態やメソッドに依存する可能性があります。この依存関係は明確ではないため、コードの保守が難しくなることがあります。
グローバルミックスイン：グローバルなmixin`mixin` を使用すると、すべての Vue インスタンスに影響を与え、予測できない副作用を引き起こす可能性があります。

代替案：Composition API

Vue 3 では、Composition API はロジックを再利用するためのより柔軟な方法を提供しています。reactive、refおよびカスタムhookを使用して、ロジックを再利用可能な関数にカプセル化し、コンポーネントに混入する代わりに使用できます。

例

// useMixin.js
import { ref, onMounted } from 'vue';

export function useMixin() {
const mixinData = ref('This data is from Composition API');

function mixinMethod() {
console.log('This method is from Composition API');
}

onMounted(() => {
console.log('Mounted hook from Composition API');
});

return {
mixinData,
mixinMethod
};
}

次に、コンポーネントで使用します：

例

<template>
<div>
<p>{{ mixinData }}</p>
<button @click="mixinMethod">Click me</button>
</div>
</template>

<script>
import { useMixin } from './useMixin';

export default {
setup() {
const { mixinData, mixinMethod } = useMixin();
return {
mixinData,
mixinMethod
};
}
};
</script>