Vue lifecycle hook functions

Execution instructions (interview questions) 1. When the page is loaded for the first time, execute the first three life cycles of the parent component => then execute the first four life cycles of the child component => Wait until the child component mouted, and then execute the parent component mouted 2. After the page is loaded, the parent component's data is passed to the child component and the child component uses the parent component's data => Execute the parent component's update function beforeUpdate => Child component's beforeUpdate and updated => Parent component's updatedCopy the code

// Execute the first four beforeCreate () {// 1. Log ("beforeCreate -- before instance initialization ") console.log(this.msg) // undefined}, created () {// 2. Log ("created -- after instance initialization ") console.log(this.msg) // "I am a variable"}, beforeMount () {// 3. Before mounting => the page is not rendered => cannot operate DOM console.log("beforeMount -- virtual DOM of vue, ") console.log(document.getelementById ("myUl")) // null // Console. log(document.getelementById ("myUl").children[1].innerhtml), mounted () {// Console. log("mounted -- vue virtual DOM, // console.log(document.getelementById ("myUl").children[1].innerhtml) console.log(document.querySelector('#myUl').children[1].innerText) }, beforeUpdate () { // 5. Console. log("beforeUpdate -- Data is updated, before the page is updated ") // For example, vue will trigger this life cycle function by clicking new array elements, but the page is not updated. // console.log(document.getelementById ("myUl").children[4].innerhtml)}, updated () {// 6. Console. log("updated -- ") Page updated after ") console.log(document.getelementById ("myUl").children[4].innerhtml)}, beforeDestroy () {// 7. Before destruction // (Clear timer/unbind eventBus) console.log("beforeDestroy - called before instance destruction ")}, destroyed () {// 8. Console. log("destroyed -- destroyed ")},Copy the code

Activated and Deactivated are used together with the keep-alive tag

<button @click='flag =! </button> <keep-alive> <cmpsize v-if='flag'></cmpsize> </keep-alive>Copy the code

Check that activated is used in the same way as beforeDestroy and destroyed above, but it would be a waste of performance to use beforeDestroy and destroyed if we need an instance to reappear after destruction.

When an instance is activated, it is used to activate an instance repeatedly

Components :{cmpsize:{template:'<div> This is a child </div>', activated(){console.log(' when instance is activated '); }}},Copy the code

If the Deactivated instance is not activated,

Components :{cmpsize:{template:'<div> This is a child </div>', activated(){console.log(' when the instance is not active '); }}},Copy the code