Vue生命周期相关函数

阳光穿透心脏的1/2处 2023-02-22 10:39 14阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="../js/vue-2.4.0 .js"></script>
        <title>生命周期</title>
    </head>
    <body>
        <div id="app">
            <input type="button" value="点击修改字符串" @click="change">
            <h4 id="h4">{ {  msg }}</h4>
        </div>
        <script src="../js/vue-2.4.0 .js"></script>
        <script>
            var vm = new Vue({ 
                el: '#app',
                data: { msg: 'ok, 上面方法下元素可以打印出来'},
                methods: { 
                    change () { 
                        this.msg = 'no ok'
                    }
                },
                    beforeCreate() { 
                        // 这是遇到的第一个生命周期函数,表示实例完全被创建之前会创建它
                        // 总是在创建实例var vm = new Vue({})，之前执行
                    },
    
                    /*重要1*/
                    created() { 
                        // 这是遇到的第二个生命周期函数
                        // 在created，中data和methods都已经被初始话好了
                        // 如果要调用methods函数，最早只能在created中操作
                    },
    
    
                    beforeMount() { 
                        // 这是遇到的第三个生命周期函数
                        // 模板已经在内存中编译完成，但是未渲染到页面中
                        // 在beforeMount执行的时候，页面中的元素还没有真正替换过来
                        // ，如{ {msg}},还没来得及渲染到他真实的数据
                        console.log('beforeMount')
                        console.log(document.getElementById('h4').innerText)
                    },
    
                    /*重要*/
                    mounted() { 
                        // 这是遇到的第四个生命周期函数
                        // 表示内存中的模板，已经真实的花在到页面中，用户已经可以看到渲染好
                        console.log('mounted')
                        console.log(document.getElementById('h4').innerText)
                        // 他是创建实例期间最后一个生命周期函数，当执行完mounted就
                        // 表示已经被完全创建好了，此时，如果没有其他操作的话，这个
                        // 实例就静静的，趟在我们内存中，一动不动
                        
                        /***************************** 只要执行完了mounted,就表示整个Vue实例已经初始话完毕了； 此时组件以脱离创建阶段，进入了运行阶段 *****************************/
                    },
    
                    /*组件运行阶段的生命周期函数只有两: beforeUpdate, updated 这两时间会根据data数据的没改变，有选择的出发0次到多次 */
                    // 接下来的是运行中的两个事件
                    beforeUpdate() { 
                        // 当数据发生改变的时候才会被调用
                        console.log('beforeUpdate')
                        console.log(document.getElementById('h4').innerText)
                        console.log('现在data中的数据为:' + this.msg)
    
                        /* 总结: 当执行beforeUpdate的时候，页面中的显示的数据，还是旧的，此时 data的数据是最新的，页面尚未和最新的数据同步 */
                    },
                    updated() { 
                        // updated事件执行的时候，页面和data数据已经同步了，都是最新的
                        // 页面在执行uodated之后，页面才能变成最新的
                    },
    
                    // 当销毁的时候，关闭浏览器的时候，会执行beforeDestroy()和destroy()函数
            })
        </script>
    </body>
    </html>