Vue实例的生命周期

Vue实例的生命周期

生命周期：就是指的Vue实例在创建的过程中，经历的几个时间段，每个时间段有一个事件处理函数来表示当时的状态。

看个图：

lifecycle.png

1. beforeCreate()
作用： Vue实例此时不能够访问data和methods中的数据，表示Vue实例创建之前

var vm = new Vue({
            el: '#app',
            data: {
                msg: 'ok'
            },
            methods: {
                show() {
                    console.log('hello world')
                }
            },
            beforeCreate() {
                console.log(this.msg) //undefined
                this.show() // 报错
            }
        })

2. created()
作用： 表示此时初始化好了，可以访问data和methods中的数据了

var vm = new Vue({
            el: '#app',
            data: {
                msg: 'ok'
            },
            methods: {
                show() {
                    console.log('hello world')
                }
            },
            created() {
                console.log(this.msg); // ok
                this.show()  // hello world
            }
        })

3. beforeMount
说明： 此时的模板已经在内存中编译好了，但还没有挂载到页面中去，此时的页面还是旧的

var vm = new Vue({
            el: '#app',
            data: {
                msg: 'ok'
            },
            methods: {
                show() {
                    console.log('hello world')
                }
            },
            beforeMount() {
                console.log(document.getElementById('msg').innerHTML) // {{ msg }}
            }
        })

4. mounted
说明：此时的模板已经编译好了，并挂载到了页面当中，如果某些插件要操作dom最早也要在这里进行操作

var vm = new Vue({
            el: '#app',
            data: {
                msg: 'ok'
            },
            methods: {
                show() {
                    console.log('hello world')
                }
            },
            mounted() {
                console.log(document.getElementById('msg').innerHTML) // ok
            }
        })

5. beforeUpdated()
说明：当数据发生改变的时候触发这个函数，但是此时的页面还是旧的，数据是新的

var vm = new Vue({
            el: '#app',
            data: {
                msg: true
            },
            methods: {
                show() {
                    this.msg = !this.msg
                }
            },
            beforeUpdate() {
                console.log(document.getElementById('msg').innerHTML) // true
                console.log(this.msg) // false
            }
           
        })

6. updated()
说明：数据改变，页面已经挂载完成的时候触发，此时数据与页面保持一致

var vm = new Vue({
            el: '#app',
            data: {
                msg: true
            },
            methods: {
                show() {
                    this.msg = !this.msg
                }
            },
            updated() {
                console.log(document.getElementById('msg').innerHTML) // false
                console.log(this.msg) // false
            }
           
        })

7. beforeDestroy()
说明： 在销毁之前触发，此时的data、methods以及过滤器等都是可用的

8. destroyed()
说明： 销毁后触发