foreword
The content of this chapter is the VUE life cycle and related technical discussions.
Previous article address:
Vue 3: Play with web front-end technology (6) - Lion King's Blog - CSDN Blog
Next article address:
Vue 3: Play with web front-end technology (eight) - Lion King's Blog - CSDN Blog
1. Life cycle
1. Understand the life cycle through the hook function
Based on the code in the previous chapter, we add a lifecycle hook function and modify the App.vue file as follows:
<template>
<div>
<ul>
<li v-for="item in list" :key="item.id">
<span>{
{ item.name }}</span>
<span>{
{ item.age }}</span>
</li>
</ul>
</div>
</template>
<script>
import './mock/apiMock'
import axios from 'axios'
export default {
data() {
return {
// list:[{"id":1, "name":"王婆", "age":100}],
list:[],
}
},
methods: {
fetchData() {
axios.get('/apidata/list')
.then(response => {
this.list=response.data.list
console.log(this.list)
})
.catch(error => {
console.error(error)
})
}},
beforeCreate() {
console.log('beforeCreate');
this.fetchData();
},
created() {
console.log('created');
},
beforeMount() {
console.log('beforeMount');
},
mounted() {
console.log('mounted');
},
beforeUpdate() {
console.log('beforeUpdate');
},
updated() {
console.log('updated');
},
beforeUnmount() {
console.log('beforeUnmount');
},
Unmount() {
console.log('Unmount');
},
}
</script>
<style>
</style>
In this code, we put this.fetchData(); into these 8 stages in turn, and see their effects:
(1) Put it in beforeCreate:
The following error is reported, indicating that it is incorrect to call `fetchData()` in the `beforeCreate()` hook, because the component instance has not been created at this time, and the method of the component cannot be called.
(2) Put it in created:
Although the log is printed in created, it is not printed until mounted is completed. Why? This may be in the Vue component, the created hook function is called immediately after the Vue instance is created. The mounted hook function is called after the Vue instance is mounted to the DOM. As shown in the figure below, the this.fetchData() log is printed after the mounted cycle is executed. This is because the mounted hook function is called after the DOM is mounted, and the fetchData function may include DOM operations or involve asynchronous operations.
(3) Put it in beforeMount:
Same as (2).
(4) Put it in mounted:
It can be called correctly, indicating that it should be placed under this cycle.
(5) Put it in beforeUpdate:
Do not execute directly, as shown below.
（6）updated：
Same as (5)
（7）beforeUnmount：
Same as (5)
（8）Unmount：
Same as (5)
2. Related technical discussions
1. Combined API and optional API
Official Description: Introduction | Vue.js
To sum up, the optional API is implemented based on the combined API, and the style of the provided interface is just different.
2. What is the VUE life cycle?
Official Description: Lifecycle Hooks | Vue.js
As shown in the figure below, the location of the life cycle hook is marked by the arrow.
Taking option API as an example, Vue's life cycle hook function mainly includes the following 8 stages (more than 8 functions, please refer to the official description for details: Life cycle options | Vue.js ):
(1) beforeCreate: The component instance has just been created, but data and methods have not been initialized.
(2) created: The component instance has been created, and data and methods have been initialized. Some data initialization can be done.
(3) beforeMount: Called before the component is mounted to the DOM. At this point the template is compiled into a render function.
(4) mounted: called after the component is mounted to the DOM. DOM manipulation etc. can be performed.
(5) beforeUpdate: Called before the component is updated, before the virtual DOM is re-rendered and patched.
(6) updated: Called after the component is updated. DOM manipulation etc. can be performed.
(7) beforeUnmount: Called before the component instance is destroyed. Some cleaning work can be done, such as canceling timers, canceling event monitoring, etc.
(8) unmounted: Called after the component instance is destroyed.
These lifecycle hook functions can be used in Vue components, and specific code logic can be executed in the hook function to help us process data or perform operations at different stages.
3. Life cycle options and life cycle hooks
In Vue, lifecycle options are wrappers based on lifecycle hooks . When the official describes the life cycle , it is directly expressed by the hook function corresponding to the life cycle option in the optional API , rather than by the hook function of the life cycle hook of the combined API, which also indirectly shows that the life cycle hook is more for the bottom layer. However, this way of expression seems a bit confusing, so that it is hard to understand whether the lifecycle hook and the hook function in the lifecycle option are the same thing. After the previous analysis, we concluded that life cycle options and life cycle hooks are just different API styles, and the hook function in the option is the encapsulation of the life cycle hook function.
4. Understanding of the term DOM
DOM (Document Object Model) is a programming interface used in browsers to represent and manipulate HTML, XML, and XHTML documents. It parses the document into a tree structure consisting of nodes and objects (including elements, attributes, text, etc.), and provides a set of methods and properties to access, modify and manipulate this tree structure.
The tree structure of DOM consists of nodes (Node) and relationships (Relationship). Nodes represent elements, attributes, text, etc. in the document, and they can be accessed and manipulated through the relationship between nodes, such as parent-child nodes, sibling nodes, and so on.
DOM provides some common methods and properties to process documents, for example:
- getElementById(): Get the corresponding element node through the id attribute of the element.
- getElementsByTagName(): Get a set of element nodes by the tag name of the element.
- innerHTML: Get or set the content of the element node.
- appendChild(): Inserts a new child node at the end of an element node.
By using DOM, we can dynamically manipulate document content, such as creating new elements, deleting or moving existing elements, modifying the styles or attributes of elements, and so on. This allows us to use JavaScript or other programming languages to manipulate the structure and style of web pages to achieve dynamic interactive effects and user experience.