Vue 組件自動關閉是一個非常有用的功能，可以讓我們在組件銷毀時自動執行一些操作，例如清除內存、釋放資源、關閉連接等。在 Vue 中，我們可以通過在組件中使用一些生命周期鉤子函數來實現自動關閉功能。

首先，我們需要知道組件是什么，以及組件的基本生命周期。如下圖所示：

import { Component, OnInit, OnDestroy } from 'vue-property-decorator';
@Component({
components: {},
})
export default class DemoComponent extends Vue implements OnInit, OnDestroy {
created() {
console.log('created');
}
mounted() {
console.log('mounted');
}
beforeDestroy() {
console.log('beforeDestroy');
}
destroyed() {
console.log('destroyed');
}
private doSthing() {
console.log('doSthing');
}
}

組件是 Vue 中的一個基本概念，它是具有獨立功能和完整界面的模塊化的代碼組件，可以被復用。Vue 組件的生命周期包括 created、mounted、beforeDestroy 和 destroyed 等。其中，created 和 mounted 是組件的初始化階段，beforeDestory 和 destroyed 是組件的銷毀階段。通過在這些生命周期鉤子函數中編寫代碼，我們可以實現組件自動關閉的功能。

在 beforeDestroy 鉤子函數中，我們可以做一些需要在組件銷毀之前執行的任務，例如取消定時器、清除緩存、關閉連接等任務。如下圖所示：

beforeDestroy() {
clearInterval(this.timerId);
this.doClose();
}

在 destroyed 鉤子函數中，我們可以做一些需要在組件銷毀之后執行的任務，例如釋放內存、斷開連接等任務。如下圖所示：

destroyed() {
this.cleanMemory();
this.doClose();
}

除了使用生命周期鉤子函數外，我們還可以使用 watch 監聽器來實現組件自動關閉。例如，我們可以監視某個數據，當它發生變化時自動關閉組件。如下圖所示：

export default class DemoComponent extends Vue {
@Prop(Number) readonly timeout!: number;
data() {
return {
counter: 0,
};
}
private doSomething() {
console.log('doSth');
// auto close after timeout
setTimeout(() =>{
this.$emit('close');
}, this.timeout);
}
}

在這個例子中，我們監聽了一個名為 counter 的數據，當它的值發生變化時，會自動關閉組件并觸發一個 close 事件。在 doSomething 方法中，我們設置了一個定時器來自動關閉組件。通過調用 $emit 方法來觸發 close 事件，從而實現組件自動關閉的功能。

總之，Vue 組件自動關閉是一個非常有用的功能，可以讓我們在組件銷毀時自動執行一些操作，從而提高代碼的可讀性和可維護性。在 Vue 中，我們可以使用生命周期鉤子函數和 watch 監聽器來實現組件自動關閉的功能，這些技術能夠幫助我們更加有效地管理組件，并確保應用程序的正確運行。