加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

大白话Vue源码系列(01):万事开头难

发布时间:2020-12-16 23:13:33 所属栏目:百科 来源:网络整理
导读:div id="catalog"div class="bq" div style="margin-bottom: .6rem" 阅读目录 ul class="list" li style="margin-bottom: .2rem !important"a href="javascript:" scroll-to="#f_0"Vue 的源码目录结构 li style="margin-bottom: .2rem !important"a href="ja

<div id="catalog"><div class="bq">
<div style="margin-bottom: .6rem">阅读目录
<ul class="list">
<li style="margin-bottom: .2rem !important"><a href="javascript:" scroll-to="#f_0">Vue 的源码目录结构
<li style="margin-bottom: .2rem !important"><a href="javascript:" scroll-to="#f_1">预备知识
<li style="margin-bottom: .2rem !important"><a href="javascript:" scroll-to="#f_2">先捡软的捏

Angular 是 Google 亲儿子,React 是 Facebook 小正太,那咱为啥偏偏选择了 Vue 下手,一句话,Vue 是咱见过的最对脾气的 MVVM 框架。之前也使用过 knockout,angular,react 这些框架,但都没有让咱产生 follow 的冲动。直到见到 Vue,简直是一见钟情啊。

Vue 的官方文档已经对 Vue 如何使用提供了最好的教程,建议 Vue 新手直接去官网学习,而不要在网上找些质量参差不齐的文档去看,以免误人子弟。 和 文档写的都很地道,毕竟是国产,中文文档真心赞。不夸张地说,中文文档咱已经看了不下 5 遍了,每次都有收获,第一遍看的很慢,边看边做,之后就非常快了,主要都是扫读。英文的咱也不是看不了,只是速度问题,没必要较这个劲。值得一提的是,Vue 每次版本更新官方文档迅速都会跟进到最新,所以说 Vue 的官方文档是学习 Vue 的不二之选。

本系列的目的不是介绍如何使用 Vue,而是希望把 Vue 的源码实现思路简单清晰地描绘出来,从而摸清一个 MVVM 框架是如何工作的,并从中学习封装轮子(库或框架)的各种实用技巧。文章中的不足和欠缺之处,请大家多多指教/抱拳。

如果直接去看 Vue 生成的代码文件 Vue.js,代码足足有上万行。这样去研究源码肯定是行不通的,也是不明智的。从 的目录结构入手是个不错的选择,这么大的项目,一个好的目录结构对开发和维护的重要性不言而喻。

Vue 源码目录如下:

各目录和文件功能:

    compiler 此目录存放编译模板相关的代码,用于将 html 模板编译成 。
  • runtime 此目录存放 Vue 生命周期内使用的相关代码,负责 Vue 实例的创建,视图渲染和处理虚拟 DOM 等等一切编译 html 模板之外的事情。
  • server 这里存放 Vue 服务端渲染(SSR)需要使用的代码。
  • util 这里存放一些其他模块共用的工具函数。
  • entry-compiler.js 该文件是一个提供编译 html 模板相关接口的模块,通常用于为 Vue 编写的构建插件,比如 vue-loadervueify
  • entry-runtime.js 用于构建仅包含运行时的文件,不具备编译 html 模板功能。
  • entry-runtime-with-compiler.js 用于构建同时包含编译器和运行时的全功能文件。
  • entry-server-basic-renderer.js 和 entry-server-renderer.js 用于构建服务端渲染可用的文件。

可见 Vue 按照功能块对整个项目进行了目录拆分,每个目录负责一块功能,接下来就可以从这些 entry 文件入手按照 进行由浅及深,从整体到局部的深入剖析。

在继续之前咱们可以先看一下由上面这些源代码构建出来的可用文件是怎么样的。

Vue 构建生成的目录如下:

各文件功能:

FullRuntime-only 表格中的术语解释:

    Full:包含编译器和运行时的全部功能。
  • Runtime-only:仅包含运行时。
  • UMD:可通过
UMD CommonJS ES Module