一、生命周期

Vue生命周期是指vue实例对象从创建之初到销毁的过程,掌握和理解生命周期过程中每一个步骤的作用,可以更加合理的安排我们不同业务逻辑具体的执行位置。

beforeCreate在官方文档描述中说,在做一些数据监视和事件初始化,这里有一个容易让人走偏的地方,就是事件初始化,其实就是为vue对象添加一些属性,就是methods中的一些函数全部作为vue对象的属性存在,Vue会讲所有的data数据和methods中的函数添加到创建的vue对象上面。

created 这个方法表示,vue对象已经创建成功,这里要搞清楚vue对象并不是我们所说的虚拟dom,vue对象就是一个js对象,他内部只是对数据进行操作,通过对数据的操作进而影响到虚拟dom的构建,所以在这个方法中我们可以做一些数据初始化工作,最常见的就是发送ajax请求来对已经构建完毕的vue对象的静态属性进行一些初始化

compile 这个方法是正真开始构建虚拟dom,这里值得注意的地方是,虚拟dom和真实dom的差别,说到这里相信许多同学跟我一样有很多疑惑,既然已经有虚拟dom了为什么还要构建真实dom,我们操作了虚拟dom以后直接appendChild不行嘛。答案是no, 虚拟dom并不是dom,他只是描述了一个dom结构,编译模版的过程(模版有两种来源,这里不述),就是根据模版的html结构来创建虚拟dom的过程,如果大家没没懂,那么请看以下代码:

* 模版结构

<ul  class='list'><li>item1</li><li>item2</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 wechangesomethinginourVirtualDOM Tree, wegetanewVirtualTree. Algorithm compares these two trees (oldandnew), finds differencesandmakesonlynecessary small changestorealDOM so it reflectsvirtual(如果我们在虚拟dom中对数据做了修改,我们会得到一个新的虚拟dom结构,算法比较这两颗dom树,找到不同之处,只需要在真实dom中做必要的修改来对应虚拟DOM)在编译期间我们要做的就是根据模版DOM结构来构造一个数据结构来对应模版html结构

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

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

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

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实例对象生成的一个逆过程,一句话来说就是:潮水怎么来就怎么退去。。

接着来聊一下性能问题。很多同学可能在想既然他存在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。

推荐阅读更多精彩内容