Vue生命周期

Vue生命周期

  一个组件从被创建出来到被销毁的过程称为一个生命周期。一个生命周期被分为四个阶段:创建、挂载、更新、销毁；每个阶段又分为之前和之后。【注意：生命周期方法在编写时切记不要使用箭头函数，会把this搞丢的】

一、创建

1.创建之前 beforeCreate

创建之前就是虚拟dom创建之前，因为虚拟dom还未创建，所以我们在这里获取不到节点和值。创建之前在程序中基本没什么作用。

beforeCreate() {
    console.log(this.value)
    console.log(document.getElementById('myNode'))
}

//value值和id为myNode的虚拟节点都获取不到

2.创建之后 created

创建之后虚拟dom已经创建好了，但还没有完成挂载。created常用来给数据赋初始值，在这里赋值不会触发更新生命周期，要挂载之后的改变数据才会触发更新生命周期，因此在这里赋值可以达到一个赋值优化的效果，提升应用性能。

created() {
	  this.value = 'created lifecycle value'
	  console.log('value的值：', this.value)
	  console.log('页面元素：', document.getElementById('myNode'))
}
//虚拟dom已经创建了，并给value赋了初始值，可以获取value的值，但节点还未挂载，所以获取不到页面元素。

二、挂载

1.挂载之前 beforeMount

挂载之前也没什么用。

beforeMount() {
	  this.value = 'created lifecycle value'
	  console.log('value的值：', this.value)
	  console.log('页面元素：', document.getElementById('myNode'))
}
//可以获取value的值，但节点未挂载，所以获取不到页面元素。

2.挂载之后 mounted

在组件初始化的时候获取页面节点就要用到挂载之后，在这里改变数据会引起更新生命周期，页面会重新渲染。

mounted() {
	  this.value = 'created lifecycle value'
	  console.log('value的值：', this.value)
	  console.log('页面元素：', document.getElementById('myNode'))
}
//获取到value的值和页面元素。

三、更新

并不是每个阶段都会引起更新生命周期，只有虚拟dom挂载时或挂载后数据发生变化才回引起更新生命周期。

1.更新之前 beforeUpdate

data中的数据更改后，页面数据没有立即更新

2.更新之后 updated

data中的数据改变，同时使dom与数据对应。

四、销毁

1.销毁之前 beforeDestroy

该函数被调用时，组件的data和methods、过滤器等等这些都是出于不可用的状态，但是并没有真正销毁，它还在只是不能用。

//销毁子组件
beforeDestroy() {
            // 销毁定时器
     clearInterval(this.timer)
     console.log('----------------------------------- beforeDestroy start')
     console.log('value的值：', this.value)
     console.log('页面元素：', this.$refs.myNode)
     console.log('----------------------------------- beforeDestroy end')
 }
//两个值都能获取到，因为还没有真正销毁

2.销毁之后 destroyed

销毁之后就是把组件完全销毁了。

destroyed() {
    console.log('----------------------------------- destroyed start')
    console.log('value的值：', this.value)
    console.log('页面元素：', this.$refs.myNode)
    console.log('----------------------------------- destroyed end')
}
//获取到的value是来自父组件的默认值，页面元素为undefined