• 一个案例带你走完Vue的生命周期


    八种生命周期

    Vue的生命周期一直都是Vue的重点,下面就是Vue的生命周期图示:

    请添加图片描述

    作为一名初学者,你可能还并不能完全理解该图,但不要着急,我会通过一个小例子,带你了解Vue的生命周期这一整个过程。

    <body>
      <div class="app">
        <button @click="username='xw'">激活update</button>
        {{username}}:{{list}}
      </div>
    </body>
    
    <script src="./js/vue.js"></script>
    <script>
    
      var app = new Vue({
        el: '.app',
        data: {
          username: "抗争的小青年"
        },
        beforeCreate() {
          console.log(`beforecate:${this.username}`);
          console.log(`beforecate:${this.$el}`);
        },
    
        created() {
    
          this.list = "aaa"
          console.log(`created: ${this.username}`);
          console.log(`created: ${this.$el}`);
        },
        beforeMount() {
          console.log(this.$el);
        },
        mounted() {
          console.log(this.$el);
        },
        beforeUpdate() {
          console.log(this.$el);
        },
        updated() {
          console.log(this.$el);
        }
    
      })
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    你可能注意到在上面的例子中,我用到了8个钩子函数中的6个。另外两个会在另外一个例子中体现。

    🌴beforeCreate

    这是创建实例之前执行的钩子函数,此时你访问Vue实例中的属性时,输出undefined

    Snipaste_2022-08-02_20-12-14

    🌴created

    这是实例创建完成的钩子函数,此时Vue实例中的状态已经可以访问,但页面还没有开始渲染。

    Snipaste_2022-08-02_20-15-19

    在这个阶段,我使用this.list = "aaa",创建了一个list,但是请注意,它是无法响应式的,因为数据绑定是指定Vue实例创建之前就存在的状态。我们在created阶段添加的属性没有挂载拦截器,所以无法响应式。

    🌴beforeMount

    此时编译渲染el的模板,并转成HTML。但注意,此时数据还没有渲染,Vue一些语法还没有起作用。

    🌴mounted

    此时页面的基本DOM就渲染完成了。在一般的开发中,我们可以在此步发送Ajax请求,或者使用相关插件。但是请注意,这个事件只执行一次。

    Snipaste_2022-08-02_20-32-14

    🌴beforeUpdate

    当Vue的状态发生改变时,就会触发Update,这也就意味着我们之前在created阶段添加的list属性的修改不会触发Update。可重复执行

    🌴updated

    这是更新后的钩子事件。可重复执行

    Snipaste_2022-08-02_20-40-46

    此时你尝试着修改list的值,你会发现不会触发此钩子函数

    Snipaste_2022-08-02_20-42-15

    🌲beforeDestroy

    销毁实例前,此时该组件相关的子组件,监听事件等还没有删除。

    🌲destroyed

    vue实例销毁后

    生命周期图示

    这里是我整理的生命周期图示,可供参考

    Snipaste_2022-08-02_19-33-22

    总结

    生命周期描述使用频率
    beforeCreate初始化事件,没有对事件进行处理很少
    create完成了状态的初始化,注入响应式。可以初始化状态(但无法实现数据驱动,响应式),挂载属性到当前的实例上。-
    beforeMount完成了Vue实例的创建,但并没有实例化DOM节点-
    mounted实例化了DOM节点,拿到真实的DOM节点。发送ajax请求,使用插件(依赖DOM节点),比如swiper。-
    beforeUpdate状态更新前,获取旧的DOM节点(重复无限次)-
    updated状态更新后,获取新的DOM节点(重复无限次)-
    beforeDestroy销毁前-
    destroyed销毁后,清除定时器-
  • 相关阅读:
    mysql索引
    APS自动排产 — 排产结果拉动物料需求计划
    二蛋赠书八期:《Java物联网、人工智能和区块链编程实战》
    java(HashSet类)
    网络安全-零基础小白自学要点
    最大流的算法 Algorithm for Maximum Flow
    接口(接口相关含义,区别抽象类,接口回调)
    强引用、软引用、弱引用、幻象引用有什么区别?
    sync.Once机制详细分析及避坑之道
    网页构造与源代码
  • 原文地址:https://blog.csdn.net/liyuchenii/article/details/126130144