Vue生命周期函数

今天继续和大家一起学习Vue。今天要讨论的是生命周期函数。在我的理解中，生命周期就是一个在某个时刻自动执行的函数，就像在原生js中一样。窗口.onload。小编先从vue官方文档中复制一张图片。其实在这张图中，Vue中各个生命周期的函数的执行时间已经解释的很完整了，但是小编还是需要用代码结合注释的方式来说明的更加详细。的描述生命周期。constapp=Vue.createApp({data(){return{message:'helloworld'}},methods:{handleItemClick(){//绑定点击事件。函数是点击DOM元素时更新data中的数据this.message='666'}},//实例生成前自动执行的函数beforeCreate(){console.log('beforeCreate')},//实例生成后自动执行的函数created(){console.log('created')},//模板变成函数后立即执行的函数（在组件内容呈现给组件之前自动执行的函数)beforeMount(){console.log(document.getElementById('root').innerHTML)//blankconsole.log('beforeMount')},//函数组件内容渲染到页面后自动执行)},//当data中的函数发生变化时，立即自动执行FunctionbeforeUpdate(){console.log(document.getElementById('root').innerHTML)//

console.log('beforeUpdate')},//当数据中的函数改变时，同时函数更新(){console.log(document.getElementById('root').innerHTML)页面更新后会自动执行//console.log('updated')},//当Vue应用程序失败，自动执行函数beforeUnmounted(){console.log(document.getElementById('root').innerHTML)//console.log('beforeUnmounted')},//当Vue应用失败，数据data完全销毁（DOM完全销毁）时，自动执行函数unmounted(){console.log(document.getElementById('root').innerHTML)//空白console.log('unmounted')},template:'{{message}}