Vue实例的生命周期

2019-08-12  本文已影响0人  最爱喝龙井

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()
说明: 销毁后触发

上一篇 下一篇

猜你喜欢

热点阅读