课程章节介绍
让我们来聊聊这两个组件——Bear Map组件和图表组件，以及它们是如何通过JavaScript文件中的生命周期挂钩函数来工作的。
首先，我们来看Bear Map组件。在这个组件中，我们使用了两个非常重要的生命周期挂钩函数：`linkedCallback`和`dislinkedCallback`。这两个函数就像是组件的“出生”和“死亡”信号。当组件被加载到页面上时，`linkedCallback`会自动被调用；而当组件从页面上移除时，`dislinkedCallback`则会被触发。
在这两个函数中，我们主要做了一件事：注册和注销一个叫做`bearListUpdate`的自定义事件。这个事件的作用是，当熊的记录列表有更新时，它会通知我们的组件。一旦我们收到了这个事件，就会调用一个名为`Inbox BearListUpdate`的函数。这个函数会根据当前过滤后的熊记录列表，生成一个新的地图标记列表，并将这个列表传递给地图的`Markers`属性。这样，地图上就会显示出最新的熊的位置信息。
接下来，我们再看图表组件。这个组件的JavaScript文件中也实现了同样的两个生命周期挂钩函数：`linkedCallback`和`dislinkedCallback`。它们的作用和Bear Map组件中的一样，都是在组件加载和卸载时自动调用。
在图表组件中，我们同样注册和注销了一个自定义事件，这次叫做`earearListUpdate`。当这个事件被触发时，我们会立即调用`Inbox BearListUpdate`函数。这个函数会根据当前过滤后的Bear记录列表，生成一个新的地图标记列表，并将这个列表传递给地图的`Markers`属性。这样，地图上就会显示出最新的Bear的位置信息。
总的来说，这两个组件都是通过监听自定义事件来动态更新地图上的标记。无论是Bear Map组件还是图表组件，它们都利用了生命周期挂钩函数来确保在适当的时候注册和注销事件，从而保持数据的实时更新。这样，用户就能在地图上看到最新的信息了。