Vue生命周期

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

创建 前 后

挂载 前 后

更新 前 后

销毁 前 后

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

创建前的函数 beforeCreate() { }

创建后的函数  created()

挂载前的函数 beforeMount()

挂载后的函数 mounted()

更新前的函数 beforeUpdate()

更新后的函数   updated()

销毁前的函数   beforeDestory()

销毁后的函数   destoryed()

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

return 的是数据的对象

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(){//拿到渲染后的domconsole.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