vue生命周期概述

 

目录

        一、Vue的生命周期阶段（通俗讲指的是页面的阶段）

                 vue生命周期分为四个阶段

        二、生命周期钩子函数 （ 具体到某个阶段的具体时间）

                1. 创建前    beforeCreate( ){ }    

                2. 创建后    created( ){ }    

                3. 挂载前    beforeMount( ){ } 

                4. 挂载后    mounted( ){ }    

                5. 更新前    beforeUpdate( ){ }

                6. 更新后    Updated( ){ }

                7. 销毁前    beforeDestroy( ){ }

                8. 销毁后    destroyed( ){ }    

---

一、Vue的生命周期阶段（通俗讲指的是页面的阶段）

        vue生命周期分为四个阶段

        （1）创建阶段

        （2）挂载阶段

        （3）更新阶段    当页面发生变化时

        （4）销毁阶段    当页面关闭时被执行

二、生命周期钩子函数 （ 具体到某个阶段的具体时间） 

        注：生命周期钩子函数执行顺序与代码位置前后无关

        1.创建前    beforeCreate( ){ }    

                获取不到数据且真实dom元素没有被渲染出来。

        2.创建后    created( ){ }    

                可以访问data当中的变量。但是页面当中真实dom节点还是没有渲染出来，在这个钩子           函数里面，可以进行相关初始化事件的绑定、发送请求操作

        3.挂载前    beforeMount( ){ }

                dom还没有渲染出来，这个钩子函数与created钩子函数用法基本一致，可以进行相关初          始化事件的绑定、发送ajax操作。

        4.挂载后    mounted( ){ }    

                首次页面渲染全部完成，内部可以做一些实例化相关的操作

        5.更新前    beforeUpdate( ){ }

                当组件挂载完毕的时候，并且当数据改变的时候，才会立马执行,这个钩子函数获取dom           的内容是更新之前的内容

        6.更新后    Updated( ){ }

               这个钩子函数获取dom的内容是更新之后的内容生成新的虚拟dom，新的虚拟dom与之         前的虚拟dom进行比对，差异之后，就会进行真实dom渲染。在updated钩子函数里面就可以         获取到因diff算法比较差异得出来的真实dom渲染了。

        7.销毁前    beforeDestroy( ){ }

                实例销毁之前调用。在这一步，实例仍然完全可用。

        8.销毁后    destroyed( ){ }    

               实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监         听器被移除，所有的子实例也都被销毁。

三、实例

        下面是相关的练习代码，运行后就会理解上面的详解：

​
​
body>
    <div id="app">
        <p>{{message}}</p>
        <button @click="change">更新</button>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'hello world'
        },
        methods: {
            change() {
                this.message = 'goodbye world'
            }
        },
        beforeCreate() {
            console.log('------创建前------')
            console.log(this.message)
            console.log(this.$el)
        },
        created () {
            console.log('------创建后------')
            console.log(this.message)
            console.log(this.$el)
        },
        beforeMount () {
            console.log('------挂载前---------')
            console.log(this.message)
            console.log(this.$el)
        },
        mounted () {
            console.log('------挂载后---------')
            console.log(this.message)
            console.log(this.$el)
        },
        beforeUpdate () {
            console.log('------更新前---------')
            console.log(this.message)
            console.log(this.$el)
        },
        updated() {
            console.log('------更新后---------')
            console.log(this.message)
            console.log(this.$el)
        }
    })
</script>

​

​

感谢大家的浏览！！如有不全还请谅解。