vue必须了解的生命周期

vue生命周期图

什么是Vue生命周期
Vue实例对象从创建到销毁的过程,就是生命周期。从开始创建、初始化数 据、编译模板、挂载DMO–>渲染、更新—>渲染、销毁等一系列过程,称之为Vue的生命周期

首先,每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。首先看一张图吧(有标记),相信大家一定都会很熟悉

1、通过var vm = new Vue({})创建一个vue实例对象vm
2、初始化事件: 这里只有一些默认的生命周期函数和默认的事件,其他的都还没有创建
3、beforeCreate执行时,data和methods都还没有初始化
4、开始初始化data和methods。
5、created执行时,data和methods都已经存在了,但是还没有挂载到界面去。
6、红框中的内容表示Vue开始编辑模板,把Vue代码中的那些指令进行执行,最终,在内存中生成一个编译好的最终的模板字符串对象,然后把这个字符串对象,渲染为内存中的DOM,此时,只是在内存中渲染好了模板,并没有把模板挂载到真正的页面中去 。
7、beforeMount函数执行时,模板已经在内存中编译好了,但尚未挂载到页面中去,此时,页面还是旧的
8、将内存中编译好的模板,真实的替换到浏览器的页面中去
9、mounted是在页面加载完成后执行的函数,如果要操作页面上的DOM节点,最早是在mounted中进行
10、执行完了mounted,就表示整个Vue实例对象已经初始化完毕了,此时组件已经脱离创建阶段,进入运行阶段。
11、绿框中是组件的运行阶段, 运行阶段的声明周期函数只有两个:beforeUpdataupdated,这两个事件会根据data数据的改变,有选择的触发零到多次
12、当执行完beforeUpdate时,页面中显示的数据还是旧的,此时data中的数据是最新的,页面数据还没有和data中最新数据同步
13、这一步,先根据data中最新的数据,在内存中,重新渲染出一份最新的内存DOM数,当内存DOM数被更新之后,会把最新的内存DOM树,重新渲染到真实的页面当中,这是,就完成数据从data(model层)->view(视图层)的更新
14、updated执行时,页面和data数据已经保持同步,都是最新的
15、当执行beforeDestroy函数时,销毁了VM和V层之间数据和方法(关系)的绑定。组件中所有data、methods、以及过滤器,指令等,都处于可用状态,
16、当执行destroyed函数时,组件已经被销毁,此时组件中所有data、methods、以及过滤器,指令等,都已经不可用了

需要发送数据请求的话,一般是选择在 createdmounted这两个阶段

第一次加载页面会 触发 beforeCreate, created, beforeMount, mounted这四个钩子

Vue生命周期的作用是什么?
它的生命周期中有多个时间钩子,让我们在控制整个VUe实例的过程时更容易形成好的逻辑

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页