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

发布时间:2019-03-02 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了大白话Vue源码系列(01):万事开头难脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

<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 源码目录如下:

各目录和文件功能:

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

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

Vue 构建生成的目录如下:

各文件功能:

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

UMD CommonJS ES Module