Vue 生命周期

生命周期函数

生命周期函数就是 Vue 实例在某一个时间点会自动执行的函数

简单来说就是，钩子（生命周期函数）就好像是把人的出生到死亡分成一个个阶段，你肯定是在出生阶段起名字，而不会在成年或者死亡的阶段去起名字。或者说你想在出生阶段去约炮，也是不行的。组件也是一样，Vue 在实例化一个组件时会在特定的阶段调用特定的方法，调用的这个方法就叫钩子方法，比如 Vue 在实例化组件之初按顺序调用beforeCreated，created，beforeMounted，mounted，每个阶段组件内部的属性都是不一样的，比如created钩子时视图还没有渲染，就不能做一些dom操作。所以一般特定的钩子做特定的事，比如ajax获取数据就可以在mounted阶段，当然放在created，beforeMounted也是可以的，因为ajax是异步的嘛，ajax之后的回调会放在事件队列的尾部，此时实例化组件整个过程会在ajax回调之前执行完毕。所以ajax操作放在created，mounted里面都是可以的。

在调用new vue时，Vue 会帮我们去创建一个 Vue 的实例，创建过程其实并不是像我们想的这么简单，首先它会初始化一些事件和生命周期相关的内容，

在初始化完成的时候，Vue 会自动的执行一个beforeCreate函数，

之后会初始化一些外部的注入和一些双向绑定相关的事情，当这一部分完成后，基本上 Vue 的初始化就都完成了。在这个节点上又有一个created函数被自动执行

let vm = new Vue({
    el:'#app',
    beforeCreate(){
        console.log('beforeCreate')     
    },
    created(){
        console.log('created')
    }
})

这个时候 Vue 的初始化已经基本结束了，然后它会询问一个条件：你这个 Vue 实例里是否有el这个选项

如果有就会询问是否有template这个选项：

• 如果没有就会走右侧的这个分支，

  • 如果这个实例没有templeate，就会将el这个根节点当做模版，来进行渲染

• 有就会走左侧的分支

  • 把template作为模版去渲染

上面这一步走完后，并没有立即渲染，在渲染之前会执行beforeMount函数

当这个函数执行之后，模版结合数据最终生成的Dom元素，会被挂载到页面之上

当被挂载到页面之上，也就是hello world显示到页面之上，这时候mounted函数会被执行（页面挂载之后会执行）

let vm = new Vue({
    el:'#app',
    beforeCreate(){
        console.log('beforeCreate')
    },
    created(){
        console.log('created')
    },
    beforeMount(){
        console.log($el)                //<div id="app"></div>
        console.log('beforeMount')
    },
    mounted(){
        console.log($el)                //<div id="app">Hello world</div>
        console.log('mounted')
    }
})

这里也验证了beforeMount执行时，页面还没有被渲染，mounted执行时，页面已经被渲染了

在往下是beforeDestory（实例被销毁前执行），destoryed（实例销毁完成后执行）

当数据被改变时，会执行beforeUpdate（数据被改变，还没渲染之前触发），updated（数据被改变，渲染完成后触发）