Vue的生命周期
首先，vue的生命周期是个啥？
借用官网的一句话就是：每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。那么这些过程中，具体vue做了些啥，我们今天来了解一下。
vue的生命周期一共有11个，现在我先把它全部列举出来：
(注意：顺序不可以颠倒)
1.beforeCreate — 创建前
2.created — 创建后
3.beforeMount — 挂载前
4.mountde — 挂载后
5.beforeUpdate — 更新前
6.updated — 更新后
7.beforeDestroy — 销毁前
8.destroyed — 销毁后
还有两个要用来配合keep- alive 来使用的：
9.activated–组件激活时调用
-
deactivated–组件停用的时候调用 -
errorCaptured–捕捉子组件错误时调用 创建前后：实例的创建; 从 创建后（created）开始可以获取data内的数据)
挂载前后：dom的挂载， 从 挂载后(mounted开始可以获取dom元素)
现在我们说一下声明周期函数通常所做的事情：
beforeCreate： 修改页面的title 页面加载的进度条
created： 发送网络请求
mounted:发送网络请求
beforeUpdate -- updated 什么更新？视图的更新
beforeDestroy -- destroyed
清除定时任务： setTimeout setInterval
移除监听： .removeEventLinster() this.$bus.$off()
如果非要在 created内获取dom元素：
this.$nextTick().then(res=>{
})
this.$nextTick(()=>{
})
errorCaptured捕捉子组件的错误的，有三个参数：
1. 错误的信息
2. 错误的组件
3. 错误的位置
可以返回值： 如果返回true,错误向外暴露，如果返回false 错误隐藏
<script type="text/javascript">
import mychild from '@/components/child.vue'
export default {
data:function(){
return {
num: 0
}
},
components:{
mychild
},
errorCaptured(a,b,c) {
console.log('errorCaptured',a,b,c)
return true
},
methods:{
add(){
this.num++
console.log(this.num)
}
},
beforeCreate(){
document.querySelector('title').innerText = '2111B'
console.log('beforeCreate',this.num)
console.log('beforeCreate',document.querySelector('p'))
},
created() {
this.$nextTick().then(res=>{
console.log('ref获取--nextTick',this.$refs['hahatag'])
})
this.$nextTick(()=>{
console.log('ref获取--nextTick',this.$refs['hahatag'])
})
setTimeout(()=>{
console.log('ref获取setTimeout',this.$refs['hahatag'])
})
},
beforeMount() {
console.log('beforeMount',document.querySelector('p'))
},
mounted() {
console.log('mounted',document.querySelector('p'))
console.log('ref获取',this.$refs['hahatag'])
},
beforeUpdate() {
console.log('beforeUpdate')
},
updated() {
console.log('updated')
},
beforeDestroy(){
},
destroyed(){
},
activated() {
},
deactivated() {
},
}
</script>
我总结的基本上就是上述的这些了，希望可以对各位有所帮助！
|