Vue2.0知识点大汇总|【Vue生命周期详解】 javascript|前端|前端框架|vue.js

细谈Vue声明周期

什么是生命周期？
- Vue的生命周期
- beforeCreate( 创建前 )：
- created ( 创建后）：
- beforeMount：
- mounted：
- beforeUpdate：
- updated：
- beforeDestroy：
- destroyed：

什么是生命周期？生命周期（Life Cycle）的概念应用很广泛，特别是在政治、经济、环境、技术、社会等诸多领域经常出现，其基本涵义可以通俗地理解为“从摇篮到坟墓”（Cradle-to-Grave）的整个过程。对于某个产品而言，就是从自然中来回到自然中去的全过程，也就是既包括制造产品所需要的原材料的采集、加工等生产过程，也包括产品贮存、运输等流通过程，还包括产品的使用过程以及产品报废或处置等废弃回到自然过程，这个过程构成了一个完整的产品的生命周期。
Vue的生命周期在面向对象的语言中，存在这个概念，就是说：变量，对象，等，在定义了之后，可以进行相关的操作，但是，有可能在某种条件下他们就不需要了，这个时候就可以进行销毁，析构函数，起的就是销毁一个对象，目的是回收一部分内存，这就和人的“生命周期”是一样的，这个变量和或对象就不存在了！
Vue实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，我们成为Vue 实例的生命周期，钩子就是在某个阶段给你一个做某些处理的机会。
下例图展示了Vue的生命周期：

文章图片

在Vue的生命周期中，可分为四部分八个函数，分别是创建（beforeCreate（），created （）），挂载（beforeMount（），mounted（）），更新（beforeUpdate（），updated（）），销毁（beforeDestroy（），destroyed（）），通常我们把这八个钩子归为四个模块，也就是上面说的四块流程。
beforeCreate( 创建前 )： 作用：在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。
在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，实例完全被创建出来之前，vue 实例的挂载元素$el和数据对象 data 都为 undefined，还未初始化。因此无法访问methods， data， computed等上的方法和数据
注意：此时的el还没有被加载。
created ( 创建后）：在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。
beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。（render（）----虚拟DOM），vue 实例的 $el 和 data 都已初始化，挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。data.message 未替换。
注意：该钩子在服务器端渲染期间不被调用。
mounted：实例被挂载后调用，这时 el 被新创建的vm.$ el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$ el 也在文档内。
*注意：注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick： *
该钩子在服务器端渲染期间不被调用
beforeUpdate：当 data 变化时，会触发beforeUpdate方法。data 数据尚未和最新的数据保持同步。
该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务器端进行
updated：在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
注意，updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等到整个视图都渲染完毕，可以在 updated 里使用 vm.$nextTick：
beforeDestroy：当实例销毁之前调用。在这一步，实例仍然完全可用。
this还可以获取到实例
该钩子在服务器端渲染期间不被调用
destroyed：实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
该钩子在服务器端渲染期间不被调用
【Vue2.0知识点大汇总|【Vue生命周期详解】】参考Vue API官网