浅谈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

  <div id="app">
    <h3 id="myh3">{{ msg }}</h3>
    <button @click="msg='我是点击后,更新的数据'">cahngeMsg</button>
  </div>

  <script>
    let data = {
      msg: "123"
    }
    let methods = {
      show() {
        console.log("我是show方法");
      }
    }
    const vm = new Vue({
      el: "#app",
      data,
      methods,
      beforeCreate() { //创建前 => 这时候vm这个Vue实例对象中的data和methods中的数据还未初始化!
        // console.log(this.msg); //undefined
        // console.log(this.show()); // this.show is not a function
      },
      created() { //创建后 => 这时候vm这个Vue实例对象中的data和methods中的数据已经初始化完成了!
        console.log(this.msg); //123
        console.log(this.show()); // 我是show方法 还有undefined(函数没有返回值)
      },
      beforeMount() { //挂载前 => 这时候Vue实例中已经编译好页面模板了,保存在内存之中,但是没有挂载到页面之上
        var h3Txtx = document.querySelector("#myh3").innerHTML;
        console.log(h3Txtx); //{{ msg }}
      },
      mounted() { //挂载后 => 这时候Vue实例中已经把编译好的模板,挂载到页面之上,不再是插值表达式了! 
        // 因此在这边操作DOM元素,使用第三方插件的时候,也是在这边使用比较合适
        var h3Txtx = document.querySelector("#myh3").innerHTML;
        console.log(h3Txtx); // 123
      },
      beforeUpdate() { //运行阶段开启 数据更新前 => 得到的页面数据,还是旧的,但是data实际上已经更新了
        var h3Txt = document.querySelector("#myh3").innerHTML
        console.log(h3Txt); //123
      },
      updated() { //数据更新后 => 得到的页面是最新的data渲染的页面!
        var h3Txt = document.querySelector("#myh3").innerHTML
        console.log(h3Txt); //我是点击后,更新的数据
      }
    })
  </script>
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页