vue生命周期的理解

前言：

先放一张vue官网的生命周期的图片：

大致分为“创建>挂载>更新>销毁”，开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。

可以看出大概分为8个阶段：

beforeCreate

生命周期的开始先是创建一个实例new Vue()，此时会默认执行vue组件里的init()，首先调用beforeCreate方法，此时vue实例的挂在元素el、data option、methods option都是undefined，尚未初始化，所以去操作vue实例中的属性、方法都是无效的。

created

在实例创建完成后此方法会被立即调用，并进行属性和方法的运算，watch/event 事件回调，即这个时候data option、methods option已初始化完成，可调用。然而，挂载阶段还没开始，$el属性目前不可见。
其次，此时会判断实例是否有el选项，无则调用vm.$mount(el)方法，接着进行下一步；有则直接进行下一步，即判断是否有template，有则解析成render funtion，无则将el元素的outerHTML编译成模板。
注：template模板通过vue-loader处理后将处理结果放在vue-loader解析过的文件里。这样做的好处是由于template转换成render function这一步骤会耗时较久，这样处理以后后面再页面上执行vue代码时效率会提升。但记得，此处只是将template转换成render function，并不会执行render函数。

beforeMount

此时，$el和data option、methods option已初始化完成，但并没有挂载，为虚拟节点，data.message并未替换生效。
其次，render function开始执行。
注：意思是说这在个时候，$el还只是HTML里的节点，并没有渲染到body里面。

mounted

mounted的作用是检测数据变化，随时更新DOM。
当vue的生命周期运行到这个时候，el被新创建的 vm.$el替换，并挂载到实例上去之后调用该钩子，data.message已被替换。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

注： mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在mounted中使用vm.$nextTick方法确保程序正常运行。

后续的钩子函数需要外部出发才会执行。

beforeupdate

当数据变化时（无论是在哪里，只要涉及到数据变化），会马上调用此方法。发生在Virtual DOM （虚拟 DOM）打补丁之前。
======》VUE虚拟dom/ 打补丁？？？？
该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

这里补充一个虚拟DOM的知识：
Dom操作是比较浪费时间和性能的，当数据量很大时，更新DOM是非常耗费性能的操作。
当我们使用Javascript来修改我们的页面，浏览器已经做了一些工作，以找到DOM节点进行更改。
琐碎且频繁的更新会使页面缓慢，同时这也是不可避免的。虚拟Dom技术就是用于提高页面更新的速度。
虚拟Dom技术的核心就是使用js对象来替代dom节点。
比如：
在一个HTML中，DOM节点通常表示如下：

<ul id='myId'>
  <li>Item 1</li>
  <li>Item 2</li>
<ul>

但DOM 节点也可以表示 JavaScript 中的对象，像这样：

Let domNode = {
  tag: 'ul'
  attributes: { id: 'myId' }
  children: [
    // where the LI's would go
  ]
};

当我们更新虚拟节点时，只需：

domNode.children.push('<ul>Item 3</ul>');

如果我们使用虚拟DOM，而不是直接在代码中调用类似 .getElementById 的 DOM API 方法，操作就会像改变 JS 对象一样非常的简单省时。这个方法是调用DOM API来更改真正DOM的 它会分批执行从而获取更高的效率。

sync(originalDomNode, domNode);

注：凡事都有两面性。

• 更多的功能意味着更多的代码，但幸运的是，vue2.x仍然是相当小的。
• 虚拟DOM需要在内存中的维护一份DOM的副本。在DOM更新速度和使用内存空间之间取得平衡。

应用场景

虚拟DOM不是适合所有情况
如果虚拟DOM大量更改，这是合适的。
但是，如果单一的，频繁的更新的话，虚拟DOM将会花费更多的时间处理计算的工作。
所以，如果你有一个DOM节点相对较少页面，用虚拟DOM，它实际上有可能会更慢。
但对于大多数单页面应用，这应该都会更快。

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher代替他。

注： updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在updated中用 vm.$nextTick 以确保程序正常运行。
该钩子在服务器端渲染期间不被调用。

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。
该钩子在服务器端渲染期间不被调用。

destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
该钩子在服务器端渲染期间不被调用。

其他

在created或mounted中使用异步加载时，加载顺序：created>mounted>异步函数>updated。只要data属性中的数据发生变化即会马上调用updated方法，若想要在created、mounted中的异步函数不置后调用，可在改方法中使用 vm.$nextTick方法使程序按正常情况运行。