Vue系列(九)之生命周期

Vue实例提供了生命周期供我们调用。所谓生命周期就是Vue实例从创建到销毁的过程。

直接看代码注释吧：

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'ayy'
        },
        /**
         * 实例初始化之后
         * data，methods，watch等还未配置
         * 无法操作数据和DOM
         * 所以基本没什么作用
         */
        beforeCreate() {
            console.log('beforeCreate')
        },
        /**
         * Data已经初始化，Dom未渲染
         * 可以操作data，无法操作Dom
         * 一般接口请求数据会在此函数中调用(也有说在mounted中调用接口)
         */
        created() {
            console.log('created')
        },
        /**
         * 渲染之前被调用，render函数首次被调用
         * Dom未挂载
         * 可以操作data，无法操作dom
         * 基本不用
         */
        beforeMount() {
            console.log('beforeMount')
        },
        /**
         * Dom已经挂载
         * 可以操作Data和Dom
         */
        mounted() {
            console.log('mounted')
        },
        /**
         * 数据改变前调用
         */
        beforeUpdate() {
            console.log('beforeUpdate')
        },
        /**
         * 数据改变后调用
         */
        updated() {
            console.log('updated')
        },
        /**
         * 页面销毁前
         * 可以操作data，无法操作dom
         * 主要在此方法中，释放一些资源等
         */
        beforeDestroy() {
            console.log('beforeDestroy')
        },
        /**
         * 销毁后调用
         */
        destroyed() {
            console.log('destroyed')
        }
    });
</script>

目前还有一个疑问，关于网络请求调用的时机，网上有两种说法，created中和mounted中，我个人理解是在created中发起网络请求，因为created比mounted回调的要早，而且data已经完成初始化。在项目中也是这样用的，目前没发现有什么问题。mounted中发起网络请求的说法也不会有问题，但是不是稍微迟了些吗？这个问题有待研究。