Vue生命周期/钩子函数

Vue生命周期是指vue实例从创建、加载、更新到销毁的过程。

下面是所以知识的整合图，基于官方提供的图片：

beforeCreate和created

下面的代码是Vue类实例的实例化，当new创建出一个对象出来后，钩子函数就可以理解会在构造函数中依次执行。

let vm = new Vue({
    el:"#app"
})

beforeCreate钩子会在data和methods等属性添加到vue实例对象之前被执行。

        let vm = new Vue({
            el:'#app',
            data:{
                msg:'----',
            },
            methods: {
                fn(){
                    console.log(1)
                }
            },
            beforeCreate() {
                console.log(this)
                //可以使用debugger方便调试
            }
        });

我们可以使用debugger调试得到beforeCreate钩子执行时vm对象的结构，我们发现没有初始化data和methods，$el未被初始化。

created钩子则会在vm实例对象初始化完后执行，我们添加该函数再进行测试：

            created() {
                console.log(this)
                debugger 
            },

这下我们发现我们data和methods等属性被赋值给了vm对象，$el还是没有被初始化，所以我们发现如果停止在这个函数刚执行完，网页中的插值表达式以及v-指令还没有执行。

beforeCreate和created是vue实例初始化前后的两个钩子函数，但是created执行时我们的vue实例仍然还没有同步到视图层，也就是el属性对应的节点还没执行插值表达式和v-指令。

我们项目中可能存在在created钩子中进行一些资源的异步请求，目的是为了预加载一些后面要使用的资源。浏览器识别到资源已加载会在后续请求时直接使用从而加快页面加载。

beforeMount和mounted

这个两个钩子函数所执行的环节是最重要也是比较难的知识点，我们vue实例挂载到dom前后会执行这两个钩子函数，这就和数据双向绑定以及diff算法有相同的知识概念。

dom可以指就是dom树，我们的vue实例本身包含一个虚拟dom，数据和结构来自vue实例的属性，当我们的vue实例中被劫持的数据产生变化时，虚拟dom就会将改变渲染成真实的dom并通过diff算法尽量局部地替换dom树中的节点，从达到数据驱动，MVVM理念。

beforeMount钩子比较特殊，从created到beforeMount的过程中，构造器会看vue实例是否有el是否template属性，

如果你给根组件赋值template，那么el所选择的节点dom会被template模板直接覆盖。我们目前所学的都是基于vm实例对象也就是根组件。

写篇文章之必须马上精通vue——（11）Vue生命周期/钩子函数

Vue生命周期/钩子函数

beforeCreate和created

beforeMount和mounted