Chapter IV lifecycle functions - 34 Life Cycle functions - components running hook function and destruction stage

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4   <head>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7     <title>Document</title>
 8     <!--1.导入Vue的包-->
 9     <script src=" https://cdn.jsdelivr.not / NPM / vue " > </script>   
10   </head>
11 
12   <body>
13       <div id="app">
14       <input type="button" value="修改msg" @click="msg='No'">
15       <h3 id="h3">{{msg}}</h3>
16       </div>
17 
18 
19       <script>
var21create Vue instance, get ViewModel//20           
           VM =   new new Vue ({
 22 is                EL: ' #app ' ,
 23 is          Data: {
 24            MSG: ' OK ' 
25          },
 26 is          Methods: {
 27            show () {
 28              the console.log ( ' executed show method ' )
 29            }
 30          },
 31          beforeCreate () { // before this is the first we encountered a function of the life cycle, represents an example out fully created, it will execute 
32            // console.log (this.msg) 
33            // this.Show ()
34            // NOTE: When the function execution beforeCreate life cycle, the data in the data and methods are not initialized 
35  
36          },
 37 [          Created () { // This is encountered in the life cycle of the second function 
38 is            // Console .log (this.msg) 
39            // this.Show () 
40            // in the create, data and methods have been initialized good! 
41            // If you want to call methods in the method, the data or operation data, first, only the operation in the created 
42 is          },
 43 is          beforeMount () { // This is encountered in the life cycle of the third function, presentation template already in memory editing is complete, but not yet rendered to the template page 
44            // console.log (document.getElementById ( 'h3'). innerText) 
45            //BeforeMount page elements, has not really been replaced over, just before writing the template string of some 
46          },
 47          Mounted () { // This is the fourth encounter life-cycle function, said template memory has been mounted to the real page, the user can already see the rendered page of the 
48            // console.log (document.getElementById ( 'h3'). innerText) 
49            // mounted last a life time of instance creation periodic function, when executing the mounted on said instance has been completely created, this time, if no other operations, then this instance, it is lying quietly in our memory, motionless 
50          },
 51  
52          // the next two events are running 
53          beforeUpdate () { // this time, express our interface has not been updated [data is updated yet? Data is certainly updated] 
54 is            / * the console.log ( 'interface element content:' + document.getElementById ( 'H3') the innerText.)
 55            the console.log ( 'MSG data DATA is:' + this. msg)* / 
56            // 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 
57          },
 58  
59          Updated () {
 60            the console.log ( ' content interface element: ' + document.getElementById ( ' H3 ' ) .innerText)
 61 is            the console.log ( ' data in data msg: ' + the this a .msg)
 62 is            // Updated event when executed, the page data and the data has been synchronized, are the latest 
63 is          }
 64            });
 65        </ Script > 
66    </body>
67 </html>
Chapter IV lifecycle functions - 34 Life Cycle functions - components running hook function and destruction stage

Guess you like
