生命周期
生命周期
在开始动手编写代码之前,我们必须要对vue的生命周期进行了解,这有助于减少和解决实践中产生的问题。
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
在官网上我们可以看到这么一张图,这张图直观的表述了每个生命钩子的顺序。
在我们还没很熟练的使用vue之前,我们没必要一下子全搞懂这张图,暂时我们只要知道mounted和beforeDestroy这2个钩子就可以了。下面就来详解下这2个钩子。
mounted
mounted是一个比较常用的钩子,mounted处在当前dom挂载完毕的位置,这意味着当前该时刻, 元素已经被挂载。但是要注意一点,mounted只保证当前组件dom挂载完毕,不能保证当前组件内的其他组件也一同挂载完毕。不过好在vue提供了一个nextTick方法,通过该方法我们可以等到当前组件全部渲染完毕再执行我们的代码。
我们把mounted添加到代码里面:
<template>
<div>{{val}}<div>
</template>
<script>
export default {
data(){
return {
val:'text'
}
},
mounted(){
//这里可以写当前组件挂载完毕后的代码:请求数据等
this.$nextTick(()=>{
//这里写的代码,需要等到当前组件UI渲染完毕才会执行
})
}
}
</script>
beforeDestroy
beforeDestroy钩子也比较常用,Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。比如我们页面上有定时器,那么我最好在destroyed钩子里面进行销毁。
<template>
<div>{{val}}<div>
</template>
<script>
export default {
data(){
return {
timer:null
}
},
mounted(){
//初始化一个 每秒输出out的定时器
this.timer = setInterval(()=>{
console.log('out')
},1000)
},
beforeDestroy(){
//这里进行销毁timer
if(this.timer){
clearInterval(this.timer)
}
}
}
</script>
防坑指南:如果使用了keeplived,那么我们的组件加载完毕后会常驻内存,切换页面的时候不会调用beforeDestroy钩子,因此我们需要在deactivated钩子内调用我们的代码。同理,mounted也不会被调用第二次,需要使用activated钩子。
本文系作者 @迦娜王 原创发布在 松鼠乐园。未经许可,禁止转载。