【Vue2.0学习】—生命周期（五十）

【Vue2.0学习】—生命周期（五十）

Vue生命周期原理图

<div id="root">
        <h2 :style="{opacity}">欢迎来到王者世界</h2>
        <button @click="stop">点我停止</button>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                opacity: 1

            },
            methods: {
                stop() {
                    //clearInterval(this.id)
                    this.$destroy();
                }

            },
            //Vue完成模板的解析并把初始的真实DOM元素放入页面后挂载完毕调用mounted
            mounted() {
                console.log('mounted', this);
                this.id = setInterval(() => {
                    this.opacity -= 0.01
                    if (this.opacity <= 0)
                        this.opacity = 1

                }, 16)
            },
            beforeDestroy() {
                console.log('vm驾鹤西游了'),
                    clearInterval(this.timer)
            }
        })
    </script>