Vue.js源码在src目录下,其目录结构如下。01compilercompiler目录包含了Vue.js所有编译相关的代码。包括将模板解析成ast语法树、ast语法树优化、代码生成等功能。可以在构建时进行编译(借助webpack、vue-loader等辅助插件);它也可以在运行时完成,使用包含构建函数的Vue.js。显然,编译是一个性能密集型的工作,所以推荐前者——离线编译。02core目录包含Vue.js的核心代码,包括内置组件、全局API封装、Vue实例化、观察者、虚拟DOM、实用函数等。这里的代码是Vue.js的灵魂,它是也是后面需要重点分析的地方。03platformVue.js是一个跨平台的MVVM框架,可以运行在web上,也可以配合weex运行在natvie客户端上。platform是Vue.js的入口,两个目录代表两个主要入口,分别打包成运行在web端的Vue.js和weex。我们将重点分析门户网站打包的Vue.js。对于weex传送门封装的Vue.js,感兴趣的同学可以自行研究。04serverVue.js2.0支持服务端渲染,所有服务端渲染相关的逻辑都在这个目录下。注意:这部分代码是运行在服务器端的Node.js,不要与运行在浏览器端的Vue.js混淆。服务器端渲染的主要工作是将组件渲染成服务器端的HTML字符串,直接发送给浏览器,最后将静态标记“混合”成客户端上的完全交互的应用程序。05sfc通常我们开发Vue.js都是借助webpack构建,然后通过.vue单文件编写组件。该目录中的代码逻辑会将.vue文件的内容解析为JavaScript对象。06sharedVue.js会定义一些工具方法,这里定义的工具方法会被浏览器端的Vue.js和服务端的Vue.js共享。总结从Vue.js的目录设计可以看出,作者将功能模块拆分的非常清晰,将相关逻辑维护在一个独立的目录中,将复用的代码提取到一个独立的目录中。这样的目录设计,使得代码的可读性和可维护性更高,非常值得学习和深思。关于vue.js还有很多需要学习和讨论的地方,欢迎和我一起交流和讨论
