订阅变更

检测组件中的变化，并在每次变化时运行函数

一种编写代码的简洁方式是订阅事件，并在事件发生时运行一个函数。

一些 事件监听器 作为 SDK 的一部分预定义好了，但你也可以使用 onChange() 方法作用于任何组件上即可实现同样效果。这同样适用于任何 自定义组件 你定义的组件，而无需额外工作。

例如，以下函数会检查 AvatarEquippedData 玩家实体上的组件，并在玩家更换其已装备的穿戴物品或表情时运行一个函数。组件的新值会作为函数参数传入。

import { AvatarEquippedData } from '@dcl/sdk/ecs'

export function main() {
	AvatarEquippedData.onChange(engine.PlayerEntity, (equipped) => {
		if (!equipped) return
		console.log('新的穿戴物列表：', equipped.wearableUrns)
		console.log('新的表情列表：', equipped.emoteUrns)
	})
}

多亏了 onChange() 方法，无需创建系统并在每一帧迭代检查新值，它极大地简化了这个非常常见的用例。

📔 注意：不要在 onChange() 在 System 中使用，因为这会在游戏循环的每一帧都订阅该函数的新副本，并可能导致崩溃。

同样的方法也可直接用于 自定义组件。例如：

// 定义组件
export const MyComponent = engine.defineComponent('myComponent', {
	value1: Schemas.Boolean,
	value2: Schemas.Float,
})

// 用法
export function main() {
	// 创建实体
	const myEntity = engine.addEntity()

	// 创建该组件的实例
	MyComponent.create(myEntity, {
		value1: true,
		value2: 10,
	})

	// 订阅更改
	MyComponent.onChange(myEntity, (componentData) => {
		if (!componentData) return
		console.log(componentData.value1)
		console.log(componentData.value2)
	})
}

你也可以将此方法与 查询组件结合使用，以便将场景中拥有某个特定组件的每个实体批量订阅到各自的函数。

export function main() {
	for (const [entity] of engine.getEntitiesWith(MyComponent)) {
		MyComponent.onChange(entity, (componentData) => {
			if (!componentData) return
			console.log(componentData.value1)
			console.log(componentData.value2)
		})
	}
}

请注意，此方法只会订阅 onChange() 场景开始时已存在的实体，例如通过该 UI 创建的实体 Creator Hub.

💡 提示：如果你更希望处理那些不一定与组件变化相关的事件，我们建议导入 TypeScript 库 Mitt 到你的场景中。该库提供了用于发送和监听事件的简单函数。