码云学习 Vue3 2021-07-12

07. [基础]Vue的生命周期函数（第一篇）

AI 概述

准备一个空白的页面自动执行函数的理解Vue3.x 生命周期函数本文我们主要讲解 Vue3 中的生命周期函数，生命周期函数你可以这样理解，就是在某一时刻会自动执行的函数，这句话你可以注意两个关键词某一时刻和自动执行。学完本节，你会对这两个词有深刻的理解。准备一个空白的页面在开始讲解前，你需...

文章目录隐藏

准备一个空白的页面
自动执行函数的理解
Vue3.x 生命周期函数

本文我们主要讲解 Vue3 中的生命周期函数，生命周期函数你可以这样理解，就是 在某一时刻会自动执行的函数 ，这句话你可以注意两个关键词某一时刻和自动执行。学完本节，你会对这两个词有深刻的理解。

准备一个空白的页面

在开始讲解前，你需要一个基本的页面。这样能省去很多时间。把 Demo6.html 的内容，复制到 Demo7.html 中。修改一下标题，其他代码不变。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo7</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: 'mybj123.com'
            }
        },
        template: "<h2>{{message}}</h2>"
    })
    const vm = app.mount("#app")
</script>
</html>

有了这个文件，我们就可以继续学习了。

自动执行函数的理解

如果要理解什么是自动执行函数，我认为可以对比来看，先清楚什么是被动执行函数。比如我们写了一个handleItemClick()方法，然后让模板里的<h2>点击后执行此事件，代码如下。

methods: {
    handleItemClick() {
        alert('mybj123.com')
     }
 },
 template: "<h2 v-on:click='handleItemClick'>{{message}}</h2>"

这时候可以打开浏览器，看一下这个效果。你需要点击对应的 dom 元素，他才会执行方法，这个就是被动执行函数。当你了解被动执行函数，再来了解什么是自动执行函数。写一个mounted方法，它就会自动执行。这种就是自动执行函数。

mounted() {
    alert('mounted')
},

这时候你再刷新一下网页，就可以看出mounted被直接弹出了。这种没有任何操作，自动执行的方法，就叫做自动执行函数。

当你明白了什么是自动执行函数后，我们再来学习 Vue3.x 的生命周期函数。

Vue3.x 生命周期函数

学习生命周期函数，这里我们用一张 Vue 官方给出的声明周期函数图片来进行理解。看图理解会更透彻些。

beforeCreate() ：在实例生成之前会自动执行的函数
created() : 在实例生成之后会自动执行的函数
beforeMount() : 在模板渲染完成之前执行的函数
mounted() : 在模板渲染完成之后执行的函数

我们也写了对应的方法，通过这些代码和查看效果，可以很好的理解生命周期函数执行的先后顺序。代码如下。

beforeCreate() {
    console.log('beforeCreate')
},
created() {
    console.log('created')
},
beforeMount() {
    console.log('beforeMount')
},
mounted() {
    console.log('mounted')
},

写完这些代码后，你可以到浏览器中查看一下效果。由于 Vue 的生命周期函数内容很多，所以我们分两节来讲。下节继续讲解 Vue 的生命周期函数。

以上关于07. [基础]Vue的生命周期函数（第一篇）的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 2 赏

给作者打赏，鼓励TA抓紧创作！

微信

支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 07. [基础]Vue的生命周期函数（第一篇）