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

抗争的小青年

已于 2022-08-03 08:25:01 修改

阅读量346

点赞数 2

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-08-02 20:57:15 首次发布

本文链接：https://blog.csdn.net/liyuchenii/article/details/126130144

版权

vue 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

八种生命周期

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);
    }

  })

你可能注意到在上面的例子中，我用到了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	销毁后，清除定时器	-

抗争的小青年

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
2
评论
一个案例带你走完Vue的生命周期

八种生命周期 Vue的生命周期一直都是Vue的重点，下面就是Vue的生命周期图示：作为一名初学者，你可能还并不能完全理解该图，但不要着急，我会通过一个小例子，带你了解Vue的生命周期这一整个过程。 ......
复制链接

扫一扫