vue的生命周期

1.beforeCreate和created

//组件创建之前 ： 在该方法中因为组件还没有创建完毕，所以无法获取组件中的methods和data中的数据
     beforeCreate:function(){
         console.log("beforeCreate",this.msg,this.add)
    // 直接通过dom操作获取最原始在页面信息
     // console.log(document.getElementById("box"))

     // this.$refs 要等到内存中的虚拟dom挂载到真实dom才能使用
     // console.log(this.$refs.box,"xxx")  undefined

 },
 //组件实例已经创建完毕 ：在该方法中可以获取到组件的methods和data中的数据
 created:function(){
     console.log("created",this.msg,this.add)

console.log(this.$el,"created")

2.Mount和Mounted

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//在内存中编译页面模板(虚拟dom   this.$el),但是内存的模板还没有被渲染到真实dom
//在beforeMount执行的时候，页面中的元素还没有被真正替换过来，只是之前写的一些模板字符串
//在beforeMount方法里面我们获取不到真正的页面
beforeMount:function(){
    console.log(this.$el,"beforeMount")
    console.log(document.getElementById("box").innerText,"beforeMount") //{{msg}}
},
//内存中的页面模板被渲染dom之后执行
//在mounted执行的时候，内存中虚拟dom已经被真正替换了，而且也已经渲染到真实dom
//在mounted方法里面我们可以获取到真正的页面了
mounted:function(){
    console.log(this.$el,"mounted")
    //下面打印能够看到实际的内容，原因是内存中的虚拟dom已经被挂载到真实dom了
    console.log(this.$refs.box,"xxx")
},

3.beforeUpdate和updated

1
2
3
4
5
6
7
8
//当数据源变了，在更新页面之前会先执行beforeUpdate，此时页面还没有更新
 beforeUpdate:function(){
     console.log("beforeUpdate",this.$refs.box.innerText)
 },
 //当数据源变了，在更新页面之后会先执行updated，此时页面已经是最新了
 updated:function(){
     console.log("updated",this.$refs.box.innerText)
 },

4.beforeDestory和Destoryed

1
2
3
4
5
6
7
8
9
//当vue实例销毁之前执行，我们可以在这个函数里面做一些资源释放工作 
 //比如关闭定时器
 beforeDestroy:function(){
     console.log("beforeDestroy方法执行了")
 },
 //vue实例已经销毁完毕
 destroyed:function(){
     console.log("destroyed方法执行了")
 }

组件嵌套子组件的生命周期执行顺序

先执行父级的beforeCreate、created 和 beforeMount，

然后再去执行子组件的beforeCreate、created 和 beforeMount，

如果子组件下面没有子组件了，就执行 mounted，然后再返回父级执行 mounted。