Vue框架中，active事件是一個非常有用的事件。在Vue應用中，當一個組件被激活時，Vue會自動觸發組件的active事件。這個事件通常用來執行一些初始化或異步操作。

// 注冊組件
Vue.component('my-component', {
template: '
我是一個組件
',
activated: function () {
console.log('組件已激活');
}
})

在這個例子中，我們使用了Vue的component方法來注冊了一個名為'my-component'的組件。在組件的選項對象中，我們聲明了一個activated方法，這個方法會在組件被激活時自動執行。在這個方法中，我們簡單地打印了一條控制臺消息。

如果我們在應用中使用了這個組件，當這個組件被渲染并插入到DOM中時，Vue會自動觸發這個組件的activated事件。這個事件對于執行一些初始化操作以及加載數據非常有用。

在這個例子中，我們在應用中使用了我們前面注冊的'my-component'組件。在模板中，我們使用了Vue的v-if指令來控制這個組件是否會被渲染和激活。我們還掛載了一個點擊事件來切換這個組件的狀態（顯示或隱藏）。我們在Vue實例中聲明了一個布爾類型的isVisible屬性，這個屬性會用來控制組件的顯示和隱藏。

當我們點擊按鈕時，Vue會更新isVisible屬性的值。如果isVisible的值為true，組件會被渲染和激活，從而觸發activated事件。如果isVisible的值為false，組件會被銷毀，并且不會觸發activated事件。因此，我們可以根據組件的激活狀態來執行不同的操作。