Vue 生命周期（钩子函数）

vue 生命周期

组件从创建初始到销毁的过程中，经常会需要在某些时刻去执行一些逻辑代码，Vue在每个组件的生命周期过程（从创建到销毁）中暴露出很多的钩子函数，这些钩子函数都会在特定的时刻执行。

思考：

• 组件或者实例会在这个生命周期过程中会经历哪些阶段？这些阶段中组件或者实例都做了些什么？
• 生命周期钩子函数有哪些？分别在哪些时刻执行?有什么作用？

组件或者实例生命周期会经历三个阶段：初始化 ==> 运行中 ==> 销毁

• 初始化：

  beforeCreate(){
      console.log('执行该钩子函数时，数据还未挂载，dom也还没有渲染，基本没什么用')
  }
  

  //挂载数据，绑定数据监听等
  created(){
     console.log('此时dom没有渲染，可以操作数据，并且不会触发运行中的钩子函数,经常在这里做数据的					初始化挂载'
      )
  }
  

  //查找组件或者实例的模板，进行编译，编译成虚拟dom结构放入到render函数中
  beforeMount(){
      console.log('可以访问数据，操作数据，dom还未渲染，可以做数据的初始化挂载，作用和created()一					样'
      )
  }
  

  //创建$el，并且执行render()函数
  render(){
      
  }
  

  mounted(){
      console.log('dom 重新渲染完成，标志初始化阶段完成')
  }
  

• 运行中(当数据更改的时候)：

  beforeUpdate(){
      console.log（'数据已经更新了，dom还没有重新渲染， 没有什么用，不能操作数据（死循环），dom也					没有操作的必要'
       )
  }
  

  //setter => watcher => 创建新的虚拟dom => diff对比 => 重新渲染 
  update(){
      console.log('dom重新渲染完成,可以操作重新渲染之后的dom')
  }
  

• 销毁阶段：

  //销毁组件只有一个途径：调用组件的$destory方法，切换组件其实也在销毁组件
  beforeDestroy(){
      console.log('此时还没有销毁，善后.....取消一些事件监听，解绑某些dom的事件')
  }
  

  //取消所有的监听（数据监听，事件监听）
  destroyed(){
      console.log('作用和beforeDestroy一样')
  }