Vuejs011---vuejs 对象的生命周期

一:生命周期简介

生命周期是指 Vuejs 对象从创建到销毁的全过程。
Vuejs011---vuejs 对象的生命周期_第1张图片

1.各个阶段详解:

生命周期 1:创建阶段
Vuejs011---vuejs 对象的生命周期_第2张图片

1. new Vue() : 执行代码 var vm = new Vue({}), 表示创建一个 Vue 对象(实例)。
2. Init(Events&Lifecycle) : 执行完以上代码后步入到对象初始化的前期阶段,表示通过以上代码我们创建了 Vuejs 对象,此时,在新建的对象身上,具备了一些生命周期相关的函数(生命周期的钩子函数)和默认的事件,但是其他的相关的组件还没有被创建(data methods、 filter 等等都没有被创建出来)。 执行 Init Events&Lifecycle )之后,钩子函数都被创建出来,马上调用生命周期函数 beforeCreate ,在该函数执行的时候,我们最常使用的组件 data methods 等,都还没有被创建出来。
3. Init(injections&reactivity) : 该阶段是对象初始化的后期阶段。执行Init(injections&reactivity)的方式是调用生命周期函数 created 。在该函数中,data methods 都已经被初始化好了。也就是说,如果要使用 methods 中的方法,或者是操作 data 中的数据,最早可以在 created 方法中来进行操作。

Vuejs011---vuejs 对象的生命周期_第3张图片

4. Init 对象初始化阶段执行完毕后 ,通过对元素以及模板进行判断,系统开始编辑模板,将 Vue 代码中的指令进行执行,然后在内存中生成一个编辑好的模板字符串,最终将该模板字符串渲染为内存中的DOM。但是此时集锦只是在内存中渲染好了模板,并没有将模板挂载到页面中去。该阶段执行完毕后,执行 beforeMount 方法。
5. Create vm :该阶段是将内存中编译好的模板,替换到浏览器的页面中。该阶段执行完毕后,执行 mounted 方法。只要执行完了 mounted方法,就表示整个 Vue 对象已经初始化完毕了,此时正式脱离创建阶段进入到运行阶段。如果要通过某些插件操作页面上的 DOM 节点,最早是要在 mounted 中进行。

生命周期 2:对象运行阶段

Vuejs011---vuejs 对象的生命周期_第4张图片

6. Virtual DOM : 该阶段会根据 data 中的最新数据,重新渲染出一份最新的 DOM 树,当最新的内存 DOM 树被更新了之后,会把最新的 DOM树重新渲染到页面中去,这时候就完成了使用模型Model 去渲染视图View 的过程。 该阶段的执行会使用到两个函数beforeUpdate updated, 这两个函数会根据 data 数据的变化,可重复的执行多次。 当 beforeUpdate 方法执行的时候,页面中的显示还是以前的数据,但是 data 中保存的是更新后的新数据,页面此时还没有和最新的数据 保持同步。
updated 函数执行的时候,页面和 data 数据已经保持同步了,都是最新的数据了。
生命周期 3:对象销毁阶段

Vuejs011---vuejs 对象的生命周期_第5张图片

7.Teardown(拆卸),该阶段为对象销毁的阶段,当对象实例运行完毕后,如果达到了对象销毁的条件,执行 beforDestroy 函数,该函数的执行正式标志着对象从运行阶段进入到了销毁的段。

beforDestroy 函数执行的时候,对象身上所有的组件 data methods 、filter、 directive 等组件都还处于可用状态(因为对象只是步入到了销毁的阶段,还没有销毁),该函数执行完毕后,对象正式销毁。
8. Destroyed : 该阶段为对象销毁后的阶段。该阶段会执行 destroyed 函数,当该函数执行的时候,对象已经被销毁了,里面的 data methods等相应的组件也不能使用了。
以上生命周期中使用的所有的函数,就是 Vuejs 生命周期中最重要的
钩子函数。

3. Vuejs 生命周期中的钩子函数解析

创建阶段(4个钩子函数)

beforeCreate
Vuejs011---vuejs 对象的生命周期_第6张图片

 

created
Vuejs011---vuejs 对象的生命周期_第7张图片

beforeMount
Vuejs011---vuejs 对象的生命周期_第8张图片

 

mounted
Vuejs011---vuejs 对象的生命周期_第9张图片

 

对象运行阶段(2个钩子函数)
beforeUpdate
Vuejs011---vuejs 对象的生命周期_第10张图片

 

updated
Vuejs011---vuejs 对象的生命周期_第11张图片

 

对象销毁阶段(2个钩子函数)
beforeDestroy

 

destroyed

 

你可能感兴趣的:(前端框架,Vue.js,vue.js,vue.js的生命周期)