Vue源码阅读笔记 - 文件结构

[Jmingzi]

浏览器端，入口文件为：

• entry-runtime-with-compiler.js
• entry-runtime.js

如果我们结合webpack打包来写项目，是vue-loader帮我们做了单文件解析以及compiler，所以入口文件为entry-runtime.js

如果是单独写，类似：

new Vue({
  el: '#app',
  template: ''
})

入口文件就是entry-runtime-with-compiler.js

其本质就类似于我们对函数参数类型或值的hack，Vue的options支持传el，template，render参数，这个文件就是对这些参数的处理hack

将得到的template字符串用compiler/index.js中的方法编译后，得到render/staticRenderFns函数，然后重写options.render/options.staticRenderFns，和Vue.prototype.$mount方法

核心是

const { render, staticRenderFns } = compileToFunctions(template, {
        // 2个方法都是判断浏览器是否encode html属性上的值，因为template支持语法
        // 是否decode换行符，ie会encode而其他不会
        shouldDecodeNewlines,

        // 是否decode a[href]，chrome会encode
        shouldDecodeNewlinesForHref,
        
        // 解析模版字符串的分隔符，默认是`{{  }}`
        delimiters: options.delimiters,  
         // 是否保留注释，默认false
        comments: options.comments 
}, this)
options.render = render
options.staticRenderFns = staticRenderFns

另外关于runtime/index.js中 初始化时，用extend 挂载了默认的directives，components，和domDiff__patch__

最后，会将得到的options和el根节点传入core/instance/lifecycle mountComponent方法。

接下来，我们看mountComponent方法做了哪些事