频道导航

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

2019-03-02 Vue 前端之家

前端之家收集整理的这篇文章主要介绍了大白话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 源码目录如下：

各目录和 文件 功能：

compiler 此目录存放编译模板相关的代码，用于将 html 模板编译成。
runtime 此目录存放 Vue 生命周期内使用的相关代码，负责 Vue 实例的创建，视图渲染和处理虚拟 DOM 等等一切编译 html 模板之外的事情。

server 这里存放 Vue 服务端渲染(SSR)需要使用的代码。

util 这里存放一些其他模块共用的工具函数。

entry-compiler.js 该文件是一个提供编译 html 模板相关接口的模块，通常用于为 Vue 编写的构建插件，比如 `vue-loader` 或 `vueify`。

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：可通过猜你在找的Vue相关文章 elementui的el-tree第一次加载无法展开和选中的问题问题现象 elmentui的el-tree数据加载问题，导致第一次加载选中当前节点和高亮当前节点没有... 作者：前端之家时间：2021-02-17 VSCODE打开一个文件，另一个文件就关闭的问题的解决方法因为刚打开文件，vscode默认是预览状态，如果编辑过之后，就不会有这个问题。可以通过双击... 作者：前端之家时间：2021-02-17 一文带你学会国产加密算法SM4的vue实现方案前言上篇文章我们介绍了国产SM4加密算法的后端java实现方案。没有看过的小伙伴可以看一下... 作者：前端之家时间：2021-02-17 解决vue报错：Module build failed (from ./node_modules/_eslint-loader@2.2.1@eslint-loader/index.js): TypeError: Cannot read property 'range' of null 在项目中引入动态路由时报错写法: 报错: Module build failed (from ./node_modules/_esl... 作者：前端之家时间：2021-02-17 vue中解决Uncaught ReferenceError: regeneratorRuntime is not defined问题问题产生在使用babel编译es6时，遇到报错Uncaught ReferenceError: regeneratorRuntime i... 作者：前端之家时间：2021-02-17 element-UI中手动调用table排序 &lt;el-table :data=&quot;tableData&quot; &quot;width... 作者：前端之家时间：2021-02-17 Vue双向绑定原理及其实现在之前面试的时候被面试官问到是否了解Vue双向绑定的原理，其实自己之前看过双向绑定的原理... 作者：前端之家时间：2021-01-10 Vue事件修饰符详解整体学习Vue时看到Vue文档中有事件修饰符的描述，但是看了之后并没有理解是什么意思，于是... 作者：前端之家时间：2021-01-10 Vue-router插件使用单页面原理 Vue是单页面开发，即页面不刷新。页面不刷新，而又要根据用户选择完成内容的更... 作者：前端之家时间：2021-01-01 Vue 分支循环 v-for 通过v-for进行循环，不光可以拿到元素本身，也可以拿到索引值。如果数据是对象类型... 作者：前端之家时间：2021-01-01 编程分类 HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号最新文章 • elementui的el-tree第一次 • VSCODE打开一个文件，另一 • 一文带你学会国产加密算法 • 解决vue报错：Module buil • vue中解决Uncaught Refere • vue的自定义组件如何使用p • element-UI中手动调用tabl • Vue双向绑定原理及其实现 • Vue事件修饰符详解 • Vue-router插件使用热门标签更多 ► 关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作最近更新 · jQuery选择伪元素：after10-20 · JavaScript随机颜色生成器10-20 · JavaScript指数10-20 · addResourceHandlers无法解析静态资源10-20 · 如何将字节数组转换为MultipartFile10-20 · 在java中如何创建一个文件并写入内容？10-20 · 星号*在Python中是什么意思？10-20 · Flask框架：MVC模式10-20 · 在JavaScript对象数组中按ID查找对象10-20 · 使用Javascript / jQuery下载文件10-20 好站推荐菜鸟教程编程之家前端之家商务合作联系我们 Copyright © 2019 前端之家. 当前版本 V7.0.16 前端之家版权所有闽ICP备13020303号-10
UMD CommonJS ES Module