Life Cycle and Life Cycle hook
-
What is the life cycle: from creation Vue instance, to run, to destroy the period, always accompanied by a variety of events, which, collectively referred to as life cycle!
-
Lifecycle hook : is the alias of life cycle events only;
-
Lifecycle hook function = = life cycle life cycle events
The main function of the life cycle of classification
-
During the life cycle of creation functions:
-
beforeCreate: Just instance is created in memory, this time, there is no good data to initialize properties and methods
-
created: OK instance has been created in memory, this time data and methods have been created OK, this time has not yet begun to compile a template
-
beforeMount: At this point has been compiled template, but have not mounted to the page
-
mounted: At this point, has compiled template, mounted to the page specified container display
-
-
During the life cycle of the run function:
-
beforeUpdate: This function is executed before a status update, this time in the state value data is up to date, but the data displayed on the screen or old, because at this time has not yet begun to re-render a DOM node
-
updated: This function is called after the update is completed instance, data is displayed on the data values in the state and interfaces, have completed the update, the interface has been re-rendered good!
-
During the life cycle of destruction function:
-
beforeDestroy: called before destroy instance. In this step, the instance is still fully available.
-
destroyed: Vue instance called after the destruction. After the call, everything will de-binding indication Vue instance, all event listeners will be removed, all the child instance will be destroyed.
Life Cycle Code Analysis
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="修改msg" @click="msg='No'">
<h3 id="h3">{{ msg }}</h3>
</div>
<script>
Show () {
Methods: {
},
MSG: 'OK'
Data: {
EL: '#app',
var Vue new new VM = ({
// Create Vue instance, to give the ViewModel
console.log ( 'performed the show method')
}
},
beforeCreate () {// This is the first we encountered a function of the life cycle, expressed completely before instance is created, it will execute
// console.log ( this.msg) undefined //
// this.Show () // given
// NOTE: when the function execution beforeCreate life cycle, data in the data and methods have not been initialized
},
Created () {// this We are experiencing a second life cycle function
// console.log (this.msg)
// this.Show ()
// in created in, data and methods have been initialized good!
// If you want to invoke a method of methods, data or operational data in the earliest, can only operate in created in
},
beforeMount () {// This is the third encounter of the life cycle of functions, represents a template already in memory the editing is complete, but not yet rendered to the template page
// console.log (document.getElementById ( 'h3' ). innerText)
// executed when beforeMount, page elements, but also not really replaced over, just before writing some template string
},
mounted () {// This is the fourth encounter life-cycle function, said memory template has been mounted to the real page, the user can already see the rendered page of
// console.log ( document.getElementById ( 'h3') innerText).
// Note: mounted is the last instance to create a life-cycle function during when executing the mounted it says that the instance has been completely created, this time, if no other operations, then this example, lying quietly on our memory, motionless
}
// the next two events are running
beforeUpdate () {// this time, express our interface has not been updated data [ It has been updated yet? Data is certainly updated]
( 'interface element content:' + document.getElementById ( 'H3') the innerText.) / * The console.log
the console.log ( 'MSG data DATA is:' + this.msg) * /
// concluded: beforeUpdate when executed, the data displayed on the page, or old, at this time the data is the latest data, and the latest data pages are not synchronized
},
the console.log ('
Updated () {
console.log (. 'content on the interface elements:' + document.getElementById ( 'h3') innerText)
// updated event execution time, the page data is already in sync and data, and are up to date
}
});
</ Script>
</ body>
</ HTML>
