vue生命周期

概念:vue的生命周期指的是vue实例从创建到挂载到销毁的过程,在这个过程中有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 钩子函数有如下:

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed

话不多说先贴代码

<!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.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{message}}</h1>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Vue生命周期'
    },
    beforeCreate: function() {
      console.group('------beforeCreate创建前状态------');
      console.log("el     : " + this.$el); //undefined
      console.log("data   : " + this.$data); //undefined 
      console.log("message: " + this.message)//undefined
      console.groupEnd()
    },
    created: function() {
      console.group('------created创建完毕状态------');
      console.log("el     : " ,this.$el); //undefined
      console.log("data   : " ,this.$data); //已被初始化 
      console.log("message: " , this.message); //已被初始化
      console.groupEnd()
    },
    beforeMount: function() {
      console.group('------beforeMount挂载前状态------');
      console.log("el     : " , this.$el); //已被初始化
      console.log("data   : " , this.$data); //已被初始化  
      console.log("message: " , this.message); //已被初始化
      console.groupEnd()
    },
    mounted: function() {
      console.group('------mounted 挂载结束状态------');
      console.log("el     : " , this.$el); //已被初始化 
      console.log("data   : " , this.$data); //已被初始化
      console.log("message: " , this.message); //已被初始化
      console.groupEnd() 
    },
    beforeUpdate: function () {
      console.group('beforeUpdate 更新前状态===============》');
      console.log("el     : " + this.$el); 
      console.log("data   : " + this.$data); 
      console.log("message: " + this.message);
      console.groupEnd()
    },
    updated: function () {
      console.group('updated 更新完成状态===============》');
      console.log("el     : " , this.$el);
      console.log("data   : " , this.$data); 
      console.log("message: " , this.message); 
      console.groupEnd()
    },
    beforeDestroy: function () {
      console.group('beforeDestroy 销毁前状态===============》');
      console.log("el     : " , this.$el);
      console.log("data   : " , this.$data); 
      console.log("message: " , this.message); 
      console.groupEnd()
    },
    destroyed: function () {
      console.group('destroyed 销毁完成状态===============》');
      console.log("el     : " , this.$el);
      console.log("data   : " , this.$data); 
      console.log("message: " , this.message);
      console.groupEnd()
    }
  })
  setTimeout(function(){
    console.log("更新")
    vm.message = '触发组件更新'
  },3000 )
</script>
</html>

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

疑问的点:页面初始获取数据的请求是放在created还是mounted呢?

created:在实例创建完成后被立即调用。挂载阶段还没开始,el 属性目前尚不可用。也就是还没有dom节点
mounted:实例被挂载后调用,这时 el 被新创建的 vm.$el 替换了。
所以我建议放在created里
created在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
如果放在mounted,等dom渲染完毕, 你再去请求数据可能就会有空dom的情况。

Logo

前往低代码交流专区

更多推荐