细谈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 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

该钩子在服务器端渲染期间不被调用

参考Vue API官网

【Vue生命周期详解】相关推荐

vue 生命周期详解（附代码）
一. vue的生命周期是什么 vue每个组件都是独立的,都有自己的生命周期,从一个组件创建.数据初始化.挂载.更新.销毁,就是一个组件的生命周期. 一个组件首次加载时,也就只执行创建.数据初始化到挂 ...
vue 生命周期详解
详解Vue Lifecycle 先来看看vue官网对vue生命周期的介绍 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称 ...
1.vue生命周期详解(2020.12.05)
vue生命周期,直接上官方图补一下引用vue的链接( src = "https://cdn.bootcss.com/vue/2.4.2/vue.js) 要明确生命周期,我们必须从钩子下手: ...
Vue系列之vue生命周期详解
文章の目录 1.什么是 vue 生命周期 2.生命周期钩子函数 2.1.beforeCreate(创建前) 2.2.created(创建后) 2.3.beforeMount(挂载前) 2.4.moun ...
Vue生命周期详解(图解)
程序员学习必备书籍推荐: 首先我们对Vue生命周期官方给出的图进行详细解释 vue生命周期详细图解什么是生命周期? 简而言之:从生到死的过程,从Vue实例创建-运行-销毁的过程 Vue实例有一个完整 ...
【Vue】 Vue生命周期详解
每一个vue实例从创建到销毁的过程,就是这个vue实例的生命周期.在这个过程中,它经历了从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程. 通过这张流程图已经可以清晰的 ...
Vue生命周期详解对应代码解析
-使用GitHub阅览对于Vue的实例,比如 const app = new Vue({...}) 浏览器解析到这段代码的时候,自动执行beforeCreate => created => ...
vue生命周期详解、钩子函数的调用（简单易懂）
定义:vue的生命周期是指vue实例从初始化创建到实例销毁的过程.期间会有8个钩子函数的调用. vue的钩子函数图解: vue的钩子函数使用总结: 1.beforeCreate(创建前):before ...
【vue】vue中axios的使用及vue生命周期详解_07
目录一. axios请求二. 生命周期

【Vue生命周期详解】

细谈Vue声明周期

什么是生命周期？

Vue的生命周期

beforeCreate( 创建前 )：

created ( 创建后）：

beforeMount：

mounted：

beforeUpdate：

updated：

beforeDestroy：

destroyed：

【Vue生命周期详解】相关推荐

最新文章

热门文章

【Vue生命周期详解】

细谈Vue声明周期

什么是生命周期？

Vue的生命周期

beforeCreate( 创建前 )：

created ( 创建后 ）：

beforeMount：

mounted：

beforeUpdate：

updated：

beforeDestroy：

destroyed：

【Vue生命周期详解】相关推荐

最新文章

热门文章

created ( 创建后）：