109 lines
2.3 KiB
Markdown
109 lines
2.3 KiB
Markdown
|
1. onBeforeMount
|
||
|
|
This hook is called before the component is mounted to the DOM. It can be used to perform tasks such as:
|
||
|
|
|
||
|
|
Initializing the component
|
||
|
|
Setting up event listeners
|
||
|
|
Logging component mount
|
||
|
|
|
||
|
|
import { onBeforeMount } from 'vue'
|
||
|
|
|
||
|
|
export function useMyHook() {
|
||
|
|
onBeforeMount(() => {
|
||
|
|
console.log('Component about to mount')
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
2. onMounted
|
||
|
|
This hook is called when the component is mounted to the DOM. It can be used to perform tasks such as:
|
||
|
|
|
||
|
|
Initializing the component
|
||
|
|
Setting up event listeners
|
||
|
|
Logging component mount
|
||
|
|
|
||
|
|
import { onMounted } from 'vue'
|
||
|
|
|
||
|
|
export function useMyHook() {
|
||
|
|
onMounted(() => {
|
||
|
|
console.log('Component mounted')
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
3. onBeforeUpdate
|
||
|
|
This hook is called before the component is updated. It can be used to perform tasks such as:
|
||
|
|
|
||
|
|
Updating the component's state
|
||
|
|
Handling events
|
||
|
|
Logging component update
|
||
|
|
|
||
|
|
import { onBeforeUpdate } from 'vue'
|
||
|
|
|
||
|
|
export function useMyHook() {
|
||
|
|
onBeforeUpdate(() => {
|
||
|
|
console.log('Component about to update')
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
4. onUpdated
|
||
|
|
This hook is called when the component is updated. It can be used to perform tasks such as:
|
||
|
|
|
||
|
|
Updating the component's state
|
||
|
|
Handling events
|
||
|
|
Logging component update
|
||
|
|
|
||
|
|
import { onUpdated } from 'vue'
|
||
|
|
|
||
|
|
export function useMyHook() {
|
||
|
|
onUpdated(() => {
|
||
|
|
console.log('Component updated')
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
5. onBeforeUnmount
|
||
|
|
This hook is called before the component is unmounted from the DOM. It can be used to perform tasks such as:
|
||
|
|
|
||
|
|
Cleaning up resources
|
||
|
|
Logging component unmount
|
||
|
|
Handling errors
|
||
|
|
|
||
|
|
import { onBeforeUnmount } from 'vue'
|
||
|
|
|
||
|
|
export function useMyHook() {
|
||
|
|
onBeforeUnmount(() => {
|
||
|
|
console.log('Component about to unmount')
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
6. onUnmounted
|
||
|
|
This hook is called when the component is unmounted from the DOM. It can be used to perform tasks such as:
|
||
|
|
|
||
|
|
Cleaning up resources
|
||
|
|
Logging component unmount
|
||
|
|
Handling errors
|
||
|
|
|
||
|
|
import { onUnmounted } from 'vue'
|
||
|
|
|
||
|
|
export function useMyHook() {
|
||
|
|
onUnmounted(() => {
|
||
|
|
console.log('Component unmounted')
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
<!-- <template>
|
||
|
|
<div>
|
||
|
|
<h1>{{ title }}</h1>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
title: 'Hello World'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onBeforeMount() {
|
||
|
|
console.log('Component about to mount')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script> -->
|