VUE生命周期（vue2.x）

YYHCOPPOLO
179 阅读4分钟

随便写写当自己的复习文档，大家随便看看就好啦。（内容来源为自己看过的视频和文档结合成的笔记）。

以下为vue生命周期图，来自于vue官方网站。

生命周期1：创建阶段

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方法中进行操作。

4、Init对象初始化阶段执行完毕后，通过对元素以及模板进行判断，系统开始编辑模板，将Vue代码中的指令进行执行，然后在内存中生成一个编辑好的模板字符串，然后将该模板字符串渲染为内存中 的DOM。

TIPS：此时只是在内存中渲染好了模板，并没有将模板挂载到页面中去。以上操作执行完毕后，执行beforeMount方法。

5、Create vm

  • 该阶段是将内存中编译好的模板，替换到浏览器的页面中。

  • 该阶段执行完毕后，执行mounted方法。

  • 只要执行完mounted方法后，表示整个Vue对象已经初始化完毕。此时正式脱离创建阶段，进入运行阶段。

  • 若要通过某些插件操作页面上的DOM节点，最早要在mounted中执行。

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

6、Virtual DOM

  • 该阶段会根据data中的最新数据，重新渲染出一份最新的DOM树。

  • 当最新的内存 DOM树被更新了之后，会把最新的DOM树重新渲染到页面中去，这时候就完成了使用模型Model去渲染视图View的过程。

  • 该阶段的执行会使用到两个函数：beforeUpdate和updated。这两个函数会根据data数据的变化，可重复的执行多次。

  • 当beforeUpdate方法执行的时候，页面中的显示还是以前的数据，但是data中保存着更新后的数据，页面此时还没有和最新的数据同步。

生命周期3：对象销毁阶段

7、Teardown(拆卸)

  • 该阶段为对象销毁阶段

  • 当对象实例运行完毕后，如果达到了对象销毁的条件，执行beforeDestroy函数。

  • beforeDestroy函数的执行标志着对象从运行阶段进入了销毁阶段

  • 当beforeDestroy函数执行的时候，对象身上所有的组件data、methods、filter、directive等组件还处于可用状态（对象步入销毁阶段，没有正式销毁）

  • beforeDestroy函数执行完毕后，对象正式销毁

8、Destroyed

  • 该阶段为对象销毁后的阶段，该阶段会执行destroyed函数。

  • 当该函数执行的时候，对象已经被销毁了，里面的data等组件也不能使用了。

以上函数为Vue生命周期中最重要的钩子函数

钩子函数

vue对象初始化过程中，会执行到beforeCreate,created,beforeMount,mounted 这几个钩子的内容

  • beforeCreate ：数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象

  • created ：数据已经绑定到了对象实例，但是还没有挂载对象

  • beforeMount: 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的el属性，el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创 建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点

  • mounted:将el的内容挂载到了el，相当于我们在jquery执行了(el).html(el),生成页面上真正的dom，上面我们 就会发现dom的元素和我们el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并 进 行各种操作

  • 当我们的data发生改变时，会调用beforeUpdate和updated方法

    • beforeUpdate ：数据更新到dom之前，我们可以看到$el对象已经修改，但是我们页面上dom的数据还 没有发生改变

    • updated: dom结构会通过虚拟dom的原则，找到需要更新页面dom结构的最小路径，将改变更新到 dom上面，完成更新

    beforeDestroy,destroed :实例的销毁，vue实例还是存在的，只是解绑了事件的监听还有watcher对象数据 与view的绑定，即数据驱动

avatar
文章
阅读
粉丝