Vue.js源码（一）：HelloWorld的背后

varvm=newVue({el:'#mountNode',data:function(){返回{消息：'HelloWorld'}；}}）；本文将解决几个问题：在newVue()的过程中，内部有哪些步骤，如何收集依赖，如何计算表达式，如何在DOM中体现表达式的值简单来说，以上过程为如下：观察：把{message:'HelloWorld'}变成一个反应式编译：compileTextNode"{{message}}"，解析出指令（directive=v-text）和表达式（expression=message），创建一个片段（newTextNode）准备替换链接：实例化指令，将创建的片段与指令链接，替换DOM上的片段bind：通过指令对应的watcher获取依赖（消息）的值（“HelloWorld”),v-text更新值到fragment上的详细过程，再往下看。构造函数文件路径：src/instance/vue.jsfunctionVue(options){this._init(options)}Initialization这里我们只分析最关键的步骤来理解例子。文件路径：src/instance/internal/init.jsVue.prototype._init=function(options){...//mergeoptions.options=this.$options=mergeOptions(this.constructor.options,options,this)...//initializeddataobservationandscopeinheritance.this._initState()...//如果`el`option是通过的，startcompilation.if(options.el){this.$mount(options.el)}}mergeoptionsmergeOptions()定义在src/util在/options.js文件中，这里主要定义了options中各种属性的合并，比如：props、methods、computed、watch等。此外，这里定义了每个属性合并的默认算法（策略）。可以配置这些策略。请参阅自定义选项合并策略。在本文的例子中，主要是数据选项的合并。合并后，放到$options.data里，基本等价于：我们定义的options中的HelloWorld'}}//数据函数在绑定vm实例后执行，执行结果为：{message:'HelloWorld'}varinstanceData=childVal.call(vm)//对象间合并，类似$.extend，结果一定是：{message:'HelloWorld''}returnmergeData(instanceData,parentVal)}initdata_initData()发生在_initState()中，主要做了两件事：代理数据中的属性观察数据文件路径:src/instance/internal/state.jsVue.prototype。_initState=function(){this._initProps()this._initMeta()this._initMethods()this._initData()//这里this._initComputed()}属性代理（proxy）将data的结果赋值给内部属性：文件路径：src/instance/internal/state.jsvardataFn=this.$options.data//我们上面得到的mergedInstanceDataFn函数vardata=this._data=dataFn?dataFn():{}propertyinproxy(proxy)datato_data,makingvm.message===vm._data.message:文件路径:src/instance/internal/state.js/***Proxyaproperty,sothat*vm.prop===vm._data.prop*/Vue.prototype._proxy=function(key){if(!isReserved(key)){varself=thisObject.defineProperty(self,key,{configurable:true,enumerable:true,get:functionproxyGetter(){returnself._data[key]},set:functionproxySetter(val){self._data[key]=val}})}}observe这里是我们的第一个重点，observeprocess在_initData()***中，调用observe(data,this)观察数据。在helloworld例子中，observe()函数主要是为{message:'HelloWorld'}创建一个Observer对象。文件路径：src/observer/index.jsvarob=newObserver(value)//value=data={message:'HelloWorld'}在observe()函数中，也做了一些判断是否观察的条件。这些条件是：NoneObserved（被观察的对象会加上__ob__属性）只能是普通对象（toString.call(ob)==="[objectObject]"）或者数组不能是Vue实例（obj._isVue!==true)Theobjectisextensible(Object.isExtensible(obj)===true)ReactivityinDepthofObserver官网上有这样一句话：当你将一个普通的JavaScript对象作为它的数据选项传递给一个Vue实例时，Vue.js将遍历其所有属性并将它们转换为getter/setter。getter/setter对用户是不可见的，但在底层，它们使Vue.js能够在属性被访问或修改时执行依赖跟踪和更改通知Observer就是做那些事情，让data成为“发布者”，watcher成为订阅者，订阅数据的变化。例子中，创建观察者的过程是：newObserver({message:'HelloWorld'})实例化一个Dep对象，用于收集walk(Observer.prototype.walk())数据依赖的各个属性，这里只有message将属性变为reactive(Observer.protoype.convert())convert()调用defineReactive()，在data的message属性中添加reactiveGetter和reactiveSetter文件路径：src/observer/index.jsexportfunctiondefineReactive(obj,key,value){...Object.defineProperty(obj,key,{enumerable:true,configurable:true,get:functionreactiveGetter(){...if(Dep.target){dep.depend()//这里是集合依赖...}returnvalue},set:functionreactiveSetter(newVal){...if(setter){setter.call(obj,newVal)}else{val=newVal}...dep.notify()//这里是notify观察这个Data依赖(watcher)}})}关于依赖收集和notify，主要是Dep类文件路径：src/observer/dep.jsexportdefaultfunctionDep(){this.id=uid++this.subs=[]}这里是subs一个包含订阅者（即观察者）的数组。当观察到的数据发生变化时，调用setter，然后dep.notify()会循环这里的订阅者，分别调用它们的update方法。但是在getter收集依赖项的代码中，我没有看到watcher被添加到subs中。什么时候添加的？说到Watcher就会回答这个问题。根据mount节点的生命周期图，观察data和一些init之后就是$mount，最重要的是_compile。文件路径：src/instance/api/lifecycle.jsVue.prototype.$mount=function(el){...this._compile(el)...}_compile分为两步：compile和linkcompile编译过程为通过分析给出的元素（el）或模板（template），提取指令（directive）并创建对应的离线DOM元素（文档片段）。文件路径：src/instance/internal/lifecycle.jsVue.prototype._compile=function(el){...varrootLinker=compileRoot(el,options,contextOptions)...varrootUnlinkFn=rootLinker(this,el,this._scope)...varcontentUnlinkFn=compile(el,options)(this,el)...}以编译#mountNode元素为例，大致过程如下：compileRoot:由于根节点(