vue的生命周期函数

生命周期钩子 就是vue实例从创建到销毁的过程,在某一时间点自动执行的函数

  1. beforeCreate 开始初始化  vue实例的挂载元素$el和数据对象data都为undefined
  2. created  初始化完成 vue实例的数据对象data有了,$el还没有,可以进行computed.watch监听
        之后询问是否有el,template
  3. beforeMount  vue实例的$el和data都初始化了,但还是虚拟的dom节点
  4. mounted   vue实例挂载完成,data渲染完成
  5. beforeUpdate data发生变化时执行
  6. updated  发生变化的data,重新渲染到dom元素上之后 
  7. beforeDestroy销毁前  vm.$destroy();
  8. destroyed销毁完成   vue实例解除了事件监听以及和dom的双向绑定(无响应了),但DOM节点依旧存在
var vm=new Vue({//创建vue实例
       el:'#root',
       data:{
       	msg:'Hello world'
       },
       beforeCreate:function(){
             console.log(this.$el);//undefined
             console.log(this.$data);//undefined
       },
       created:function(){
         console.log(this.$el);//undefined
             console.log(this.$data);//obj
       },
       beforeMount:function(){
          console.log('beforeMount');
          console.log(this.$el);//<div id="root">{{msg}}</div>
       },
       mounted:function(){
          console.log('Mounted');
          console.log(this.$el);//<div id="root">Hello world</div>
       },
       beforeDestroy:function(){
       	console.log('开始销毁')
       },
       destroyed:function(){
         console.log('销毁完成')
       },
       beforeUpdate:function(){
           console.log('beforeUpdate')
       },
       updated:function(){
           console.log('updated')
       }


	})

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值