生命周期 , 松鼠乐园

生命周期

在开始动手编写代码之前，我们必须要对vue的生命周期进行了解，这有助于减少和解决实践中产生的问题。
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

在官网上我们可以看到这么一张图，这张图直观的表述了每个生命钩子的顺序。

file

在我们还没很熟练的使用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钩子。