共计 1129 个字符,预计需要花费 3 分钟才能阅读完成。
本篇文章重点讲述 vue 组件的生命周期,主要形式是通过实例说明组件由创造到结束的过程。
vue 组件周期
- beforeCreate
- created
- beforeMounte
- mounted
- beforeUpdate
- Updated
- beforeDestory
- destoryed
生命周期的主要方法就是这些(详细的讲解请参考这篇文章),我们常用的是 mounted 和 beforeDestory 这两个方法,mounted 方法是指组件的初始化工作都已经完成了,运行到这个阶段,就可以获取到 this 中的数据和方法,并且可以对 dom 进行操作,我们通常是在该方法中进行 ajax 请求,定时器及其他的异步操作;而在 beforeDestory 阶段,如果有定时器,我们会在这个方法中取消定时器。
下面我们就用例子将整个流程走一遍:
<body>
<div id="app">
<button @click="stop"> 停止闪烁 </button>
<p v-show="isshow"> 生命周期练习 </p>
</div>
<script>
new Vue({
el: '#app',
data: {
isshow: true,
interval: null
},
beforeCreate(){
// 在这个阶段的特点是组件中的数据和方法获取不到
console.log('beforeCreate')
console.log(this.isshow)
},
created(){console.log('created')
},
beforeMount(){console.log('beforeMount')
},
mounted(){
console.log('mounted')this.interval = setInterval(()=>{this.isshow = !this.isshow},1000)
},
beforeUpdate(){console.log('beforeUpdate')
},
updated(){console.log('updated')
},
beforeDestroy(){console.log('beforeDestroy')
clearInterval(this.interval)
},
destroyed(){console.log('destroyed')
},
methods: {stop(){this.$destroy()
}
}
})
</script>
</body>
该例子想展示的效果是,文本内容每隔 1s 闪现一次,点击上方按钮可停止闪烁,在控制台中会将组件从创建到销毁整个过程打印出来。
根据上面的例子,我们可以知道,在 vue 的生命周期中,只有与组件更新有关的方法会执行多次,创建方法,挂载方法以及卸载方法都是只会执行一次。
正文完