一个案例带你走完Vue的生命周期

八种生命周期

Vue的生命周期一直都是Vue的重点，下面就是Vue的生命周期图示：

请添加图片描述

作为一名初学者，你可能还并不能完全理解该图，但不要着急，我会通过一个小例子，带你了解Vue的生命周期这一整个过程。

<body>
  <div class="app">
    <button @click="username='xw'">激活update</button>
    {{username}}:{{list}}
  </div>
</body>

<script src="./js/vue.js"></script>
<script>

  var app = new Vue({
    el: '.app',
    data: {
      username: "抗争的小青年"
    },
    beforeCreate() {
      console.log(`beforecate:${this.username}`);
      console.log(`beforecate:${this.$el}`);
    },

    created() {

      this.list = "aaa"
      console.log(`created: ${this.username}`);
      console.log(`created: ${this.$el}`);
    },
    beforeMount() {
      console.log(this.$el);
    },
    mounted() {
      console.log(this.$el);
    },
    beforeUpdate() {
      console.log(this.$el);
    },
    updated() {
      console.log(this.$el);
    }

  })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

你可能注意到在上面的例子中，我用到了8个钩子函数中的6个。另外两个会在另外一个例子中体现。

🌴beforeCreate

这是创建实例之前执行的钩子函数，此时你访问Vue实例中的属性时，输出undefined。

Snipaste_2022-08-02_20-12-14

🌴created

这是实例创建完成的钩子函数，此时Vue实例中的状态已经可以访问，但页面还没有开始渲染。

Snipaste_2022-08-02_20-15-19

在这个阶段，我使用this.list = "aaa"，创建了一个list,但是请注意，它是无法响应式的，因为数据绑定是指定Vue实例创建之前就存在的状态。我们在created阶段添加的属性没有挂载拦截器，所以无法响应式。

🌴beforeMount

此时编译渲染el的模板，并转成HTML。但注意，此时数据还没有渲染，Vue一些语法还没有起作用。

🌴mounted

此时页面的基本DOM就渲染完成了。在一般的开发中，我们可以在此步发送Ajax请求，或者使用相关插件。但是请注意，这个事件只执行一次。

Snipaste_2022-08-02_20-32-14

🌴beforeUpdate

当Vue的状态发生改变时，就会触发Update，这也就意味着我们之前在created阶段添加的list属性的修改不会触发Update。可重复执行

🌴updated

这是更新后的钩子事件。可重复执行

Snipaste_2022-08-02_20-40-46

此时你尝试着修改list的值，你会发现不会触发此钩子函数

🌲beforeDestroy

销毁实例前，此时该组件相关的子组件，监听事件等还没有删除。

🌲destroyed

vue实例销毁后

生命周期图示

这里是我整理的生命周期图示，可供参考

Snipaste_2022-08-02_19-33-22

总结

生命周期	描述	使用频率
beforeCreate	初始化事件，没有对事件进行处理	很少
create	完成了状态的初始化，注入响应式。可以初始化状态（但无法实现数据驱动，响应式），挂载属性到当前的实例上。	-
beforeMount	完成了Vue实例的创建，但并没有实例化DOM节点	-
mounted	实例化了DOM节点，拿到真实的DOM节点。发送ajax请求，使用插件(依赖DOM节点)，比如swiper。	-
beforeUpdate	状态更新前，获取旧的DOM节点（重复无限次）	-
updated	状态更新后，获取新的DOM节点（重复无限次）	-
beforeDestroy	销毁前	-
destroyed	销毁后，清除定时器	-

相关阅读:
火爆全网的头戴式耳机，Y2K辣妹时髦单品——Umelody轻律 U1头戴式耳机！
09 项目资源管理
 CSS 元素的显示与隐藏
 北方工业大学计算机考研资料汇总
 30秒就能学会一个Python小技巧你能信
 记录一次线上环境使用DDL造成死锁
 京东工业API接口解析，实现根据ID取商品详情
 C语言进阶:结构体，枚举，联合(结尾有彩蛋)
【办公类-21-05】20240227单个word按“段落数”拆分多个Word（成果汇编只有段落文字 1拆5）
Elasticsearch：（二）2.安装kibana
原文地址：https://blog.csdn.net/liyuchenii/article/details/126130144