Vue的生命周期函数（第一篇）
- 介绍
- 准备一个空白的页面
- 自动执行函数的理解
- 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的生命周期函数。
<!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'
}
},
methods: {
handleItemClick() {
alert('mybj123.com')
}
},
mounted() {
alert('mounted')
},
template: "<h2 v-on:click='handleItemClick'>{{message}}</h2>"
})
const vm = app.mount("#app")
</script>
</html>
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的生命周期函数。
