精华内容
下载资源
问答
  • 2022-04-03 14:45:11

    vue生命周期函数



    简介

    生命周期函数也叫钩子函数,就是在某一条件下被自动触发的函数,它们和浏览器渲染过程挂钩。比如我想让某个网页一被加载出来就去向后端请求数据,不需要额外绑定一个监听事件,这个时候就可以使用生命周期函数。

    vue3中更新了生命周期函数的使用方法:vue3官方文档

    生命周期函数图示

    下面演示了各个钩子函数的触发时间:

    在这里插入图片描述

    • beforeCreate:vue实例的挂载元素el和数据对象data还没有初始化,还是一个undefined的一个状态。

    • created:这个时候Vue实例的数据对象data已经有了,可以访问里面的数据和方法,el还没有,也没有挂载dom

    • beforeMount:在这里Vue实例的元素el和数据对象都有了,只不过在挂载之前还是虚拟的dom节点。

    • mounted:Vue实例已经挂载在真实的dom节点上了,可以对dom进行操作来获取dom节点。

    • beforeUpdate:响应式数据更新时调用,发生在虚拟dom打补丁之前,适合在更新之前访问现有的dom,比如是手动移除已添加的时间监听器。

    • updated:虚拟dom重新渲染和打补丁之后调用,组成新的dom已经更新,避免在这个钩子函数种操作数据,防止死循环。

    • beforeDestory:Vue实例在销毁之前调用,在这里可以使用,通过this也能访问到实例,可以在这里对一些不用的定时器进行清除,解绑事件。

    • destoryed:vue销毁之后调用,调用之后所有的事件监听都会被移除,所有的实例都会被销毁。

    生命周期函数的使用

    Vue3生命周期在调用前需要先进行引入:

    import { reactive, toRefs, onMounted, onBeforeMount, onBeforeUpdate, onUpdated, } from "vue";
    

    并且vue3的生命周期函数在使用的时候一定要在 setup()中执行。

    比如我想在组件挂载之前和之后分别向控制台打印一段文字:

    <script>
      //引入生命周期函数 onMounted
    import  {onMounted, onBeforeMount}  from "vue";
    
    export default {
      name: "theContent",
      setup() {
        onBeforeMount(()=>{
            alert("onBeforeMount");
        });
        onMounted(()=>{
            alert("onMounted");
        });
      },
    };
    </script>
    
    更多相关内容
  • vue 生命周期函数

    2020-12-21 12:36:47
    讲述vuedemo生命周期函数
  • Vue生命周期函数

    千次阅读 2021-05-29 15:41:17
    生命周期函数就是vue实例在某一个时间点会自动执行的函数 当我们创建一个实例的时候,也就是我们调用 new Vue() 这句话的时候,vue会帮助我们去创建一个实例,创建过程其实并不像我们想的那么简单,他要经过很多的...

    目录

    1、常用生命周期函数

    1、beforeCreate

    2、created

    3、beforeMount

    4、mounted

    5、beforeDestroy,destroyed

    6、beforeUpdate,updated


    1、常用生命周期函数

    生命周期函数就是vue实例在某一个时间点会自动执行的函数

    当我们创建一个实例的时候,也就是我们调用 new Vue() 这句话的时候,vue会帮助我们去创建一个实例,创建过程其实并不像我们想的那么简单,他要经过很多的步骤

    Init(Events & Lifecycle):首先他会去初始化事件和生命周期相关的内容,当最基础的初始化完成的时候,在这个时间点上,vue会自动的帮我去之行一个函数,这个函数就是beforeCreate

    1、beforeCreate

    beforeCreate:既然beforeCreate被自动之行,那么beforeCreate就是一个生命周期函数

    var vm = new Vue({
      el:'#app',
      beforeCreate:function(){
        console.log('before create')
      }
    })

    我们发现这个在控制台被自动输出了,就是vue自动执行了beforeCreate这个函数,处理完这个函数,vue会继续调用一个写外部的注入,包括双向绑定的相关内容

    Init(injections & reactivity): 外部的注射,各种绑定的初始化,这部分初始化完成的时候,基本上vue实例的初始化操作都完成了,在这个结点上,又会有一个自动的函数被执行,这个函数的名字叫created

    2、created

    created:这也是一个生命周期函数,因为他完全符合生命周期函数的定义

     

    var vm = new Vue({
      el:'#app',
      beforeCreate:function(){
        console.log('before create')
      },
      created:function(){
        console.log('created')
      }
    })

    可以看到beforeCreate执行之后,created也被自动的执行了,继续看这张图

    Has 'el' options:是否有el这个选项

    Has 'template' optioins: 是否有template这个属性

      no->Compile el's outerHtml as template: 如果实例里面没有tempalte这个属性,会把外部el挂载点的html当作模板

      yes->Compile template into render functoin: 如果实例里面有tempalte,这个时候就会用template去渲染

    但是有了模板之后并没有直接渲染到页面上,在渲染之前,又自动到去执行了一个函数,这个函数是beforeMount

    3、beforeMount

    beforeMount:这个函数也是一个生命周期函数,也就是模板即将挂载到页面到一瞬间,beforeMount会被执行

    var vm = new Vue({
      el:'#app',
      template:'<h1>hello</h1>',
      beforeCreate:function(){
        console.log('before create')
      },
      created:function(){
        console.log('created')
      },
      beforeMount:function(){
        console.log('before mount')
      }
    })

    可以看到beforeMount被执行了,在beforeMount执行完成后

    Create vm.$el and replace 'el' width it: 模板结合数据会被挂载到页面上,当dom挂载到页面之上,这个时候又有一个生命周期函数被执行了

    4、mounted

    mounted:在beforeMount dom并没有渲染到页面上,在mounted dom已经被渲染到页面上了,这个时候可以做个实验

    <div id='app'>
      hello world  
    </div>
    
    <script>
      var vm = new Vue({
        el:'#app',
        template:'<h1>hello</h1>',
        beforeCreate:function(){
          console.log('before create')
        },
        created:function(){
          console.log('created')
        },
        beforeMount:function(){
          console.log(this.$el);
          console.log('before mount')
        },
        mounted:function(){
          console.log(this.$el);
          console.log('mounted')
        }
      })
    </script>

     

    看到在beforeMount输出当dom是<div id='app'>hello world</div>,在mounted输出的dom是<h1>hello</h1>这也印证了上面这张图的内容,在beforeMount的时候页面还没有被渲染,在mounted的时候页面已经被渲染完毕了

    5、beforeDestroy,destroyed

    beforeDestroy,destroyed:

    var vm = new Vue({
      el:'#app',  
      template:'<h1>hello</h1>',
      beforeCreate:function(){
        console.log('before create')
      },
      created:function(){
        console.log('created')
      },
      beforeMount:function(){
        console.log(this.$el);
        console.log('before mount')
      },
      mounted:function(){
        console.log(this.$el);
        console.log('mounted')
      },
      beforeDestroy:function(){
        console.log('beforeDestroy')
      },
      destroyed:function(){
        console.log('destroyed')
      }
    })

    刷新页面完毕,这个时候会发现beforeDestroy,destroyed并没有被触发,那什么时候被触发呢

    when vm.$destroy() is called:当destroy()这个方法被调用的时候会调用beforeDestroy,当全部销毁的时候,destroyed会被执行,那怎么让他执行呢,在控制台执行vm.$destroy()的时候会调用这两个函数,还没被销毁之前会调用beforeDestroy,已经被销毁后会调用destroyed这个函数

    6、beforeUpdate,updated

    beforeUpdate,updated:

    var vm = new Vue({
      el:'#app',
      template:'<h1>hello</h1>',
      beforeCreate:function(){
        console.log('before create')
      },
      created:function(){
        console.log('created')
      },
      beforeMount:function(){
        console.log(this.$el);
        console.log('before mount')
      },
      mounted:function(){
        console.log(this.$el);
        console.log('mounted')
      },
      beforeDestroy:function(){
        console.log('beforeDestroy')
      },
      destroyed:function(){
        console.log('destroyed')
      },
      beforeUpdate:function(){
        console.log('before updated')
      },
      updated:function(){
        console.log('updated')
      }
    })

    刷新页面看,发现这两个钩子函数其实并没有被执行,那为什么没有被执行呢,看图解释说是,when data changes,当数据发生改变的时候才会被执行

    beforeUpdate:数据发生改变,还没有被渲染之前,beforeUpdate会被执行

    updated:当数据重新渲染之后,updated这个生命周期函数会被执行

    参考链接:

    https://www.cnblogs.com/wzndkj/p/9612647.html

    https://www.bilibili.com/video/BV1H7411j7Mc

    展开全文
  • Vue生命周期函数详解

    千次阅读 2021-09-28 01:12:15
    下图是我对Vue生命周期函数图解的详细解释,应该很通俗易懂了吧,不懂也没关系,下面我会附上代码帮助小伙伴们更好地理解。 首先我们要知道,Vue生命周期函数分为三个阶段: 创建阶段 运行阶段 销毁阶段 1.创建...

    生命周期是什么

    生命周期(Life Cycle)的概念应用很广泛,特别是在政治、经济、环境、技术、社会等诸多领域经常出现,其基本涵义可以通俗地理解为“从摇篮到坟墓”(Cradle-to-Grave)的整个过程在Vue中实例从创建到销毁的过程就是生命周期,即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程我们可以把组件比喻成工厂里面的一条流水线,每个工人(生命周期)站在各自的岗位,当任务流转到工人身边的时候,工人就开始工作。

    生命周期有哪些

    Vue生命周期总共可以分为8个阶段:创建前后, 载入前后,更新前后,销毁前销毁后,以及一些特殊场景的生命周期,今天我们主要讲常使用的八个钩子函数
    生命周期 	描述beforeCreate 	组件实例被创建之初created 	组件实例已经完全创建beforeMount 	组件挂载之前mounted 	组件挂载到实例上去之后beforeUpdate 	组件数据发生变化,更新之前updated 	组件数据更新之后beforeDestroy 	组件实例销毁之前

    生命周期整体流程

    在这里插入图片描述

    接下来我们从以下三个阶段进行解读生命周期:

    • 创建阶段
    • 运行阶段
    • 销毁阶段

    1.创建阶段:

    创建Vue的实例对象,初始化。这时候该对象只有默认的一些周期函数和默认事件,其他东西还未创建。
    在这里插入图片描述

    实例初始化阶段主要有两个函数:

    • beforeCreate()
    • created()

    beforeCreate()

    在这里插入图片描述
    这里我们试着打印data中定义的msg和执行show方法。打开页面并查看控制台。
    在这里插入图片描述

    这里报错了,this.show is not a function,也就是不可使用,在beforeCreate 生命周期函数执行的时候,data和methods中的数据都没有初始化。

    created()

    接着我们执行遇到的第二个钩子函数created()。
    在这里插入图片描述
    同样,我们去查看页面和控制台。
    在这里插入图片描述
    在打印结果中,可以看到在created中,data和methods都已经被初始化好了。
    如果要调用methods中的方法,或者操作data中的数据,最早只能在created中操作。

    开始编译模板

    接下来我们进到生命周期函数中的开始编译模板:
    在这里插入图片描述

    这里表示Vue开始编译模板,
    把vue代码中的那些指令进行执行,最终在内存中生成个编译好的最终模板字符串然后把这个模板字符串,渲染成为内存中的DOM,此时,只是在内存中,渲染好了模板,并没有把模板挂载到真正的页面中去。

    挂载模板:

    开

    经过开始编译模板之后就进入了挂载模板,挂载阶段也分beforeMount和mounted两个钩子函数。

    beforeMount()

    这是遇到的第三个生命周期函数,表示模板已经在内存中编译完成了
    但是在尚未把模板渲染到页面中去,我们结合代码看,
    在这里插入图片描述
    这时候我们尝试把h3的内容渲染到页面中去,但是在页面和控制台中可以看到
    在这里插入图片描述
    这时候虽然在页面中可以显示“ok”字符了,但是在控制台中依然是{{ msg }}
    也就是说,在beforeMount 执行的时候,页面中的元素,还没有被真正替换过来,只是之前写的一些模板字符串。

    mounted()

    这是遇到的第四个生命周期函数,表示内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了。
    在这里插入图片描述在这里插入图片描述 这时候在页面中可以显示“ok”字符了,而且在控制台中也渲染为“ok”字符串了
    注意:mounted 是实例创建期间的最后一个生命周期函数,当执行完mounted 就表示 实例已经被完全创建好了,此时,如果没有其他操作的话,这个实例,就静静的躺在我们的内存中,一动不动。

    我们的创建阶段的生命周期函数已经完成了,也就是图中的圆形部分。
    在这里插入图片描述

    2.运行阶段

    接下来进入就是运行阶段,也就是下图部分:
    在这里插入图片描述

    运行阶段主要是两个钩子函数:

    • beforeUpdate()
    • updated()

    首先我们先看运行阶段中这俩事件
    在这里插入图片描述

    ①When data changes,意思是当data数据发生改变时
    ②beforeUpdate()该钩子函数会根据data数据的改变有选择性的触发0至多次

    beforeUpdate()

    为了更好的看到数据的改变,我们给msg数据进行监听,设置一个按钮,点击按钮时改变数据,将事先设好的“ok”改为“No”.
    在这里插入图片描述
    在这里插入图片描述这时候表示 我们的界面还没有被更新
    这时候我们需要思考一个问题:数据被更新了吗?
    数据肯定被更新了。界面没有被更新而已,但是数据data已经更新了。
    我们一起看看打印的结果把:
    在这里插入图片描述
    点击修改msg按钮后
    在这里插入图片描述得出结论:
    当执行beforeUpdate的时候,页面中显示的数据还是旧的,
    此时data数据是最新的,页面尚未和最新的数据保持同步

    updated()

    同样,我们在updated()钩子函数中执行上一步的操作
    在这里插入图片描述
    看看打印结果:
    在这里插入图片描述
    点击按钮后
    在这里插入图片描述
    这时候我们可以看到界面上元素的内容和data中msg的数据都是No
    也就是说updated事件执行的时候,页面和data数据已经保持同步了,都是最新的。

    经过上面两个钩子函数的操作,运行阶段的生命周期函数完成了:
    在这里插入图片描述
    最后就会进入到销毁阶段的生命周期函数:
    同样的他们也有两个钩子函数:

    • beforeDestory()
    • destoryed()
      销毁阶段的钩子函数我们了解就好了。

    beforeDestroy()

    当执行beforeDestoy钩子函数的时候,Vue已经从运行阶段进入到了销毁阶段;
    当执行beforeDestory的时候,实则身上所有的data和所有的methods,以及过滤器、指令等,都处于可用状态,此时还没有真正执行销毁的过程。

    destroyed()

    当执行到destoryed函数的时候,组件已经完全销毁了,此时,组件中所有的data、methods、指令、过滤器等,都已经不可用了。
    完全销毁一个实例。可清理它与其它实例的连接,解绑它的全部指令及事件监听器
    并不能清除DOM,仅仅销毁实例。

    经过代码的辅助理解,我们再回头看看整个图的过程,应该会更加清晰了吧。
    在这里插入图片描述

    Vue生命周期函数理解并不难,也是和代码一样至上而下执行,一步步执行。
    另外下面借鉴一位Up主:
    xuxinwen32
    给出的10个钩子函数的表格总结:
    在这里插入图片描述

    展开全文
  • 什么是Vue的生命周期? Vue生命周期函数有哪些?

    什么是Vue生命周期?

    Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模
    板、挂载 Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。

    Vue的生命周期函数有哪些?在各个阶段做的事是什么?

    四个周期八个函数

    创建阶段:

    beforeCreate(创建前):

    给实例化的Vue对象添加了属性和方法还有生命周期函数。

    created(创建后):

    把methods和data添加到Vue实例化对象上,所以在created周期内可以访问data和methods中的数据,在这个阶段我们一般发送网络请求获取数据。

    挂载阶段:

    beforeMount(挂载前):

    在DOM挂载页面进行data数据'预'处理

    mounted(挂载后):

    已经把DOM挂载到页面上了,是可以进行DOM元素操作的阶段了(可以理解为已经将虚拟DOM绘制到浏览器中------即为真实DOM)

    更新阶段:

     beforeUpdate(更新前):

    数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器,该钩子在服务器端渲染期间不被调用,因为只有初 次渲染会在服务端进行,这个阶段的数据会进行变更,DOM没有实际更新。

    updated(更新后):

    数据更新的DOM也已经产生在页面上了,可以继续访问

    销毁阶段

    beforeDestroy(销毁前):

    实例销毁之前调用。在这一步,实例仍然完全可用。该钩子在服务器端渲染期间不被调用。

    destroy(销毁后):

    Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件
    监听器会被移除,所有的子实例也会被销毁。

    组件缓存是什么?组件缓存有什么作用?组件缓存时出现的周期函数有哪些?

    理解:

    vue 中有个动态组件的概念,它能够帮助开发 者更好的实现组件之间的切换,但是在面对需求频繁的变化,去要切换组件时,动态组件在切 换的过程中,组件的实例都是重新创建的,而我们需要保留组件的状态,为了解决这个问题, 需要使用到 vue 中内置组件<keep-alive> </keep-alive> 包裹动态组件时,会缓存不活动的组件实例,主要用于保留组 件状态或避免重新渲染。

    好处:

    不会反复创建销毁组件,提高性能。

    缓存阶段:

    activated:

    keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用

    deactivated:

    keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用

    新增的生命周期函数

    errorCaptured(2.5.0+ 新增)

    当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生
    错误的组件实例以及一个包含错误来源信息的字符串,此钩子可以返回 false 以阻止该错误继
    续向上传播。

     

     

    展开全文
  • 生命周期函数简介
  • 第一部分:介绍vue生命周期函数有哪些? 第二部分:以一个案例进行展示 一、vue生命周期函数 beforeCreate:在实例部分(事件/生命周期)初始化完成之后调用。 created:在完成外部的注入/双向的绑定等...
  • VUE生命周期函数

    2020-04-05 11:22:32
    vue生命周期(钩子函数) 生命周期: Vue是一个构造函数,当执行执行这个函数时,相当于初始化vue实例;在创建实例过程中,需要设置数据监听,编译模板,将实例挂载到DOM上,数据更新能够让DOM也更新,在这个初始化,...
  • 由于async await的作用,created生命周期函数会被加入到微任务的事件队列,所以会先继续向下执行其他函数,等执行完了宏任务,最后在执行事件队列中的微任务。 beforeCreate() {}, //组件创建之后 async created()...
  • Vue生命周期函数也叫Vue生命周期钩子,就是Vue实例在某一时间点自动执行的函数。 一个有11个生命周期函数, 分别是: beforeCreate : 创建Vue实例前的时候执行, created : 创建Vue实例完成后执行, ...
  • vue生命周期函数activated

    千次阅读 2019-09-29 18:25:20
    created created在刚进入页面的时候,会触发该函数的方法。只在页面刚开始加载时执行一次。 activated 一进入页面就触发;可用于初始化页面数据等
  • 面试题(六)vue生命周期函数

    千次阅读 2020-10-26 16:17:04
    (生命周期钩子就说生命周期函数)例如,如果要通过某些插件操作 DOM 节点,如想在页面渲染完后弹出广告窗,那我们最早可在mounted中进行。 2. 第一次页面加载会触发哪几个钩子? 答:beforeCreate,crea
  • Vue生命周期函数8个(每个钩子函数可以做什么、执行顺序) Vue生命周期函数有四个阶段:①实例创建之前/之后、②组件挂载之前/之后、③数据改变视图更新之前/之后、④实例销毁之前/之后 ①实例创建之前/之后...
  • 这里我们以生命周期beforeCreate为例: 通过看源码查看,找到调用位置,使用了callHook 我们接下来看看这个方法,...所以,如果生命周期使用了箭头函数,那么this就会指向window而不是当前组件实例 再举个栗子: ...
  • 可以使用create或者mounted
  • 文章目录一、何为生命周期?1、含义2、理解3、注意点二、Vue生命周期的主要阶段及其11个周期函数1、Vue生命周期的主要阶段:2、图解3、代码注释(配合理解)4、面试题?
  • 什么是 vue 生命周期vue生命周期是指vue实例对象从创建之初到销毁的过程,vue所有功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的钩子函数实现组件数据管理和DOM渲染两大重要功能。八个阶段:1...
  • vue3.0生命周期函数

    千次阅读 2021-11-25 13:55:47
    Vue3.0 的一大特性函数 ---- setup 在vue2.x中的生命周期为 beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed
  • vue生命周期函数

    千次阅读 2021-05-26 19:21:39
    vue生命周期函数,有那些?在项目中怎么使用?以及应用场景? 1.vue生命周期函数分为:创建前 beforeCreate :在实例初始化之后执行此时对象还未创建,el 和data并未初始化,因此无法访问 methods,data ,...
  • Vue生命周期函数 beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed beforeCreate: 实例对象刚通过new Vue创建成功,props、methods、data、computed、watch都不可以使用,$el...
  • 1.什么是 vue 生命周期Vue实例从...2.vue生命周期的作用是什么它的生命周期中有多个事件钩子,让我们在控制整个vue实例的过程时更容易行程好的逻辑。3.vue的生命周期(开始创建、初始化数据、编译模板、挂载Dom、渲...
  • vue 生命周期函数的学习
  • 一、什么是生命周期函数 ... vue中的生命周期函数,是写在vue的实例对象中,与data , methods等处于统一等级,生命周期函数不用我们特地去调用,只要写了,它就会在相应的阶段被自动调用。 二、vue生命周期函数...
  • Vue生命周期函数详解

    千次阅读 2020-08-17 20:39:13
    Vue有一个完整的生命周期,也就是从开始创建,初始化创建,编译模板,挂载Dom,渲染–>更新–>渲染,销毁等一系列过程,我们称之为Vue生命周期。通俗的说就是Vue实例从创建到销毁的过程,就是生命周期。 每...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 49,119
精华内容 19,647
关键字:

vue生命周期函数

友情链接: POJ100题.zip