Vue生命周期函数

今天小编继续和大家一起研究Vue，今天要一起探讨的是生命周期函数，在小编的理解中，生命周期就是在一定时间自动执行的函数，就类似原生js中的window.onload。小编先拷贝一张来自Vue官方文档中的一张图。大家还可以关注我的微信公众号，蜗牛全栈。

其实在这张图中，已经完整的说明了Vue中每个生命周期中的函数的执行时间，但是小编还是要用代码结合注释，更加详细的说明生命周期。

const app = Vue.createApp({  
    data(){    
        return {      
            message: 'helllo world'    
        }  
    },  
    methods:{    
        handllItemClick(){ 
            // 绑定点击事件。功能就是点击DOM元素的时候，更新data中的数据      
            this.message = '666'    
        }  
    },  
    // 在实例生成之前会自动执行的函数  
    beforeCreate(){    
        console.log('beforeCreate')  
    }, 
    // 在实例生成之后会自动执行的函数  
    created(){    
        console.log('created')  
    },
  // 在模板已经被变成函数之后立即执行的函数（在组件内容被渲染到组件之前自动执行的函数）  
  beforeMount(){    
      console.log(document.getElementById('root').innerHTML) // 空白    
      console.log('beforeMount')  
  },  
  // 在组件内容被渲染到页面之后自动执行的函数  
  mounted(){    
      console.log(document.getElementById('root').innerHTML) // <div>hello world</div>     
      console.log('mounted')  
  },  
  // 当data中的函数变化会立即自动执行的函数  
  beforeUpdate(){    
      console.log(document.getElementById('root').innerHTML) // <div>hello world</div>     
      console.log('beforeUpdate')  
  },  
  // 当data中的函数变化，同时页面完成更新后会自动执行的函数  
  updated(){    
    console.log(document.getElementById('root').innerHTML) // <div>666</div>    
    console.log('updated')  
  },  
    // 当Vue应用失效时，自动执行的函数  
    beforeUnmounted(){    
        console.log(document.getElementById('root').innerHTML) // <div>hello world</div>     
        console.log('beforeUnmounted')  
    },  
    // 当Vue应用失效时，且 data 数据完全销毁（DOM完全销毁）之后，自动执行的函数  
    unmounted(){    
        console.log(document.getElementById('root').innerHTML) // 空白    
        console.log('unmounted')  
    },  
    template: '<div v-on:click="handllItemClick">{{ message }}</div>'})const vm  = app.mount('#root')