小白学 VUE 系列之Vue 实例创建及生命周期

实例

var vm = new Vue({
  // 选项
})

new Vue({
  el: '#app',
  data: obj
})

生命周期

生命周期,等于每次请求的一系列过程,方便我们对其注入我们的逻辑。
描述

var vm=new Vue({
  router,
  store,
  data:{
    message:"学习生命周期"
  },
  render: h => h(App),
  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);//undefined
  },
  created(){
    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(){
    console.group('----beforeMount挂载前状态---');
    console.log('%c%s',"color:red","el   :",this.$el);//<div id="app"></div>,这个在组件内是undefined
    console.log('%c%s',"color:red","data   :",this.$data);//存在数据对象
    console.log('%c%s',"color:red","message   :"+this.message);//学习生命周期

  },
  mounted(){
    console.group('----mounted挂载后状态---');
    console.log('%c%s',"color:red","el   :",this.$el);//<div id="app"></div>
    console.log('%c%s',"color:red","data   :",this.$data);//存在数据对象
    console.log('%c%s',"color:red","message   :"+this.message);//学习生命周期

  },
  beforeUpdate(){
    console.group('----beforeUpdate更新前状态---');
    console.log('%c%s',"color:red","el   :",this.$el);//<div id="app"></div>
    console.log('%c%s',"color:red","data   :",this.$data);//存在数据对象
    console.log('%c%s',"color:red","message   :"+this.message);//学习生命周期

  },
  updated(){
    console.group('----updated更新后状态---');
    console.log('%c%s',"color:red","el   :",this.$el);//<div id="app"></div>
    console.log('%c%s',"color:red","data   :",this.$data);//存在数据对象
    console.log('%c%s',"color:red","message   :"+this.message);//学习生命周期

  },
  beforeDestroy(){
    console.group('----beforeDestroy销毁钱时状态---');
    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);//学习生命周期

  },
  destroyed(){
    console.group('----beforeDestroy销毁完成状态---');
    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);//学习生命周期

  }
}).$mount('#app');

描述

  • beforeCreate 数据都没进行绑定
  • created 数据已经完成绑定,这是还没挂载,
  • created 过渡到beforeMount
    首先会判断对象是否有el选项,如果有的话就继续向下编译,如果没有el选项,,则停止编译,也就意味着停止了生命周期,直到在该vue实例上调用vm.$mount(el)
    描述

这个理解为,如果定义了模板,则模板优先,如果没有则调用外部的

  • beforeMount 挂载数据,此时数据并没有被替换成,只是原时的状态
  • mounted 挂载好了,并把数据都替换成静态数据了。
  • beforeUpdate 更新数据时,先执行它
  • updated 更新完毕后

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。