完成生命周期学习

2 years ago · 2bcd05f8a7
parent 3961b3340b
commit 2bcd05f8a7
2 changed files with 89 additions and 0 deletions
--- a/17_生命周期/2.分析生命周期.html
+++ b/17_生命周期/2.分析生命周期.html
@ -9,6 +9,7 @@
 <div id="root" x="1">
    <h2>当前的n值是：{{n}}</h2>
    <button @click="add">n+1</button>
    <button @click="bye">销毁vm</button>
 </div>
 <script type="text/javascript">
    Vue.config.productionTip = false  // 组织开发环境提示
@ -27,9 +28,22 @@
        },
        methods: {
            add() {
                console.log("add")
                this.n++
            },
            bye() {
                console.log("bye")
                this.$destroy()
            }
        },
        watch: {
            n() {
                console.log("n变了")
            }
        },
        // 常用的生命周期包含 mounted和beforeDestroy
        // mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等（初始化操作）
        // beforeDestroy： 清除定时器、解绑自定义事件、取消订阅消息等（收尾工作）
        // 初始化步骤1， 初始化了生命周期和事件，但是没有开始数据代理
        beforeCreate(){
            console.log("beforeCreate")
@ -53,8 +67,31 @@
        mounted() {
            console.log("mounted")
            console.log(this)
            // debugger
        },
        // 当数据更新后触发更新流程，此时data数据已更新，并步骤之后会生成新的虚拟DOM并与老的虚拟DOM做对比，执行updated来将差异重新渲染
        beforeUpdate() {
            console.log("beforeUpdate")
            console.log(this.n)
            console.log(this.$el)
            // debugger
        },
        // 完成重新渲染
        updated() {
            console.log("updated")
            console.log(this.n)
            // debugger
        },
        // 完全销毁一个vm实例，清理它与实例的连接，解绑全部指令和自定义监听事件
        beforeDestroy() {
            console.log("beforeDestroy")
            this.add()
            debugger
        },
        // 完成销毁
        destroyed() {
            console.log("destroyed")
        }
    })
--- a/17_生命周期/3.总结生命周期.html
+++ b/17_生命周期/3.总结生命周期.html
@ -0,0 +1,52 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>总结生命周期</title>
    <script type="text/javascript" src="../vue.js"></script>
 </head>
 <body>
 <div id="root">
    <h2 v-if="isShowHello">你好</h2>
    <h2 :style="{opacity}">欢迎学习Vue</h2>
    <button @click="opacity = 1">透明度设置为1</button>
    <button @click="stop">停止变换</button>
 </div>
 <script type="text/javascript">
    Vue.config.productionTip = false  // 组织开发环境提示
    // 创建Vue实例
    const vm = new Vue({
        el: '#root',
        data: {
            isShowHello: true,
            opacity: 1
        },
        methods: {
            stop() {
                this.$destroy()
            }
        },
        // Vue完成模板解析，并把真实的DOM放入页面后调用mounted注意这里是方法函数，不是对象，刷新页面不会调用mounted
        mounted() {
            console.log('mounted')
            this.timer = setInterval(() => {
                console.log("setInterval")
                this.opacity -= 0.01
                if (this.opacity <= 0) this.opacity = 1
            }, 16)
        },
        beforeDestroy() {
            console.log("beforeDestroy-清除定时器")
            clearInterval(this.timer)
        }
    })
    // setInterval(()=>{
    //   vm.opacity -= 0.01
    //   if (vm.opacity <= 0) vm.opacity = 1
    // },16)
 </script>
 </body>
 </html>