Vue 生命周期

 官方定义：

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会

 

我们在写组件的时候会遇到一些问题，比如想让页面加载好了之后开启一个定时器，比如想页面初始化的时候就能请求一些后端数据渲染到页面中，之前的方法都需要有触发才能执行

vue的实例从开始到结束有着不同的生命阶段，组成了vue的生命周期

beforeCreate页面初始化之前

官方介绍：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用

这个阶段指的是数据初始化前调用，访问不到data或者methods方法等等

<script>
  export default {
    data(){
      return {
        a: 100
      }
    },
    methods:{
      add() {
        this.a++
      }
    },
    beforeCreate() {
      console.log("我是beforeCreate",this.a,this.add)
    }
  }
</script>

这个生命周期钩子不常用，使用实例外的方法辅助beforeCreate，比如可以创建一个loading，在页面初始化之前使用，当页面数据加载完了之后再溢出

created页面初始化

官方解释：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用

created指的是页面初始化完成，当生命周期完成的时候会遍历data中所有的属性，给每个属性添加对应的getter和setter方法，将data中的属性变成可响应式

created可以获取页面的初始化数据和方法

created() {
  console.log('我是created',this.a,this.add)
}

但是并不能获取页面的节点

created() {
  console.log('我是created',this.$el)
}

在这个生命周期函数中我们可以初始化页面的数据，数据量不能很大，否则会造成页面长时间的白屏

​​​​​​​beforeMount页面挂载之前

官方解释：在挂载开始之前被调用：相关的 render 函数首次被调用

这个阶段是模板与数据进行结合，但是还没有挂载到页面上，因此我们可以在当前的生命周期中进行最后的数据修改

在这个阶段我们还是不能获取到$el

beforeMount() {
  console.log('我是beforeMount',this.$el)
}

在这阶段可以进行一些手动移除事件，获取进行进一步的数据操作

mounted页面挂载后

官方解释：实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内

在这个生命周期中，将数据和模板结合完之后挂载到DOM中，因此我们能够在当前的生命周期中获取真实的DOM元素

mounted() {
  console.log('我是mounted',this.$el)
}

在这个阶段我们也是可以进行数据的初始化请求，非服务端渲染，需要注意的是服务端渲染是不支持beforeMount和mounted这两个生命周期的

还可以进行对数据的初始化操作

 

大概百度了一下  

服务端渲染

服务端渲染在很早的时候就有了，可以追溯到 ASP、JSP 的时代，就是在后端返回一个静态页面给浏览器，由浏览器直接显示。 

但是在 React 以及 nodejs 普及之后，开始出现同构渲染，简单来说就是在服务端渲染前端组件然后返回给浏览器显示。 

作者：前端大课堂
链接：https://www.jianshu.com/p/ce27060ee881
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

beforeUpdate页面更新前

官方解释：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

在这个生命周期中数据已经完成了更新，相应的dom也完成数据的更新，但是没有页面虚拟DOM没有完成打补丁操作

beforeUpdate() {
  console.log(this.a)
  console.log(this.$el)
  console.log("我是beforeUpdate")
}

在这个生命周期中，我们可以使用对更新前的数据进行最后一步的操作，在这个生命周期中对数据的更新不会再次触发视图的渲染，获取进行手动移除事件监听

在这个生命周期中是可以完成对数据的更新的，不会死循环

​​​​​​​updated页面更新后

官方解释：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子，当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

在这个生命周期中是千万不能进行对页面数据的更新，否则会引起死循环

updated() {

  this.a++

  console.log('我是updated')

}

 

上面代码的写法是错误的，会引起页面的死循环

使用这个生命周期，不要触发视图变化，可以依赖DOM的更新进行一些操作

​​​​​​​beforeDestroy

官方解释：实例销毁之前调用。在这一步，实例仍然完全可用

使用场景，当我们页面中有定时器等等，此时我们可以通过beforeDestroy进行移除​​​​​​​

destroyed

官方解释：实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁

使用场景，当页面销毁后我们可以进行页面路由的跳转，也可以拦截之前没有移除的定时器任务等等

 

补充知识点

this.$destroy()是vue的方法，调用这个方法当前的实例将会被销毁，手动销毁方法

Vue生命周期  官方图