Vue钩子函数

什么是钩子函数

钩子函数其实就是生命周期函数，从一个vue实例被创建到最后的销毁，经历的几个阶段对应的函数。

beforeCreate

该函数在Vue实例化时调用，其实就是初始化函数，在vue1.0中叫init。el和data并没有初始化。

created

在创建实例后调用。data已经初始化，但是el还没有。

beforeMount

完成了 el 和 data 初始化 。实例还没有挂载到DOM上，但是虚拟DOM已经初始化完成。

mounted

完成挂载，相当于js中的window.onload=function(){}，相当于jquery中的$(document).ready(function(){}),实际上就是在dom文档渲染完成之后将要执行的函数。

mounted还不能保证确定已经加载完了dom，可以在mounted函数中加上$nextTick函数确保加载完成。

beforeUpdate

组件更新之前

update

组件更新之后

beforeDestory

组件销毁前

destoryed

组件销毁后调用

使用

<script>
export default {
    el: "",
    data () {
        return {
          list: []
        }
    },
    beforeCreate:function(){
        console.log('init');
    },
    created:function(){
        console.log('created ');
    },
    mounted:function(){
        this.$nextTick(function(){
            console.log('mounted');  
        })
    },
    beforeDestroy:function(){
        console.log('beforeDestroy');
    },
    destroyed:function(){
        console.log('destroyed');
    }
}
</script>