Vue生命周期 - 技术栈

组件生命周期--------组件从创建到销毁

创建前后

挂载前后

更新前后

销毁前后

vue给组件的某个阶段提供了特定的函数（钩子函数）来执行特定的逻辑，当到了某个节点会自动调用

创建前的函数 beforeCreate() { }

创建后的函数 created()

挂载前的函数 beforeMount()

挂载后的函数 mounted()

更新前的函数 beforeUpdate()

更新后的函数 updated()

销毁前的函数 beforeDestory()

销毁后的函数 destoryed()

组件中的data必须是一个函数，函数每次执行时候得到新对象

return 的是数据的对象

javascript 复制代码

export default {
    //组件名称方便调试
    name: 'HeaderComp' ,
    //组件data必须是一个函数，函数每次执行时候得到新对象
    //组件是可以复用，用对象形式导致组件的数据相互影响
    data ( ) {
        return {
          info: '123'
        }
},
    //创建前
beforeCreate ( ) {
    //拿不到数据
console.log ( ' beforeCreate( ) ', this)
	}，
    //创建后
    created(){
        //发送网络请求
        console. log('created ( ) ', this.info)
	},
        //挂载前
  beforeMount(){
           console.log( ' beforeMount() ',this.$el)//null
 
        },
            //挂载后
     mounted(){
         //拿到渲染后的dom
               console.log ( '----' , document.getElementById( 'root ' ) )
          console.log( '  mounted() ',this.$el)
	}，
    
    //数据更新前
    beforeUpdate(){
        console.log ( ' beforeUpdate( ) ' , this.info)
    },
        //数据更新后
     updated(){
            console.log ( ' updated( ) ', this. info)
     }，
     //销毁前
     beforeDestory(){
         //资源清理---定时器取消、事件解绑等
       console.log ( ' beforeDestroy()' )  
         
},
     //销毁后
    destoryed(){
        console.log ( 'destroyed ()')
    }，
    
        
         
}

页面一打开执行的生命周期：

beforeCreate->created->beforeMount->mounted

created 拿到数据

mounted 拿到dom元素

beforeDestory 数据清理

组件按用途分视图组件（配合路由使用）和业务组件

业务组件--------->components

视图组件------->views