您现在的位置是:首页 > 正文

Vue生命周期概述

2024-02-29 13:51:09阅读 1

1 概述

每个Vue组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模板,挂载实例到DOM,以及在数据改变时更新DOM。在此过程中,它也会运行被称为生命周期钩子的函数,让开发者有机会在特定阶段运行自己的代码。

Vue的声明周期包括:

  • 初始阶段
  • 挂载阶段
  • 更新阶段
  • 销毁阶段

下面用官网的声明周期图来解释说明:
在这里插入图片描述

2 初始阶段

初始阶段的生命周期有:beforeCreatecreated,相应流程如图所示:
在这里插入图片描述

  • 创建Vue实例之后,首先会初始化生命周期和事件,但是这时数据代理还未开始,也就是说vm上面还没有_data属性,那么data中定义的数据接收不到
  • 执行beforeCreate生命周期函数
  • 紧接着数据初始化,数据监测与数据代理。这个过程,要定义data数据、方法等,此时可以通过vm访问到data中的数据和methods中的方法
  • 执行created生命周期函数

下面来进行验证,首先定义如下所示HTML结构:

<div id="app">
    <button @click="add">点击+1</button>
    <span>{{number}}</span>
</div>

接着初始化一个Vue实例,在data中定义number的值,并在methods中定义方法add

const vm = new Vue({
    el: "#app",
    data: {
        number: 0 // 初始化number为0
    },
    methods: {
        add() { // 每次点击number加1
            this.number++;
        }
    },
})

首先验证beforeCreate,由于这时还没有进行数据代理,因此vm上面没有_datamethods中的方法,我们可以输出一个this来查看:

beforeCreate() {
    console.log(this);
}

输出结果如下,我们可以看到这时的vm上面即没有data,也没有methods
在这里插入图片描述
紧接着验证created,此时进行了数据监测与数据代理,因此可以通过vm访问到_datamethods中的方法,我们可以输出一个this来查看:

created() {
    console.log(this);
}

输出结果如下,这是vm上面有了add方法和在data中定义的number数据:
在这里插入图片描述
完整验证代码如下:

<div id="app">
    <button @click="add">点击+1</button>
    <span>{{number}}</span>
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            number: 0
        },
        methods: {
            add() {
                this.number++;
            }
        },
        beforeCreate() {
            console.log(this);
        },
        created() {
            console.log(this);
        },
    })
</script>

3 挂载阶段

挂载阶段的生命周期有:beforeMountmounted

created执行完之后,接下来会判断是否有el的配置项,el配置项就是我们最先开始在Vue实例中定义的el: "#app"

  • 如果没有,那么会等待调用vm.$mount(el)方法,如果一直不调用该方法,渲染会停止;调用vm.$mount(el)之后,才会继续判断是否有template配置项;
  • 如果有,则会继续判断是否有template配置项,如果有该配置,编译template里面的内容;如果没有,编译el的外部html作为模版;

在这里插入图片描述
上面这个阶段Vue会开始解析模版,生成虚拟DOM,但是页面还不能显示解析好的内容,这时的流程是:
在这里插入图片描述

  • 执行beforeMount生命周期函数
  • 接下来将虚拟DOM转化为真实DOM,并往vm.$el存了一份,并且将真实DOM插入到了页面上
  • 执行mounted生命周期函数

下面来进行验证,首先验证beforeMount,在该函数执行时,Vue生成了虚拟DOM,但是页面不能显示解析好的内容,因此我们写了什么代码,页面上就显示什么代码,并且该函数中所有对DOM的操作都不生效,使用debugger调试如下:

beforeMount() {
	document.querySelector("button").innerText = "橘猫吃不胖";
    debugger;
}

结果如下,可以看到这时页面上的{{number}}还没有被解析,并且按钮的文字被改成了橘猫吃不胖
在这里插入图片描述
但是当我们继续执行下去的时候,发现按钮的文字又变回了点击+1,由此可以看出beforeMount中对DOM的操作没有生效:
在这里插入图片描述
接着验证mounted,在这个函数中,我们可以输出this.$el,结果是真实DOM:

mounted() {
    console.log(this.$el);
}

在这里插入图片描述
完整验证代码如下:

<div id="app">
    <button @click="add">点击+1</button>
    <br>
    <span>{{number}}</span>
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            number: 0
        },
        methods: {
            add() {
                this.number++;
            }
        },
        beforeMount() {
            document.querySelector("button").innerText = "橘猫吃不胖";
            debugger;
        },
        mounted() {
            console.log(this.$el);
        },
    })
</script>

4 更新阶段

更新阶段的生命周期有:beforeUpdateupdated,相应流程如图所示:
在这里插入图片描述

  • 当状态数据发生了变化之后,会执行beforeUpdate生命周期函数,此时数据是最新的,但是页面是旧的
  • 紧接着新旧虚拟DOM会进行对比,并完成页面的更新
  • 执行updated生命周期函数

数据更新时,会循环执行上面的流程。

下面验证一下。首先验证beforeUpdate,在这个函数中,数据是最新的,但是没有更新到页面上,因此我们可以通过点击按钮来更新数据,观察变化:

beforeUpdate() {
    console.log(this.number);
    debugger;
}

效果如下,我们可以看到点击按钮之后,这时的number是1,但是页面上显示的还是0,因此页面尚未和数据保持同步。
在这里插入图片描述
如果我们在函数中同样使用以上代码,我们就可以看到更新后的数据和页面了:

updated() {
    console.log(this.number);
    debugger;
}

在这里插入图片描述
完整验证代码如下:

<div id="app">
    <button @click="add">点击+1</button>
    <br>
    <span>{{number}}</span>
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            number: 0
        },
        methods: {
            add() {
                this.number++;
            }
        },
        beforeUpdate() {
            console.log(this.number);
            debugger;
        },
        updated() {
            console.log(this.number);
            debugger;
        },
    })
</script>

5 销毁阶段

销毁阶段的生命周期有:beforeDestroydestroyed,流程如下:
在这里插入图片描述

  • vm.$destroy()被调用时进入销毁阶段
  • 执行beforeDestroy生命周期函数
  • 移除所有的监视、子组件和事件监听器
  • 执行destroyed生命周期函数

6 总结

在这里插入图片描述

网站文章

  • Zookeeper(一)—— Zookeeper介绍

    Zookeeper(一)—— Zookeeper介绍

    Zookeeper是一个开源的、分布式的,为分布式应用提供协调服务的Apache项目。它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护、域名服务、分布式同步、组服务等。Hadoop和HBase的重要组件。

    2024-02-29 13:51:02
  • 行政计算机培训,深大地铁站附近行政管理研究生培训有什么区别,计算机专业硕士考研培训有哪些专业...

    行政计算机培训,深大地铁站附近行政管理研究生培训有什么区别,计算机专业硕士考研培训有哪些专业...

    之前小编还说“不要一腔热血奔着一个学校”,现在竟然觉得能做到这样的同学也是很难得可贵了。当然科学分析一下报考院校的形势和题也是必要的啦,只是没必要那么精益求精,恨不得把几个学校新传院长拉到一起坐下来对...

    2024-02-29 13:50:52
  • Java项目:ssm图书商城系统

    Java项目:ssm图书商城系统

    该项目分为前后台,前台主要功能包括: 普通用户的注册、登录; 轮播图展示、图书列表、图书详情、加入购物车、我的订单等功能; 后台主要功能包括: 图书管理:图书列表、图书类型、供应商列表-包括图书、类型...

    2024-02-29 13:50:23
  • Spring Bean 初始化之InitializingBean, init-method 和 PostConstruct

    概述从接口的名字上不难发现,InitializingBean 的作用就是在 bean 初始化后执行定制化的操作。Spring 容器中的 Bean 是有生命周期的,Spring 允许在 Bean 在初始化完成后以及 Bean 销毁前执行特定的操作,常用的设定方式有以下三种:通过实现 InitializingBean/Disposab...

    2024-02-29 13:50:16
  • linux设置仅开机启动一次的命令

    使用 &quot;systemctl set-property [服务名] RemainAfterExit=yes&quot; 可以将某个服务设置为仅开机启动一次。其中 [服务名] 是要设置的服务名称。 例如: systemctl set-property myservice.service RemainAfterExit=yes 这样这个服务在启动之后就不会再启动了。 ...

    2024-02-29 13:50:10
  • jQuery绑定事件的方法四种方法 热门推荐

    jq给元素绑定事件的方法有4种,1.bind() 2.live() 3.live() 4.on() //on常用 一:bind(type,[data],function(eventObject)) bind是使用频率较高的一种,作用就是在选择到的元素上绑定特定事件类型的监听函数,参数的含义如下: type:事件类型,如click、change、mouseover等; ...

    2024-02-29 13:49:41
  • 提取一个目录下的文件夹的名字

    问题描述:windows, 一个目录下面有很多子文件夹,想要批量去获得这些文件夹名称?处理方式:使用DIR命令。将 dir /a:d /b &gt;xxx.txt 复制到记事本中,另存成.bat文件,放到提取文件夹名称的目录中去,双击运行。结果保存到xxx.txt中了。详细信息,可以去掉/b参数,直接写成dir /a:d &gt;xxx.txt更多dir用法,win+r打开...

    2024-02-29 13:49:34
  • 【OS】第二章 进程

    【OS】第二章 进程

    程序:一个在时间上按严格次序、顺序执行的操作序列。概念:一个具有独立功能的程序独占处理机,直至得到最终结果的过程。在计算机系统中只有一个程序在运行,这个程序独占系统中的所有资源,其执行不受外界影响。(...

    2024-02-29 13:49:27
  • solidity之abi编码函数总结

    solidity之abi编码函数总结

    pragma solidity &gt;=0.4.0 &lt;0.6.0; contract Test { function set(uint value) public { } } contract User { function test() public view returns(bytes memory){ /...

    2024-02-29 13:48:57
  • JAVA配置文件服务器登录失败,com.jcraft.jsch.JSchException: Auth fail(示例代码)

    背景服务器信息:服务器A:10.102.110.1服务器B:10.102.110.2需要从服务器A通过Sftp传输文件到服务器B。应用项目中有一个功能,要通个关Sftp进行日志文件的传输,在部署的时候...

    2024-02-29 13:48:51