Behaviors の概念と目的
微信小程序の開発において、複数のコンポーネントにまたがる共通処理や状態管理を効率的に行うための機能として、「Behaviors」が存在します。これは Vue.js のミックスイン（mixins）と同様の役割を果たし、属性定義、データ、ライフサイクルフック、およびカスタムメソッドをカプセル化して提供することを可能にします。
Behaviors の作成手順
共有用の挙動を定義するには、プロジェクト内に適切なディレクトリを作成し、その中に Behavior インスタンスを返すモジュールファイルを用意します。以下のサンプルでは、一般的なユーティリティ用ビヘイビアを作成しています。
// behaviors/shared-ui-behavior.js
module.exports = Behavior({
// オプション設定
options: {
multipleSlots: true
},
// コンポーネントに渡せるプロパティ定義
properties: {
themeColor: {
type: String,
value: '#007AFF',
observer: '_onColorChange'
}
},
// 内部で使用する非公開データ
data: {
internalCount: 0,
isVisible: true
},
// メソッドの定義
methods: {
_onColorChange(newVal) {
console.log('Theme color updated:', newVal);
},
toggleVisibility() {
this.setData({
isVisible: !this.data.isVisible
});
}
}
});
コンポーネントへの組み込み方法
特定のコンポーネントでこの共有ロジックを使用する場合は、Node.js の require メソッドを使ってモジュールを読み込み、Component オブジェクト内の behaviors プロパティ配列に追加します。これにより、定義されたプロパティやメソッドが自動的にマージされます。
// components/custom-button/index.js
const ThemeMixin = require('../../behaviors/shared-ui-behavior');
Component({
// ビヘイビアを組み込む
behaviors: [ThemeMixin],
// ローカル固有のプロパティも定義可能
properties: {
buttonText: {
type: String,
value: 'Click Me'
}
}
});
競合時の解決規則と優先順位
コンポーネント自身が定義したフィールドと、参照しているビヘイビア内で同名のフィールドが定義されている場合、重複排除のためのルールが適用されます。
1. プロパティとメソッドの場合
基本的にはコンポーネント自身の定義が最も優先され、次にビヘイビアの登録順序によって上書きが行われます。
- コンポーネント自体に定義がある場合：コンポーネント側の値・関数が採用される。
- コンポーネント側にない場合：behaviors 配列で後ろに登録されたビヘイビアの方が、前に登録されたものより優先度が高い。
- ネスト構造の場合：直接的な参照元となるビヘイビアが、内側で参照されているビヘイビアよりも優先される。
2. データフィールド（data）の場合
データ型の種類によって動作が異なります。
- オブジェクト型：両者がオブジェクトである場合、キーごとに結合（merge）処理が行われる。
- その他の型：単純な上書きが発生する。優先順位は「参照元のビヘイビア ＞ 被参照のビヘイビア」、「後方のビヘイビア ＞ 前方のビヘイビア」となる。
3. ライフサイクルフックと Observer
これらの関数は複数回定義されても上書きではなく、順次実行されます。
- 異なる種類のライフサイクル関数は、標準的なコンポーネントの実行順序に従う。
- 同一のライフサイクルまたは観測フィールドを持つ場合の呼び出し順序は以下の通り。
- まず、参照先に含まれるビヘイビアが実行される（内側から外側へ）。
- その後、現在参照しているビヘイビアが実行される。
- 最後にコンポーネント自体のフックが実行される。
- また、同じビヘイビアが単一のコンポーネント内で複数回参照されても、ライフサイクル関連のコードは重複実行されないように制御されています。