Vue.js Lifecycle Hooks: created(), mounted(), beforeDestroy() and showPrompt() Example

The `created()` hook is a lifecycle hook in Vue.js that is called when the component is created. In this example, the `created()` hook is used to register event listeners for the `keydown` event and the `beforeunload` event.\n\nIn the `mounted()` hook, the `init()` method is called. This method is responsible for initializing the component.\n\nThe `beforeDestroy()` hook is called when the component is about to be destroyed. In this example, it is used to remove the event listeners that were registered in the `created()` hook.\n\nThe `showPrompt()` method is a custom method that is called when the `beforeunload` event is triggered. This event is fired when the page is about to be unloaded, such as when the user closes the tab or navigates away from the page. In this method, a custom prompt is shown to the user. The `preventDefault()` method is called to prevent the default behavior of the `beforeunload` event, and the `returnValue` property is set to an empty string to support older versions of browsers.\n\nFinally, the `showPrompt()` method also dispatches a Vuex action called `staff/closeWebSocket` asynchronously. This action is responsible for closing a WebSocket connection.