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 （数据被改变，渲染完成后触发）