Vue生命周期

Vue的生命周期是学习vue的基础，因此熟悉生命周期十分重要。

下面先上一张生命周期的图，对于初学者来说有图的情况下会更加好理解。

 

一、 beforeCreate created beforeMount mounted 

 输出四个钩子函数，了解其中运行的顺序。

<div id='app'>
        {{msg}}
    </div>

var vm = new Vue({
        el:'#app',
        data: {
            msg:'测试'
        },
        methods: {
            test(){
                console.log('test')
            }
        },
        // 此时数据data和事件方法methods还未绑定到vm对象上
        beforeCreate(){
            console.log('beforecreate')
            
        },
        created(){
            console.log('created')
        },
        beforeMount(){
            console.log('beforemount')
        },
        mounted(){
            console.log('mounted')
        },

     })

 

运行结果：

 

 

结论： 可以看见执行顺序和vue生命周期图一致。

 

 接下来我们分析一下各个阶段

1.1首先是beforeCreate   

在控制台输出data和methods中的属性和方法，并且获取div里的内容。

<div id='app'>
        {{msg}}
    </div>

 beforeCreate(){
            console.log('beforecreate')
            console.log(this)
            console.log(this.msg)
            console.log(this.test)
            let value = document.getElementById('app').innerHTML
            console.log(value)
            
        }

 

运行结果:    

 

 

 

结论： vue实例已经创建， data和methods 为undefined，data和methods还没有绑定到vue实例对象上。msg也未能渲染到页面上。

 

1.2 created

<div id='app'>
        {{msg}}
    </div>

created(){
            console.log('created')
            console.log(this)
            console.log(this.msg)
            console.log(this.test)
            let value = document.getElementById('app').innerHTML
            console.log(value)
        }

 

运行结果:

 

 

结论： vue实例已经创建，同时data和methods已经绑定到vue实例对象上。     msg 还是未能渲染出来。

1.3  beforeMount

渲染之前

<div id='app'>
        {{msg}}
    </div>

 beforeMount(){
            console.log('beforemount')
            console.log(this)
            console.log(this.msg)
            console.log(this.test)
            let value = document.getElementById('app').innerHTML
            console.log(value)
        }

运行结果：

 

 

结论：因为是渲染之前，所以msg还是没有渲染出来。另外提醒一点，根据data数据生成的DOM对象及其属性是获取不到的

1.4    mounted

渲染之后

<div id='app'>
        {{msg}}
    </div>

 mounted(){
            console.log('mounted')
            console.log(this)
            console.log(this.msg)
            console.log(this.test)
            let value = document.getElementById('app').innerHTML
            console.log(value)
        }

 

运行结果：

 

 

结论：msg已经成功渲染出来。另外可以获取data数据生成的DOM对象及其属性。

 

二   更新   beforeUpdate  updated  

这两个钩子函数直接一起说

<div id='app'>
        {{msg}}
    </div>

data: {

            msg:'测试'

        },

 

beforeUpdate(){

            console.log('更新前')
        },
        updated(){
            console.log('更新后')
        }

 

运行结果：

 

 结论：这两个钩子函数会在数据改变前和改变后触发。

 

三、销毁  beforeDestroy  destroyed  

这两个钩子函数，我用组件来演示一下。

 <div id='app'>
        
        <hellovue v-if="flag"></hellovue>
    </div>
    

let hello = Vue.component('hellovue',{
            template:'<div>{{sayHi}}</div>',
            data:function(){
                return {
                    sayHi:'hi',
                }
            },
            
            beforeDestroy(){
                console.log('销毁前')
            },
            destroyed(){
                console.log('销毁后')
            }
        })

var vm = new Vue({
            el: '#app',
            data: {
                flag:true
            },
            components:{
                'hellovue':hello,
            },

        })

 

运行结果：

设置v-if 的flag值为false，让组件销毁。  可以看到两个钩子函数都已经触发。

结论：在组件的销毁前后会触发的两个钩子函数。

 

使用v-if销毁组件后，当要重新渲染组件时，会重新加载生命周期。会十分消耗性能，演示如下：

这里只上组件的代码，其他的与上面一致，就不贴代码了。

let hello = Vue.component('hellovue',{
            template:'<div>{{sayHi}}</div>',
            data:function(){
                return {
                    sayHi:'hi',
                }
            },
            beforeCreate() {
                console.log('beforecreate')
               
            },
            created() {
                console.log('created')
               
            },
            beforeMount() {
                console.log('beforemount')
               
            },
            mounted() {
                console.log('mounted')
                
            },
            beforeUpdate() {
                console.log('更新前')
            },
            updated() {
                console.log('更新后')
            },
            beforeDestroy(){
                console.log('销毁前')
            },
            destroyed(){
                console.log('销毁后')
            }
        })

 

运行结果：  

 

 

 

结论： 在设置flag=true时，即重新渲染组件，可以看到组件必须经历4个阶段，非常消耗性能。

 

使用v-show的效果

v-show在为false的时候，不会触发 两个销毁的钩子函数。  只会触发数据更新钩子。

同时在重新渲染组件的时候也不再需要经历4个阶段，降低性能消耗。因为他只是把display的属性改为了none。

运行效果：