Vue various stages of the life cycle functions

<!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>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'ok'
      }, 
      Methods: { 
        show () { 
          console.log ( ' performed the show method ' ) 
        } 
      }, 
      beforeCreate () { // This is the first we encountered a function of the life cycle, represents an example of completely created out before, it performs 
        console.log ( the this .msg) // output here is undefined 
        // this.Show () execution sentence because the error will not initialize methods of data 
        // Note: beforeCreate life cycle time function execution, methods and data in the data are not yet initialized 
      }, 
      Created () { // this is encountered in the life cycle of the second function 
        the console.log ( the this a .msg)
         the this the .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)
         // when executed beforeMount, page elements, has not really been replaced over, just before write 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 the page 
        console.log (document.getElementById ( ' h3 ' ) .innerText)
         // Note: mounted last a life-cycle function during instance creation, when executing the mounted on said instance has been completely created,
　　　　　　At this point, if no other operations, then this instance, it is lying quietly in our memory, motionless 
      } 


      // The next two events are running 
      beforeUpdate () { // this time, we express the interface has not been updated [data is updated yet? Data is certainly updated] 
        the console.log ( ' on interface element content: '  + document.getElementById ( ' H3 ' ) .innerText) 
        the console.log ( ' MSG data DATA is: '  +  the this a .msg)
         // It concluded: when beforeUpdate executed, the data in a page, or old, at this time the data is the latest data, and the latest data page is not synchronized 
      }, 

      Updated () { 
        the console.log ( ' interface content of the element: '  +document.getElementById ( ' h3 ' ) .innerText) 
        console.log ( ' data in the data msg is: '  +  the this .msg)
         // when the updated event execution, data pages and data has been synchronized, and are up to date 
      } 
    }); 
  </ Script > 
</ body > 

</ HTML >
Vue various stages of the life cycle functions

Guess you like
