Article directory
1. Parent-child component life cycle in Vue
1-1 Load the rendering process
- Execution order: the parent component is created first, then the child component is created; the child component is mounted first, and then the parent component is mounted
- father before Create
- fathercreated
- father beforeMount
- child beforeCreate
- childcreated
- Child-mounted
- father mounted
1-2 Destruction process
-
- father before Destroy
- child beforeDestroy
- child destroyed
- father destroyed
1-3 Display cases
- Show
2. Code [can be pasted and run]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
<school />
</div>
<script>
// 子组件
const student = Vue.extend({
name: 'student',
template: `
<div>子组件</div>
`,
data() {
return {
};
},
beforeCreate() {
console.log("子组件————beforeCreate...");
},
created() {
console.log("子组件————create...");
},
beforeMount() {
console.log("子组件————beforeMount...");
},
mounted() {
console.log("子组件————mounted...");
},
beforeUpdate() {
console.log("子组件————beforeUpdate...");
},
updated() {
console.log("子组件————updated...");
},
beforeDestroy() {
console.log("子组件————beforeDestroy...");
},
destroyed() {
console.log("子组件————destroyed...");
}
})
// 父组件
const school = Vue.extend({
name: 'school',
template: `
<div>
{
{text}}
<button @click="handle">点击销毁</button>
<student/>
</div>
`,
components: {
student
},
data() {
return {
text: "哈哈",
};
},
methods: {
handle() {
this.$destroy();
},
},
beforeCreate() {
console.log("父组件————beforeCreate...");
},
created() {
console.log("父组件————create...");
},
beforeMount() {
console.log("父组件————beforeMount...");
},
mounted() {
console.log("父组件————mounted...");
},
beforeUpdate() {
console.log("父组件————beforeUpdate...");
},
updated() {
console.log("父组件————updated...");
},
beforeDestroy() {
console.log("父组件————beforeDestroy...");
},
destroyed() {
console.log("父组件————destroyed...");
},
})
const vm = new Vue({
name: 'vm',
el: '#root',
components: {
school
}
})
</script>
</body>
</html>
https://www.jb51.net/article/145474.htm
2. Parent-child component life cycle in React
2-1 Introduction to the life cycle of the new and old versions of React
-
The react life cycle refers to the entire process from creation to unloading of components. Each process has a corresponding hook function that will be called. It mainly has the following stages:
- Mount phase: the process in which component instances are created and inserted into the DOM tree
- Update phase: the process in which the component is re-rendered
- Unloading phase: the process in which a component is removed from the DOM tree
-
2-2 Parent-child component life cycle
2-2-1 Parent-child component initialization
- parent component constructor
- Parent component getDerivedStateFromProps
- parent component render
- Subcomponent constructor
- Subcomponent getDerivedStateFromProps
- subcomponent render
- Subcomponent componentDidMount
- Parent component componentDidMount
2-2-2 Subcomponents modify their own state
- Subcomponent getDerivedStateFromProps
- Subcomponent shouldComponentUpdate
- subcomponent render
- Subcomponent getSnapShotBeforeUpdate
- Subcomponent componentDidUpdate
2-2-3 Parent component modify props
- Parent component getDerivedStateFromProps
- parent component shouldComponentUpdate
- parent component render
- Subcomponent getDerivedStateFromProps
- Subcomponent shouldComponentUpdate
- subcomponent render
- Subcomponent getSnapShotBeforeUpdate
- Parent component getSnapShotBeforeUpdate
- Subcomponent componentDidUpdate
- Parent component componentDidUpdate
2-2-4 Uninstall subcomponents
- Parent component getDerivedStateFromProps
- parent component shouldComponentUpdate
- parent component render
- Parent component getSnapShotBeforeUpdate
- Subcomponent componentWillUnmount
- Parent component componentDidUpdate
The problems encountered in the development of Vue, just stepped on a pit for React first, in short, it has to be buried