Vue生命周期

发表于 | 分类于
字数统计: 873

所谓“生命周期”，是指实例对象从构造函数开始执行（被创建）到被GC（Garbage Collection，垃圾回收）回收销毁的整个存在时期，在生命周期中被自动调用的函数叫作生命周期函数，也被形象地称为生命周期钩子函数。

可以利用不同时期的钩子函数去完成不同的操作。例如需要在某个时期去获取后台数据、在某个时期去更新数据等。利用生命周期钩子函数可以精准定位到某个时期去完成一些特定的事情。

  1. beforeCreate：在实例开始初始化时同步调用，在组件实例刚被创建的时候增加一些loading事件。此时数据观测、事件等都尚未初始化。data不可见
  2. created：在实例创建之后调用。此时已完成数据观测、属性和方法的运算，watch/event事件回调。但尚未开始DOM编译，即未挂载到document中。$el属性不可见
  3. beforeMount：在mounted之前运行。相关render函数首次被调用
  4. mounted：在编译结束时调用。此时所有指令已生效，数据变化已能触发DOM更新，但不保证$el已插入文档。
  5. beforeUpdate：在实例挂载之后，再次更新实例（如更新data）时会调用该方法，此时尚未更新DOM结构。
  6. updated：在实例挂载之后，再次更新实例并更新完DOM结构后调用。注意监听的是DOM而不是数据。该钩子在服务器端渲染时不会被调用
  7. beforeDestroy：在开始销毁实例时调用，此刻实例仍然有效。该钩子在服务器端渲染时不会被调用
  8. destroyed：在实例被销毁之后调用。此时所有绑定和实例指令都已经解绑，子实例也被销毁。该钩子在服务器端渲染时不会被调用
  9. activated：需要配合动态组件keep-live属性使用。在动态组件初始化渲染的过程中调用该方法。
  10. deactivated：需要配合动态组件keep-live属性使用。在动态组件初始化移出的过程中调用该方法。

后两张的运用例子

可以用来进行缓存优化，避免重复加载。

另外还有两个钩子函数beforeRouteEnter和beforeRouteLeave可以配合路由切换使用。

有一点需要注意，在Vue 2.0中，mounted钩子触发时并不保证元素已经被添加到DOM上。如果想保证元素已经被添加，可以调用Vue.nextTick()方法（也可以通过this.$nextTick()调用）并传入一个回调函数，在回调函数中添加需要在元素被添加到DOM之后运行的代码。

通过以上分析总结Vue生命周期在真实场景下的业务应用如下

created：进行AJAX请求异步数据的获取、初始化数据。

1
2
3
4
5
6
created() {
    fetch('url')
    .then(function(response) {
        console.log(response)
    })
}

mounted：挂载元素内DOM节点的获取。可以发起后端请求，取回数据，接收页面之间传递的参数、由子组件向父组件传递参数等。

nextTick：针对单一事件更新数据后立即操作DOM。

updated：数据更新的统一业务逻辑处理。

watch：监听具体数据变化，并做相应的处理。


最后一个应该是beforeDestroy