vue的生命周期

1. beforeCreate在官方文档描述中说，在作一些数据监视和事件初始化，这里有一个容易让人走偏的地方，就是事件初始化，其实就是为vue对象添加一些属性，就是methods中的一些函数所有做为vue对象的属性存在，Vue会讲全部的data数据和methods中的函数添加到建立的vue对象上面。
2. created 这个方法表示，vue对象已经建立成功，这里要搞清楚vue对象并非咱们所说的虚拟dom，vue对象就是一个js对象，他内部只是对数据进行操做，经过对数据的操做进而影响到虚拟dom的构建，因此在这个方法中咱们能够作一些数据初始化工做，最多见的就是发送ajax请求来对已经构建完毕的vue对象的静态属性进行一些初始化

3. compile 这个方法是正真开始构建虚拟dom，这里值得注意的地方是，虚拟dom和真实dom的差异，说到这里相信许多同窗跟我同样有不少疑惑，既然已经有虚拟dom了为何还要构建真实dom，咱们操做了虚拟dom之后直接appendChild不行嘛。答案是no， 虚拟dom并非dom,他只是描述了一个dom结构，编译模版的过程（模版有两种来源，这里不述），就是根据模版的html结构来建立虚拟dom的过程，若是你们没没懂，那么请看如下代码：
   * 模版结构
   > <ul class=”list”> > <li>item 1</li> > <li>item 2</li> > </ul>
   * 根据模版结构生成的虚拟dom结构，

   >{ type: ‘ul’, props: { ‘class’: ‘list’ }, children: [ > { type: ‘li’, props: {}, children: [‘item 1’] }, > { type: ‘li’, props: {}, children: [‘item 2’] } >] }

   以上代码时不是清晰明了，虚拟dom只是描述了一种数据结构，他并不表明真实的dom对象，他只是描述了一个dom tree该有的组织方式，编译的过程就是根据模版结构生成dom数据结构的方式，高大上一点叫作虚拟dom。
   Sumarry一下：
   - Virtual DOM is any kind of representation of a real DOM （虚拟dom只是真实dom的一个表明）
   - When we change something in our Virtual DOM Tree, we get a new Virtual Tree. Algorithm compares these two trees (old and new), finds differences and makes only necessary small changes to real DOM so it reflects virtual （若是咱们在虚拟dom中对数据作了修改，咱们会获得一个新的虚拟dom结构，算法比较这两颗dom树，找到不一样之处，只须要在真实dom中作必要的修改来对应虚拟DOM）在编译期间咱们要作的就是根据模版DOM结构来构造一个数据结构来对应模版html结构

4. beforeMount 这个过程就是根据编译之后产生的虚拟dom结构来构造一个真实的dom结构，再说一遍，这两个dom有很大的区别，前者只表示数据结构，后者能够直接添加到html文档结构中来渲染一个效果。在这个期间，咱们就能够操做真实的dom对象了，包括咱们为某一个特定的dom节点绑定事件，标签属性，内容的操做等，例如使用select2来修饰select，可是并不推荐在这里进行一些事件绑定或者dom操做，由于在这期间，Vue还要作一件很是重要的事情就是经过Vue本身的方式来标识每个真实的dom节点，咱们在vue里通常都是经过$els或者$refs来操做对应的dom元素，可是这期间正是标注全部元素的过程，颇有可能会出一些意想不到的错误。

5. mounted 见名知意，挂载，表示真实dom已经够早完毕，咱们能够append到父容器当中来构造页面了，在这里咱们就能够完成一些对于真实dom的操做，不管是直接访问dom的属性内容或者事件的绑定，均可以在这里放心大胆的作了，通常状况下咱们不须要直接操做dom，Vue也不推荐这么作，可是这里你须要知道的事若是你有这种需求，彻底能够在这里完成，挂载的过程就是将生成的真实DOM对象append到挂载点下面，就是appendChild的过程，这个时候的虚拟dom结构根生成出来的real dom结构如出一辙，咱们之后要操做的就是这个虚拟dom结构，就是前面根据模版生成出来的dom数据结构。

6. beforeUpdate这个方法在整个生命周期之中也只被调用一次，在作什么呢，想想上面所作的事情，上面是根据模版构造出来一个真实的dom对象，到如今他并无跟咱们的vue实例对象扯上关系，怎么经过咱们的vue实例来影响到真实的dom对象呢，怎么把咱们的数据绑定的真实dom当中了，之后咱们只须要操做数据就能够影响到dom结构的渲染呢？在这个方法里，Vue一样依据前面的规则根据vue实例提供的数据在模版中的位置来从新生成一个虚拟dom数据结构，没错，你没看错，咱们要生成两个虚拟dom，前一个dom只是dom结构，并无绑定咱们vue的属性数据，这一个dom是绑定了咱们vue实例数据的dom结构，在这个dom生成的过程当中，vue根据本身的语法规则，对好比指令，表达式之类的东西进行替换，生成一个新的虚拟dom结构，接下来咱们要作什么，我想你们应该所料不错，没错，鼻孔朝天的那位同窗说的很对，就是进行比较两个虚拟dom之间存在的差别。请不要走开，广告以后更加精彩。。。。。

7. update，接着上一集，咱们继续吹，这个方法在咱们整个生命周期以内会反复调用，你会发现，每一次对vue对象的变动都会触发update方法，他作了什么呢，他就是在反复的生成一个virtual dom，生成的新dom不断跟以前的dom结构进行比对，这里又一个比较高大上的比对算法，叫differ，我想在座各位同窗是否是有一种恍然大悟的赶脚，前面几集我说过，Vue在beforeMount的时候会对每个dom节点进行标记，他为了什么嘞？ 你懂了没有呢？不懂去面壁，Vue对每个节点进行标记就是为了更加快速准确的定位dom节点。。。

   用一种更加清楚明了的总结方式就是代码：

   // 1. 构建虚拟DOM var tree = el('div', {'id': 'container'}, [ el('h1', {style: 'color: blue'}, ['simple virtal dom']), el('p', ['Hello, virtual-dom']), el('ul', [el('li')]) ]) // 2. 经过虚拟DOM构建真正的DOM var root = tree.render() document.body.appendChild(root) // 3. 生成新的虚拟DOM var newTree = el('div', {'id': 'container'}, [ el('h1', {style: 'color: red'}, ['simple virtal dom']), el('p', ['Hello, virtual-dom']), el('ul', [el('li'), el('li')]) ]) // 4. 比较两棵虚拟DOM树的不一样 var patches = diff(tree, newTree) // 5. 在真正的DOM元素上应用变动 patch(root, patches) 

   至于以后的全部方法我想就没必要深究了，他其实就是vue实例对象生成的一个逆过程，一句话来讲就是：潮水怎么来就怎么退去。。

8. 接着来聊一下性能问题。不少同窗可能在想既然他存在dom操做，确定性能会受到影响，可是这跟坊间传言优势不符啊，坊间都说虚拟dom性能高渲染快，可是为何存在大量dom操做呢？接下来呢我就要跟你聊一聊浏览器的大体组成和你经过原声js作这些适时数据绑定所要作的一些事情了。咸盐少量。。。
   这里引用一位老兄在知乎上的回答，我感受说的很对也很明了，虚拟dom为何很快：
   • JavaScript执行速度很快
   • Dom操做很慢Chrome刚出来的时候，在Chrome里跑Javascript很是快，给了其它浏览器很大压力。而如今通过几轮你追我赶，各主流浏览器的Javascript执行速度都很快了。可是遗憾的是浏览器厂商只对Javascript引擎进行也极限优化，可是对html文档结构的构建速度和css样式的渲染并无多少进步，就是说dom引擎和css引擎的发展速度远远更不上js引擎解析js脚本的速度，这就比较尴尬了，由于js不少时候都是为了操做dom节点和修饰dom，因为html文档结构从新排布的速度远远没有js执行速度快，这在不少时候就形成了难以理解的逻辑错误，称为难以言说的痛。。。。因而在这种状况下，虚拟dom应用而生了，虚拟dom说白了就是一个js结构的对象，他内部的数据组织方式是按照html文档结构组成的树状结构，咱们经过每一次数据的修改来从新构造一个js对象，根据先后对象之间的比对就能够发现具体那个节点发生了变化，而后在真实的dom结构中迅速的定位到元素，进行修改，最小化真实dom的重排和重绘。若是你经过原声js，每次修改dom结构或者内容，你必须从头至尾进行dom节点遍历，形成很大的时间和资源的浪费，这是一点，还有一点就是每一次dom操做致使的结构从新排布，因此最好的dom操做方式是一次性把要修改的东西所有作完，进行一次性行更新。而虚拟dom作到了这一点，尽可能少操做dom，尽可能最小化dom操做，尽可能一次性操做dom，尽可能不去查询dom。clear?