vue源码学习之目录设计

vue的src目录总览:


src目录截图

vue源码的src目录下一共有6个文件夹:
-compiler #编译相关
-core #核心代码
-platforms #不同平台的支持
-server #服务端渲染
-sfc # vue文件解析
-shared #共享代码

compiler

compiler目录是与编译相关的东西都在这里。比如说vue的virtualDom生成时会执行render()函数,我们平时其实很少手写render(),一般都是写<template></template>。而template编译成render()函数的相关逻辑都在compiler文件夹里面。

core

core目录下又分为好几个子目录,如下图所示:


1576511268(1).jpg

-components:主要放内置组件,例如keep-alive
-global-api:这个文件夹下面主要放一些全局的api,像extend、mixin等
-instance:包含渲染的辅助函数,像事件、生命周期、初始化等等。
-observer:放置跟响应式数据相关的代码
-util:里面是一些方法工具
-vdom:virtualDom相关的代码

platforms

包含两个子目录:web和weex
这是一个与平台相关的目录。在不同的平台入口,会编译出不同的vue.js。比如说从web目录进去,就会编译出web平台所对应的代码。

server

这个目录下是所有跟服务端渲染相关的代码

sfc

sfc文件夹是一个解释器,它能将一个.vue文件编译成一个javascript对象。

shared

shared中会定义一些工具方法,一些能被其他文件所调用的共有的辅助方法。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在分析Vue的源码之前我们需要了解一些前置知识,如Flow、源码目录、构建方式、编译入口等。 认识 Flow Fl...
    oWSQo阅读 4,763评论 1 2
  • core package 概要:Core是所有其他包的基础包.它提供了大部分功能包括metadata,templa...
    LOVE小狼阅读 7,534评论 0 3
  • mean to add the formatted="false" attribute?.[ 46% 47325/...
    ProZoom阅读 7,593评论 0 3
  • 物有本末,事有终始,知所先后,则近道矣 ---《大学》 在分析Vue初始化之前,我们先看看Vue源码的目录结构:...
    海洋之木阅读 12,449评论 13 46
  • 生活各种不愉快,如何面对
    潇潇雨落阅读 1,235评论 0 0