Vue生命周期
??一个组件从被创建出来到被销毁的过程称为一个生命周期。一个生命周期被分为四个阶段:创建、挂载、更新、销毁；每个阶段又分为之前和之后。【注意：生命周期方法在编写时切记不要使用箭头函数，会把this搞丢的】
一、创建
1.创建之前 beforeCreate 创建之前就是虚拟dom创建之前，因为虚拟dom还未创建，所以我们在这里获取不到节点和值。创建之前在程序中基本没什么作用。
beforeCreate() {
console.log(this.value)
console.log(document.getElementById('myNode'))
}
2.创建之后 created 创建之后虚拟dom已经创建好了，但还没有完成挂载。created常用来给数据赋初始值，在这里赋值不会触发更新生命周期，要挂载之后的改变数据才会触发更新生命周期，因此在这里赋值可以达到一个赋值优化的效果，提升应用性能。
created() {
this.value = 'created lifecycle value'
console.log('value的值：', this.value)
console.log('页面元素：', document.getElementById('myNode'))
}
二、挂载
1.挂载之前 beforeMount 挂载之前也没什么用。
beforeMount() {
this.value = 'created lifecycle value'
console.log('value的值：', this.value)
console.log('页面元素：', document.getElementById('myNode'))
}
2.挂载之后 mounted 在组件初始化的时候获取页面节点就要用到挂载之后，在这里改变数据会引起更新生命周期，页面会重新渲染。
mounted() {
this.value = 'created lifecycle value'
console.log('value的值：', this.value)
console.log('页面元素：', document.getElementById('myNode'))
}
三、更新 并不是每个阶段都会引起更新生命周期，只有虚拟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')
}
|