#Vue2篇：VUE的生命周期各时期情况

程序员xiaolibao

已于 2023-03-06 22:36:24 修改

阅读量159

点赞数

分类专栏： Vue2篇文章标签： vue

于 2021-04-20 22:29:39 首次发布

前端xiaolibao

本文链接：https://blog.csdn.net/weixin_47075554/article/details/115920773

版权

Vue2篇专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.代码示例

<!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="vue.js"></script>
</head>
<body>
	
  <div id="app">
    <h1>{{message}}</h1>
  </div>
  
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Vue的生命周期'
    },
    // 生命周期的写法需要注意，适合data在一个级别的
    beforeCreate: function() {
      console.group('------beforeCreate创建前状态------');
      console.log("el: " + this.$el); //undefined
      console.log("data: " + this.$data); //undefined 
      console.log("message: " + this.message) //undefined 
      // 在这个时期 ,说明 el 和 data 并未初始化
      // 这个时候做的操作,例如:加一些loading事件
    },
    created: function() {
      console.group('------created创建完毕状态------');
      console.log("el: " + this.$el); //undefined
      console.log("data: " + this.$data); //已被初始化 
      console.log("message: " + this.message); //Vue的生命周期,说明已被初始化
      //  这个时期,data 数据已经初始化，但是 el没有
      //  这个时候可以做的操作例如:结束loading事件，还做一些初始化，实现函数自执行等
    },
   
    beforeMount: function() {
      console.group('------beforeMount挂载前状态------');
      console.log("el: " + (this.$el)); //已被初始化
      console.log(this.$el);
      console.log("data: " + this.$data); //已被初始化  
      console.log("message: " + this.message); //已被初始化  
      // 到这个时期,data 和 el 都已经 初始化
    },
    mounted: function() {
      console.group('------mounted 挂载后状态------');
      console.log("el: " + this.$el); //已被初始化
      console.log(this.$el);    
      console.log("data: " + this.$data); //已被初始化
      console.log("message: " + this.message); //已被初始化 
      // 完成挂载，这个生命周期用的是比较多的
      // 最常见的就是:1、发起后端请求，拿回数据 2、接收页面之间的传递的参数 3、子组件向父组件传递参数
    },
    beforeUpdate: function () {
      console.group('------beforeUpdate 更新前状态------');
      console.log("el: " + this.$el);
      console.log(this.$el);   
      console.log("data   : " + this.$data); 
      console.log("message: " + this.message); 
    },
    updated: function () {
      console.group('------updated 更新后状态------');
      console.log("el: " + this.$el);
      console.log(this.$el); 
      console.log("data: " + this.$data); 
      console.log("message: " + this.message); 
      // 当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数。我们在console中输入 vm.message = '触发组件更新'
      // 这里就比较好理解了：当希望更新组件前做一些操作的时候，我们就可以调用 beforeUpdate钩子函数，同理使用 updated 钩子函数
    },
    beforeDestroy: function () {
      console.group('------beforeDestroy 销毁前状态------');
      console.log("el: " + this.$el);
      console.log(this.$el);    
      console.log("data: " + this.$data); 
      console.log("message: " + this.message); 
      // beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
    },
    destroyed: function () {
      console.group('------destroyed 销毁后状态------');
      console.log("el: " + this.$el);
      console.log(this.$el);  
      console.log("data: " + this.$data); 
      console.log("message: " + this.message);
       // destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
    }/**/
  })
</script>
</html>