浅谈Vue之生命周期

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

目录

    • 生命周期

      • 创建阶段

      • 运行阶段

      • 销毁阶段

      • 常用的生命周期函数

生命周期

  • 概念：生命周期，就似乎人的一生，出生下来，由哺乳期到孩童，慢慢成长到青年，中年，老年，最后落叶归根，化为尘埃！ 而Vue实例也是存在一个生命周期，从创建前，创建后，挂载前，挂载后，（按需更新前，更新后），最后销毁前，销毁后，化为虚无！也就是vue实例走向生命的尽头！

  • 官网： 链接: link

  • Vue实例的阶段：主要分为3个阶段，创建实例，使用实例，销毁实例

  • 在这些阶段之间的处理函数，称之为生命周期函数（钩子函数）！

创建阶段

  • new Vue() 00=> init(Event) 01=> init(injections注射) 02=> Has “el” options

    • 在00，01这个阶段之中，data数据和mthods中方法是还没初始化好
      01这边伴随着一个生命周期函数 => beforeCreate()

    • 在02这个阶段之中，data数据和methods中的方式以及注入到vue实例对象之内，因此可以访问！
      02这边伴随着一个 created()函数

  • 结论：需要使用data和methods等中的方法或者数据，最早只能在created生命周期！

  • Has “el” options => Compile els outerHTML as template 这一个阶段

    • 主要是Vue正在编译页面模板，这个阶段结束后，在浏览器内存之中有着页面模板，但这只是在浏览器内存之中，没有渲染到页面之上，因此页面是空白的！

  • 当创建好页面模板，存在于内存的时候，那么立即执行 beforeMount钩子函数（mount (挂载)） => 这时候html尚未挂载在页面之上！

    • 结论 ： beforeMount钩子函数中的页面上的DOM元素还是原始的插值表达式 {{}}

  • Create vm($el) and replace “el” with it => 这是创建一个vm实例中所需要挂载的html代码（视图） 并且把之前的插值表达式代码替换掉！

    这个执行结束后，就进入到mounted(已挂载) => 已挂载钩子函数

  • 结论：想要得到把数据渲染到页面之上，最早是在mounted这个钩子函数之中！

  • Create vm($el) and replace “el” with it => Mounted

    在两者之间会触发这个钩子函数：mounted => 已挂载，也就是说vue实例对象中的html代码已经挂载在页面上了，页面不再是插值表达式！

    • 结论：既然页面挂载好了，那么就可以操作页面中的DOM元素了，因此使用第三方插件的时候，最好是在这边使用即可！

注意点：当mounted钩子函数执行完毕后，也就是代表着Vue的整个创建阶段结束，页面已经挂载了视图，显示了数据！ 进入到运行Vue实例阶段

注意点2：创建阶段，一个vm实例一生只执行一次！

运行阶段

运行阶段的流程1：

  • 01：先拿到data数据

  • 02：data数据 结合el所挂载的元素 在内存之中形成一个渲染好的DOM树 因此渲染的DOM树只是存储在内存之中，还未渲染到页面上

    • 所谓DOM树：就是html 分支到head和body 然后head和body又有着分支，仿佛一个大树从主枝干开支散花！

  • 03：把 渲染好的DOM 结合el 所挂载的容器，渲染到页面之上！

    结论：运行阶段，就是根据最新的数据，更新页面！

运行阶段的流程之钩子函数：

  • 01: Mounted =>(when data changes) 1=> DOM re-render and patch (patch - 挂载！)

    • 1触发 beforeUpdate 钩子函数（更新数据前）

    • 这个钩子函数的特点：就是拿到的页面中的数据是旧的，但是实际上data中的数据已经更新，也就是说，数据和页面不同步，需要后面执行，先拿到最新数据，然后根据el挂载 渲染最新的页面！

  • 02: DOM re-render and patch 2=> Mounted

    • 2触发 updated（更新后钩子函数） 拿到最新的data，根据el挂载的元素，渲染出最新的页面

    • 结论：页面和data是同步的！

注意点：在运行阶段，一个vm实例一生，按需执行0次到多次

销毁阶段

  • 01：Mounted => when vm.$destroy() is called 1=> Teardown Watchers 。。。 (销毁实例过程！)

    • 1所触发的钩子函数 beforeDestroy(销毁前钩子函数) => 这时候vm实例还是可以正常使用的，还没开始销毁这个实例！

  • 02：Teardown Watchers 。。。 (销毁实例过程！) => Destroy 2=>

    • 2所触发的钩子函数 destroyed(以销毁钩子函数) => 这时候cm实例已经被销毁了，不能在使用vm实例了！

注意点：销毁阶段，一个vm实例一生只执行1次！

常用的生命周期函数

  • ：created => 创建后 Vue实例已经初始化了，可以操作data或者methods中的数据了或者方法！

  • ：mounted => 挂载后 Vue实例已经把模板挂载到页面了，这时候是真正的页面，可以操作DOM元素了，第三方插件也是在这边初始化使用的！

vue第一次页面加载会触发哪几个钩子函数？

beforeCreate、created、beforeMount、mounted

以上是 浅谈Vue之生命周期 的全部内容， 来源链接： utcz.com/z/375917.html

回到顶部