VUE3基础入门教程-基础篇-码农小朱

这一节课我们来学习一下vue的生命周期函数，什么是生命周期函数呢？简单理解生命周期函数就是在 某一时刻 会 自动执行 的函数。在了解自动自行函数之前，我们先来看看什么是被动执行函数。

准备基本模板

在项目根目录下，新建一个demo8.html 我们把最开始编写的hello world的代码复制过来，这样能节省我们很多时间，已经很熟悉的代码就没必要重复编写了，还不熟悉的话大家可以把视频停下来自己手写一下增加大脑记忆。代码如下：

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

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

<body>
  <div id="app"></div>
</body>
<script>
  const app=Vue.createApp({
    data(){   
      return{
        message:"hellow world"
      }
    },
    template:"<div>{{message}}</div>"
  })
  const vm=app.mount("#app")
</script>

</html>

自动执行函数理解

了解自动执行函数之前，我们应该会联想到什么又是被动执行函数。我们来编写一下代码来复现一个被动执行函数，比如我们写了一个 handelItemClick() 方法，然后让模板里的<div> 点击后来执行此这个方法，代码如下：

 methods:{
   handelItemClick(){
     console.log("被动执行函数")
   }
 },
 template:`<div @click="handelItemClick">{{message}}</div>`

编写完之后我们用浏览器打开，打开控制台切换到console，点击一下对应的dom元素，handelItemClick() 方法被执行，打印出了 "被动执行函数" ，所以这就被动执行函数，声明之后需要主动调用的函数。我们再来看看什么是自动执行函数，写一个 mounted 方法，还记得 mounted 方法不，它是我们前几节课就接触到的一个生命周期函数，不记得了也没关系，今天我们会详细说一下。

 mounted() {
   alert("自动执行方法")
 },

写好之后我们刷新一下浏览器，就可以看到 "自动执行方法" 就被弹出来了。这就是自动执行函数，我们不需要主动去触发它，它会自动执行。

明白了这些之后，我们再来接着学习vue的生命周期函数。

vue的生命周期函数

刚才我们说了，满足生命周期函数的条件是 某一时刻 会 自动执行 。这的 某一时刻 具体指的是那一个时刻呢，下面我为大家准备了一张vue官方给出的生命周期函数图。通过这张图可以更好的来理解生命周期函数的执行过程。

从图中分析我们知道的了

beforeCreate( ) ：在vue应用创建之前执行
created( ) : 在vue应用创建之后会执行
beforeMount( ) : 在模板渲染之前执行
mounted( ) : 在模板渲染之后执行
beforeUpdate( )：当data中的数据变化时，更新界面之前执行
updated( )：当data中的数据发生变化，页面重新渲染之后执行
beforeUnmount( ) : 当Vue应用销毁前执行
unmounted() : 当Vue应用销毁之后执行

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

    beforeCreate() {  //在实例生成之前会自动执行的函数
      console.log("beforeCreate")
    },
    created() {   //在实例生成之后会自动执行的函数
      console.log("created")
    },
    beforeMount() {  //在模板渲染完成之前执行的函数
      console.log("beforeMount")
    },
    mounted() {  //在模板渲染完成之后执行的函数
      console.log("mounted")
    },
    beforeUpdate() {  //当data中的数据变化时， 会立即自动执行的函数
      console.log("beforeUpdate")
    },
    updated() {  //当data中的数据发生变化，页面重新渲染完后，会自动执行的函数
      console.log("updated")
    },
    beforeUnmount() { //当Vue应用失效时，会自动执行的函数
      console.log("beforeUnmount")
    },
    unmounted() {  //当Vue应用失效时，且DOM完全销毁之后，会自动

完整代码：

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

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

<body>
  <div id="app"></div>
</body>
<script>
  const app=Vue.createApp({
    data(){   
      return{
        message:"hellow world"
      }
    },
    beforeCreate() {  //在实例生成之前会自动执行的函数
      console.log("beforeCreate")
    },
    created() {   //在实例生成之后会自动执行的函数
      console.log("created")
    },
    beforeMount() {  //在模板渲染完成之前执行的函数
      console.log("beforeMount")
    },
    mounted() {  //在模板渲染完成之后执行的函数
      console.log("mounted")
    },
    beforeUpdate() {  //当data中的数据变化时， 会立即自动执行的函数
      console.log("beforeUpdate")
    },
    updated() {  //当data中的数据发生变化，页面重新渲染完后，会自动执行的函数
      console.log("updated")
    },
    beforeUnmount() { //当Vue应用失效时，会自动执行的函数
      console.log("beforeUnmount")
    },
    unmounted() {  //当Vue应用失效时，且DOM完全销毁之后，会自动执行
       console.log("unmounted")
    },
    methods:{
      handelItemClick(){
        console.log("被动执行函数")
      }
    },
    template:`<div @click="handelItemClick">{{message}}</div>`
  })
  const vm=app.mount("#app")
</script>

</html>

视频讲解