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://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的生命周期函数(第一篇)
不太清楚最后写的四个方法运行之后有什么作用 [虚心求教: )]