Vue生命周期钩子函数的理解

Vue生命周期:从Vue实例创建到Vue实例销毁的过程,有11个钩子函数,其中三个是对于组件activated deactivated errorCapured.

1.beforeCreate(){}----数据注入vm实例之前,此时vm还没有数据 ,vm实例的挂载元素$el 和数据对象data 都为undefined,方法也是未定义

<div id='app'>{{msg}}</div>
    <script type='text/javascript'>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello Vue'
            },
            methods: {
                say() {
                    console.log('ok')
                }
            },
            //1.数据注入vm实例之前,此时vm还没有数据
            beforeCreate() {
                console.log(this.msg) //返回undefined
                console.log(this.$el) //返回undefined
                this.say() //报错
            }
        })
</script>

2.created(){} ---数据注入vm实例之后,此时vm已经有数据了, 数据对象data和方法可以打印出来,挂载元素$el未定义

//2.数据注入vm实例之后,此时vm已经有数据了
            created() {
                console.log(this.msg)//返回'hello vue'
                console.log(this.$el)//返回undefined
                this.say()//返回'ok'
            },

3.beforeMount(){}---创建出来的结构,替换视图之前 ,此时挂载元素$el初始化,但还是为挂载前的虚拟dom节点,{{msg}}没有替换

//3.创建出来的结构,替换视图之前=>有虚拟dom没有数据
            beforeMount() {
                console.log(this.$el) //返回<div id='app'>{{msg}}</div>
                console.log(document.querySelector('#app').innerHTML) //{{msg}}
            },

4.mounted(){}---创建出来的结构,替换视图之后, 此时vm实例挂载完成,{{msg}}成功渲染,页面可以看到数据

//4.创建出来的结构,替换视图之后
            mounted() {
                console.log(this.$el) //<div id='app'>hello Vue</div>
                console.log(document.querySelector('#app').innerHTML) //hello Vue
            },

5.beforeUpdated(){}---数据变化了,视图更新之前 还是显示之前的数据

 <div id='app'>{{msg}}</div>
    <script type='text/javascript'>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello Vue'
            },
            methods: {
                say() {
                    console.log('ok')
                },
                change() {
                    setTimeout(() => {
                        this.msg = 'change'
                    }, 1000);
                }
            },
             created() {
                this.change()
            },
             //5.数据变化了,视图更新之前
            beforeUpdate() {
                console.log(document.querySelector('#app').innerHTML) //hello vue
            },
})

6.updated(){}---数据变化了,视图更新之后 显示更新后的数据

//6.数据变化了,视图更新之后
            updated() {
                console.log(document.querySelector('#app').innerHTML) //change
            },

7.beforeDestroy(){} ---实例销毁 资源释放之前

8.destroyed(){}---实例销毁 资源释放之后,对data的改变不会再触发周期函数,已经解除了事件监听和dom的绑定,但是dom结构依然存在

            methods: {
                destroy() {
                    setTimeout(() => {
                        this.$destroy()
                    }, 2000);
                }
            },
            created() {
                this.destroy()
            },
             //7.实例销毁 资源释放之前
            beforeDestroy() {
                console.log('销毁前...')
            },
            //8.实例销毁 资源释放之后
            destroyed() {
                console.log('已经销毁...')
            },