Vue生命周期函数
生命周期
- 事物从出生到死亡的过程
- Vue实例从创建 到销毁的过程 ，这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数
常用的 钩子函数
| beforeCreate | 在实例初始化之后，数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了 |
|---|---|
| created | 在实例创建完成后被立即调用此时data 和 methods已经可以使用 但是页面还没有渲染出来 |
| beforeMount | 在挂载开始之前被调用 此时页面上还看不到真实数据 只是一个模板页面而已，无法操作真实节点，有vm节点但一般不操作 |
| mounted | el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。 数据已经真实渲染到页面上 在这个钩子函数里面我们可以使用一些第三方的插件，可以操作dom节点了，可以在里面做网络请求 |
| beforeUpdate | 数据更新时调用，发生在虚拟DOM打补丁之前。 页面上数据还是旧的，实际是节点更新 |
| updated | 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。 页面上数据已经替换成最新的 |
| beforeDestroy | 实例销毁之前调用 |
| destroyed | 实例销毁后调用 |
一、生命周期函数的一些特性
- beforeCreate ，created， beforeMount， mounted这些钩子都只执行一次
- beforeUpdate，updated第一次构建不会调用,以后每次data被更新了就会调
- beforeDestroy，destroyed 销毁的方式有两种:
用户关闭应用 和 使用代码this.$destroy()来销毁vm实例
二、为什么要用生命周期函数?
- 把整个运行期间的业务区分的很明显
- 能够更好的帮助我们把产品的业务逻辑实现了
- 更有利于我们维护产品 和 修改需求
- 能够让我们写出更高质量的产品的代码
三、网络请求应该在哪个阶段的生命周期函数中,为什么?
可以放在data生成以后更新数据之前 的所有钩子中
具体的更具业务需求来 常见的放在
created或者mounted中，
放在created后面都可以
因为网络请求下来的数据 常常会存在data容器中
created:因为有时候我们希望异步的网络请求和vm的挂载同时进行 体现出CPU多核的优势
mounted:因为有时候我们希望本地的UI骨架已经加载完毕以后再去请求数据刷新UI
四、可以销毁钩子函数做过什么?
常常去把一些运行着的代码停下来
本地或者网络请求来记录用户的配置信息或者偏好设置
总结：
-
beforeCreate：在实例初始化之后，**数据观测(data observer) ** 和 event/watcher事件配置
之前被调用，注意是 之前，此时data、watcher、methods统统滴没有。
这个时候的vue实例还什么都没有，但是$route对象是存在的，可以根据路由信息进行重定向之类的操作。 -
created：在实例已经创建完成之后被调用。在这一步，实例已完成以下配置：数据观测(data observer) ，属性和方法的运算，
-
watch/event 事件回调。然而，挂载阶段还没开始，el属性目前不可见。此时this.el属性目前不可见。此时this.data 可以访问，watcher、events、methods也出现了，若根据后台接口动态改变data和methods的场景下，可以使用。
-
beforeMount：在挂载开始之前被调用，相关的 render 函数
首次被调用。但是render正在执行中，此时DOM还是无法操作的。我打印了此时的vue实例对象，相比于created生命周期，此时只是多了一个$el的属性，然而其值为undefined。
使用场景我上文已经提到了，页面渲染时所需要的数据，应尽量在这之前完成赋值。 mounted：在挂载之后被调用。在这一步 创建vm.el并替换el，并挂载到实例上。（官方文档中的,“如果root实例挂载了一个文档内元素，当mounted被调用时vm.el并替换el，并挂载到实例上。（官方文档中的,“如果root实例挂载了一个文档内元素，当mounted被调用时vm.el也在文档内” 这句话存疑）此时元素已经渲染完成了，依赖于DOM的代码就放在这里吧~比如监听DOM事件。
-
beforeUpdate：vm.data更新之后，虚拟DOM重新渲染和打补丁之前被调用。你可以在这个钩子中进一步地修改vm.data更新之后，虚拟DOM重新渲染和打补丁之前被调用。你可以在这个钩子中进一步地修改vm.data，这不会触发附加的重渲染过程。 updated：虚拟DOM重新渲染 和打补丁之后被调用。当这个钩子被调用时，组件DOM的data已经更新，所以你现在可以执行依赖于DOM的操作。但是不要在此时修改data，否则会继续触发beforeUpdate、updated这两个生命周期，进入死循环！
-
beforeDestroy：实例被销毁之前调用。在这一步，实例仍然完全可用。 实例要被销毁了，赶在被销毁之前搞点事情吧哈哈~
-
destroyed：Vue实例销毁后调用。此时，Vue实例指示的所有东西已经解绑定，所有的事件监听器都已经被移除，所有的子实例也已经被销毁。