vue的生命周期详解

最新推荐文章于 2022-09-08 09:52:58 发布

weixin_45493439

最新推荐文章于 2022-09-08 09:52:58 发布

阅读量127

点赞数 1

分类专栏： vue 文章标签：生命周期 vue生命周期

本文链接：https://blog.csdn.net/weixin_45493439/article/details/100049966

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

什么是vue 生命周期

生命周期就是Vue 实例，从创建到销毁的过程。
从开始创建，初始化数据，编译模板，挂载Dom——>渲染，更新->渲染，销毁等一系列过程，称为Vue的生命周期
每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。首先让我们来看一张图：这张图是参照网上的
在这里插入图片描述

vue的每个生命周期函数

beforeCreate(){}, // vue初始化之后就会执行的函数，这时数据和方法还没有
created(){}, // vue初始化并且有数据和方法，就会执行的函数；
beforeMount(){}, // 页面已经展示，但数据还未渲染的页面，执行该函数
mounted(){}, // 数据首次渲染页面，会执行该函数
beforeUpdate(){}, // 数据发生改变，(仅 moubel层的数据改变)页面的数据还是旧数据，执行该函数
updated(){}, // 改变后的数据再次渲染页面，执行该函数
beforeDestroy(){}, // 销毁vue 实例还未真正销毁还能访问数据和方法；
destroyed(){} // 销毁vue 实例完毕;

下面是每个周期的执行代码之间的区别

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="app">
    <h1>{{message}}</h1>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: '请在控制台看效果'
    },
    beforeCreate: function() {
      console.group('------beforeCreate创建前状态------');
      console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
      console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
      console.log("%c%s", "color:red","message: " + this.message) 
    },
    created: function() {
      console.group('------created创建完毕状态------');
      console.log("%c%s", "color:red","el     : " + this.$el); //undefined
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化
    },
    beforeMount: function() {
      console.group('------beforeMount挂载前状态------');
      console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
      console.log(this.$el);
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
    },
    mounted: function() {
      console.group('------mounted 挂载结束状态------');
      console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
      console.log(this.$el);    
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
    },
    beforeUpdate: function () {
      console.group('beforeUpdate 更新前状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);   
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
    },
    updated: function () {
      console.group('updated 更新完成状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el); 
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
    },
    beforeDestroy: function () {
      console.group('beforeDestroy 销毁前状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);    
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
    },
    destroyed: function () {
      console.group('destroyed 销毁完成状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);  
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message)
    }
  })
</script>
</html>

运行结果
在这里插入图片描述