vue 生命周期钩子测试小Demo(通俗易懂)

原创已于 2023-06-19 21:42:12 修改 · 919 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue生命钩子

于 2019-07-22 16:32:33 首次发布

vue入门基础专栏收录该内容

10 篇文章

订阅专栏

本文通过一个具体示例，详细解析了Vue.js中各个生命周期钩子的触发时机及其应用场景，帮助读者更好地理解和运用Vue生命周期。

记得博主第一次看生命周期钩子官方API时，第一印象是，讲的非常详细、条理清晰，但是博主还是没完全搞懂，于是经过自己的学习之后通俗易懂的总结一下：

首先，先上一张官方生命周期图示，大家可以参考理解
在这里插入图片描述

博主写了一个小demo，通过这个例子来进行讲解会比较易懂
可以点击测试demo查看效果

helloWorld.vue

<template>
  <div class="hello">
    <ul>
      <li v-for="(user,index) in users" :key="index" @click="user.show = !user.show">
        <h2>{{user.name}}</h2>
        <h3 v-show="user.show">{{user.job}}</h3>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      users: [
        { name: "saber", job: "sword", show: false },
        { name: "archar", job: "arrow", show: false },
        { name: "saber", job: "sword", show: false },
        { name: "archar", job: "arrow", show: false },
        { name: "saber", job: "sword", show: false },
        { name: "archar", job: "arrow", show: false },
        { name: "saber", job: "sword", show: false },
        { name: "archar", job: "arrow", show: false }
      ]
    };
  },
  beforeCreate () {
    alert("组件实例化之前执行的函数");
  },
  created() {
    alert("组件实例化完毕，但页面还未显示");
  },
  beforeMount () {
    alert("组件挂载前，页面仍未展示，但虚拟DOM已经配置");
  },
  mounted() {
    alert("组件挂载后，此方法执行后页面显示");
  },
  beforeUpdate() {
    alert("组件更新前，页面仍未更新，但虚拟DOM已经配置");
  },
  updated () {
    alert("组件更新，此方法执行后，页面更新");
  },
  beforeDestroy () {
    alert("组件销毁前");
  },
  destroyed() {
    alert("组件销毁")
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
  width: 100%;
  max-width: 1200px;
  box-sizing: border-box;
  margin: 40px auto;
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}
li {
  flex-grow: 1;
  flex-basis: 200px;
  border: 1px solid black;
  margin:40px ; 
}
</style>

home.vue

<template>
  <div class="home">
    <HelloWorld v-if="destroy" msg="Welcome to Your Vue.js App"/>
    <button @click="del">销毁组件</button>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  data () {
    return {
      destroy:true
    }
  },
  name: 'home',
  components: {
    HelloWorld
  },
  methods: {
    del:function(){
      this.destroy = false;
    }
  },
}
</script>

App.vue入口中主要写了路由配置，如果还不了解路由配置的同学，可以查看博主之前的博客，有详细讲解

动图演示

在这里插入图片描述

每个周期详解(包括每个过程的运行效果图)

注：运行截图为依次点击确定按钮后依次截的图

beforeCreate(组件实例化之前执行的方法)

还没有将当前的vue对象创建出来时可以调用，只是对当前的事件进行配置，还没有识别属性里的东西(比如data里的数据)
在这一般可以做一些过渡、动画加载

ex:
在这里插入图片描述
如上图所示，页面正处于beforeCreate阶段，等待完成

created(组件实例化完毕，但页面还未渲染)

这里实例已经出来啦，当前组件已经被创建好，属性也成功绑定，但是DOM在这个方法调用的时候还是没有被渲染出来
这里通常可以用来获取一些数据，比如获取网络接口，将其数据赋值给相应的属性；
这里也可以结束beforeCreate方法中的loading加载事件，准备渲染DOM

注意： 根据上面的生命周期图可以看出，在这个方法后会检查有没有el或者.$mount属性，如果没有，生命周期结束，若有，继续向下检查有没有两种template中的一种(组件或者html)，如果有，执行render函数进行渲染(但是此时DOM并不会呈现出来)，如果没有，则生命周期结束。

ex：
在这里插入图片描述
如上图所示，页面正处于created阶段