上一节讲的new Vue的时候,vue的构造函数会执行this._init()函数,最后执行vm.$mount(vm.$options.el)将实例挂载到dom上。可以看出,vm.$mount为vue render主要函数。页面就会从 {{ message }}变为 ’hello vue‘。主要渲染流程是el、template->render表达式->Vnode->DOM
接下来通过代码来进一步分析
$mount函数在'src/platforms/web/entry-runtime-with-compiler'上被定义
在代码中可以看出,el可以是字符串或者是Element,并且调用了query方法,这个方法在platfomrs/web/util/index.js上被定义
从query方法可以看出,当query传入的参数是字符串的话,会筛选出字符对应的dom节点,转换成dom对象,并且判断字符串不能是body或者html ,如果是的话,就会出现一个错误,防止被覆盖。如果是element的话,就直接返回。
从上图可以看出,接下来会判断是否有render函数以及template,若vue实例中没有render,则将template编译成render,就是说vue只认render函数。同时,因为template可以写成多种形式,因为el也会转换成template(getOutHTML函数),再转换成render。
在代码的末尾定义了getOutHTML函数。
getOutHTML函数主要是获得el所对应的dom及其内容
最后调用mount完成渲染
其中mount方法在platform/runtime/index.js被定义
这些方法主要是做一些判断,并执行mountComponent方法,mountComponent核心就是调用vm._render方法生成虚拟节点,再实例化一个Watcher,在它的回调函数中会调用updateComponent方法,最终调用vm._uppdate更新DOM。
再来看看mountComponent这个方法,在src/core/instance/lifecycle.js可以看到这个方法
这个函数的主要逻辑是判断是否有render函数,如果没有这个函数,则执行createEmptyVNode,又判断版本。接着就是判断如果没有template方法也没有render方法,就会提示报错。
接着就是定义updateComponent方法
从函数体大概可以看出,该方法主要是完成渲染和更新。