vue生命周期

beforeCreate(){  // 刚刚new  Vue()之后,这个时候,数据还没有挂载,只是一个空壳,可以在这加个loading

  console.log('创建前')

  console.log('el:' + this.$el)  // undefined

  console.log('el:' + this.$data)  // undefined

}

created(){  // 这个时候已经可以使用data中的数据,也可以更改数据,在这里不会触发updated函数,在这结束loading

  console.log('创建完毕')

  console.log('el:' + this.$el)  // undefined

  console.log('el:' + this.$data)  // 已被初始化

}

beforeMount(){  // 虚拟dom已经创建完成,马上就要渲染,在这里也可以更改数据,不会触发updated函数

  console.log('挂载前')

  console.log('el:' + this.$el)  // 已被初始化

  console.log('el:' + this.$data)  // 已被初始化

}

mounted(){  // 此时,组件已经出现在页面中,数据、dom都已经处理好了,事件都已经挂载好了,在这发起后端请求

  console.log('挂载结束')

  console.log('el:' + this.$el)  // 已被初始化

  console.log('el:' + this.$data)  // 已被初始化

}

beforeUpdate(){

  console.log('更新前')

}

updated(){

  console.log('更新完成')

}

beforeDestroy(){  // 销毁前执行

  console.log('销毁前')

}

destroyed(){  // 组件的数据绑定,监听...都会去掉,只剩下dom空壳

  console.log('销毁完成')

}

原文地址:https://www.cnblogs.com/cuishuangshuang/p/13175140.html