详解Vue的生命周期

详解Vue的生命周期

• 生命周期是指一个组件从创建->运行->销毁的整个阶段 ，强调的是一个时间段

​ 而vue内置的的生命周期函数，会伴随着组件的生命周期门自动按次序执行

​

• 组件创建阶段

  beforeCreate()//1.初始化事件和生命周期。但是props/data/methods都尚未被创建
                   //此时组件还不能有什么具体作用
  create()   // 2. 初始化props/data/methods，都处于可用状态、但是组件的html模板不可用
                 //一般在这个阶段发起axios请求,不能操作dom
  beforeMount() //3.基于数据和模板，在内存中编译生成HTML结构，但是没有在浏览器中渲染
                  //也可以在这里发异步请求，但不推荐
  mount()  //4.将内存中编译生成的HTML结构，替换到el对象指定的dom元素
               //第一次最早可以在这里操作dom元素
  

  ||

• 组件运行阶段

  beforeUpdate() //当数据将要发生变化的时候触发，此时的data里面的数据是最新的，但是还没渲染到页面上
  update() //已经根据最新的数据渲染好页面了，要操作最新的dom结构要在这里
  

  ||

• 组件销毁阶段

  beforeDestory() //将要销毁但是还没有销毁
  destory() //完全销毁
  

  官网的生命周期函数图