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

Posted 2022-11-12 王同学要努力

【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>