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

本文我们主要讲解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:[email protected]"></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官方给出的声明周期函数图片来进行理解。看图理解会更透彻些。

Vue3.x生命周期函数

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

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

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

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

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 07. [基础]Vue的生命周期函数(第一篇)

发表评论

前端开发相关广告投放 更专业 更精准

立即查看 联系我们