Vue-实例生命周期函数(钩子函数)

Vue实例生命周期函数

一、什么是生命周期：从Vue创建实例、运行实例、销毁实例总是伴随各种事件，这些事件统称为生命周期。

Vue实例生命周期函数图解：

生命周期函数=生命周期事件=生命周期钩子函数
二、主要的生命周期函数：

• 创建时期的生命周期函数：---------------------
• beforeCreate：实例刚在内存中被创建出来只是初始化了默认的生命周期函数和默认的事件，此时，还没有初始化好 data 和 methods 属性
• created：此时，data和methods已经初始化完成(可以访问data和mothods中的数据和方法)，此时还没有编译模板。
• 初始化模板就是执行相关的Vue指令，加载数据。
• beforeMount：挂载之前，初始化完成了模板，并没有真正的渲染到页面。
• mounted：挂载完成，实例模板已经被渲染到页面，用户可以看到渲染之后的页面。
• 运行期间的生命周期函数：--------------------
• beforeUpdate：当data中的数据发生变化，data中的数据已经发生改变，但并没有渲染Dom更新视图。
• updated：此时视图已经更新，data(Model)和view(视图)已经统一了最新的数据，重新渲染了页面。
• 销毁期间的生命周期函数：----------------------
• beforeDestroy：此时Vue’实例并没有真正的销毁，实例完全可用，销毁之前的事件。
• destroyed：此时Vue实例已经完全销毁了，Vue实例指示 的所有的数据，方法，指令，监听的所有事件以及子元素的数据已经销毁释放。

---

实例代码：

 <script src="VueDemo/VueJs/vue.js"></script>
    <script>
        onload = function() {
            var Vm = new Vue({
                el: "#app",
                data: {
                    msg: "ok"
                },
                methods: {
                    show: function() {
                        console.log('show！')
                    }
                },
                beforeCreate() { //Vue实例创建时期的第一个生命周期函数，此时只是初始化了默认的事件和生命周期函数，并没有初始化data和methods 
                    console.log(this.msg) //访问不到
                },
                created() { //Vue实例创建时期的第二个生命周期函数，此时的data和methods数据已经初始化完成

                    console.log(this.msg) //此时数据已经初始化完成

                },
                beforeUpdate() {
                    //这是运行时期的第一个生命周期函数，在data中的数据更新之后，还未更改视图层时
                    // console.log(this.msg);    、、改动后的值
                    // console.log(document.getElementById('txt').nodeValue);  、、旧值
                },
                updated() {
                    //这是运行期间的第二个声明周期函数，此时Data中的数据和View视图的疏忽已经更新完毕
                    console.log(this.msg); //改动后的值
                    console.log(document.getElementById('txt').nodeValue); //新值
                },
                beforeDestroy() {
                    //销毁前
                },
                destroy() {
                    //销毁后  
                },
            })
        }
    </script>