vue生命周期（数据初始化的请求放在created）

vue生命周期概念：vue的生命周期指的是vue实例从创建到挂载到销毁的过程，在这个过程中有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 钩子函数有如下:beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed话不多说先贴代码<!DOCTYPE html...

dream_wk

5729人浏览 · 2020-03-05 23:25:51

dream_wk · 2020-03-05 23:25:51 发布

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的情况。

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^