vue学习笔记day2

jiezi

6 年前

本篇文章重点讲述 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 的生命周期中，只有与组件更新有关的方法会执行多次，创建方法，挂载方法以及卸载方法都是只会执行一次。

vue 组件周期