Article directory
1 The process of component operation
The life cycle of a component refers to
the entire process of a component from creation -> running (rendering) -> destruction, emphasizing a period of time.
2 Listen to different moments of the component
The vue framework has built-in life cycle functions for components at different times, and the life cycle functions will be automatically called along with the running of the component.
2.1 All lifecycle functions in components
| life cycle function | execution time | stage | number of executions | Application scenarios |
|---|---|---|---|---|
| beforeCreate | Before starting to create components in memory | create stage | only 1 time | - |
created |
After the component is created in memory | create stage | only 1 time | Send ajax request initial data |
| beforeMount | Before rendering the component to the page for the first time | create stage | only 1 time | - |
mounted |
After the component is rendered on the page for the first time | create stage | only 1 time | Manipulate DOM elements |
| beforeUpdate | before the component is re-rendered | run phase | 0 or more times | - |
updated |
After the component is re-rendered in the page | run phase | 0 or more times | - |
| beforeUnmount | before the component is destroyed | destruction phase | only 1 time | - |
unmounted |
After the component is destroyed (pages and memory) | destruction phase | only 1 time | - |
2.2 The main life cycle functions in components
| life cycle function | execution time | stage | number of executions | Application scenarios |
|---|---|---|---|---|
created |
After the component is created in memory | create stage | only 1 time | Send ajax request initial data |
mounted |
After the component is rendered on the page for the first time | create stage | only 1 time | Manipulate DOM elements |
updated |
After the component is re-rendered in the page | run phase | 0 or more times | - |
unmounted |
After the component is destroyed (pages and memory) | destruction phase | only 1 time | - |
① When the component is created in memory, the created function will be called automatically
② When the component is successfully rendered on the page, the mounted function will be called automatically
③ When the component is destroyed, the unmounted function will be called automatically
④ When the component's After the data data is updated, vue will automatically re-render the DOM structure of the component. When the component is re-rendered, the updated lifecycle function will be called automatically.
2.3 created
In actual development, created is the most commonly used life cycle function!
When the component is created in memory, the created function is automatically called
<template>
<div>
<h3>Life 组件</h3>
</div>
</template>
<script>
export default {
name: 'Life',
created() {
console.log('Life组件的create生命周期函数被调用')
}
}
</script>
<style>
</style>
<template>
<div>
<h1>App 组件</h1>
<life></life>
</div>
</template>
<script>
import Life from './Life.vue'
export default {
name: 'App',
components: {
Life
}
}
</script>
<style>
</style>
Generally, an ajax request for page data is initiated in created. At this time, the DOM element of the page has been created, and the data can be rendered into the DOM element.
Do not send an ajax request for initial data in beforeCreate, because the DOM elements of the page have not been created yet, and the data cannot be rendered into the DOM elements.
2.4 mounted
When the component is successfully rendered on the page, the mounted function will be called automatically.
<template>
<div>
<h3>Life 组件</h3>
</div>
</template>
<script>
export default {
name: 'Life',
created() {
console.log('Life组件的create生命周期函数被调用')
},
mounted() {
console.log('当组件被成功的渲染到页面上之后，会自动调用 mounted 函数')
}
}
</script>
<style>
</style>
2.5 unmounted
When the component is destroyed, the unmounted function will be called automatically
<template>
<div>
<h3>Life 组件</h3>
</div>
</template>
<script>
export default {
name: 'Life',
created() {
console.log('Life','Life组件的create生命周期函数被调用')
},
mounted() {
console.log('Life','当组件被成功的渲染到页面上之后，会自动调用 mounted 函数')
},
unmounted() {
console.log('Life','当组件被销毁完毕之后，会自动调用 unmounted 函数')
}
}
</script>
<style>
</style>
<template>
<div>
<h3>Life2 组件</h3>
</div>
</template>
<script>
export default {
name: 'Life2',
created() {
console.log('Life2','Life2组件的create生命周期函数被调用')
},
mounted() {
console.log('Life2','当组件被成功的渲染到页面上之后，会自动调用 mounted 函数')
},
unmounted() {
console.log('Life2','当组件被销毁完毕之后，会自动调用 unmounted 函数')
}
}
</script>
<style>
</style>
<template>
<div>
<h1>App 组件</h1>
<!-- <life></life> -->
<!-- 动态组件 -->
<button @click="componentName='Life2'"> 按钮 </button>
<component :is="componentName"></component>
</div>
</template>
<script>
import Life from './Life.vue'
import Life2 from './Life2.vue'
export default {
name: 'App',
data() {
return {
componentName: 'Life'
}
},
components: {
Life,
Life2
}
}
</script>
<style>
</style>
Dynamic components can render components with corresponding names based on the value of is.
Click the button to destroy the Life component and create the Life2 component
2.6 updated
Monitor component updates
When the component's data data is updated, vue will automatically re-render the component's DOM structure to ensure that the data displayed by the View view is consistent with the Model data source. When the component is re-rendered, the updated lifecycle function is automatically called.
<template>
<div>
<h3>Life 组件</h3>
<div>{
{count}}</div>
<button @click="add"> +1 </button>
</div>
</template>
<script>
export default {
name: 'Life',
data() {
return {
count: 0
}
},
methods: {
add() {
this.count++
}
},
created() {
console.log('Life','Life组件的create生命周期函数被调用')
},
mounted() {
console.log('Life','当组件被成功的渲染到页面上之后，会自动调用 mounted 函数')
},
unmounted() {
console.log('Life','当组件被销毁完毕之后，会自动调用 unmounted 函数')
},
updated() {
console.log('当组件的 data 数据更新之后，vue 会自动重新渲染组件的 DOM 结构，当组件被重新渲染完毕之后，会自动调用 updated 生命周期函数')
}
}
</script>
<style>
</style>
