![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue源码
一个前端程序员的自我救赎之旅
nothing_more_than
过去的已经过去,不能说明什么。唯有不断努力才能不负今生!!!
跌跌撞撞,我才发现原来算法才是大道!
展开
-
Vue模板字符串的获取过程
在src/platform/web/entry-runtime-with-compiler.js中在真正挂载(mount)之前会把模板编译成render函数。编译render函数的过程应该很复杂,后面我再研究吧。这里只说一下怎么获取模板字符串,一图胜千言:)...原创 2021-01-25 20:31:45 · 701 阅读 · 0 评论 -
Vue中组件的递归使用方法
Vue组件是天然支持递归使用的,只需要在引用自己时使用跟该组件name相同的tag就行了,比如:<template> <div> {{ item.name }} <template v-if="item.children"> <tree-node v-for="child of item.children" :item="child"/> </template> <div></template>&原创 2020-10-11 09:16:00 · 1964 阅读 · 2 评论 -
05-core
Vue源码中core是Vue的核心,它实现了Vue的主体功能,是平台无关的,不论是web或是wexx都要依赖它。它的目录结构很清晰,如下componentsglobal-apiinstanceobserverutilvdomconfig.jsindex.js简单的内容在本文就直接介绍了,需要展开的内容会再单独开一篇文章来详细说明。components这是core中内置的组...原创 2020-04-01 09:12:59 · 255 阅读 · 0 评论 -
04-Vue的响应式机制浅谈-Watcher
core/observer/watcher.jsWatcher的注释很能说明它的意图/** * A watcher parses an expression, collects dependencies, * and fires callback when the expression value changes. * This is used for both the $watch()...原创 2020-03-31 13:16:16 · 794 阅读 · 1 评论 -
04-Vue的响应式机制浅谈
尝试总结一下Vue的响应式机制。主要是core/observer里面的代码。如果能把这些代码抽出来实现一个自己的简单的响应式就好了,目标是一个能够监听数据变化的小型demo框架,监听后把事件暴露出来,具体要做什么让监听回调函数去做,并不包括在响应式系统中。从入口文件中规中矩的开始吧core/observer/index.js这个文件导出了五个内容:Observerobservedef...原创 2020-03-31 21:40:02 · 231 阅读 · 0 评论 -
04-Vue的事件机制
事件机制无非就是一个添加监听和触发的过程。所以可想而知应该有on方法和trigger方法,这是jQuery的名字。Vue也有类似的方法,在core/instance/events.js中。有以下四个方法,在Vue.prototype上:$on$once$off$emit总体上这段代码没有太多可说的。要知道一点,Vue实例上的事件监听函数都是保存在这个实例的_events上的。每个类...原创 2020-03-27 10:06:43 · 329 阅读 · 0 评论 -
04-Vue的插件机制
Vue是支持插件的,而且它的插件机制很简单。就是用Vue.use方法,接收一个函数。接收的这个函数就是用来插件,它能做的事情无非就是在Vue或Vue.prototoye上添加一些方法啥的。让你在Vue上或Vue实例上可以调用你插件提供的功能。在使用use注册插件的时候就会调用你传递过来的函数,这个函数接收的参数是你调用use时传递来的除了这个函数之外的所有参数,同时还会把Vue放到第一个参数的位...原创 2020-03-27 09:59:49 · 635 阅读 · 0 评论 -
04-Vue的混合mixin
mixin这个概念很早就出现了,到底是从什么时候开始的,不知道,不去深究吧。这里说说Vue中的混合,它是放在Vue上的方法,各个组件类因为是继承了Vue的,因此也都有这个方法,Vue的继承可以参考这里。Vue.mixin(在core/global-api/mixin.js中)这个方法很简单,借助了mergeOptions方法来把混合的options跟自己的options进行合并,关于合并的策略...原创 2020-03-27 09:48:45 · 193 阅读 · 0 评论 -
04-Vue中的资源全局注册函数
在Vue源码中有三个类型被称为资源(asset),为什么这么叫我就不知道了。这三个是component、filter和directive。在shared/constants.js中有一个常量数组ASSET_TYPES,就是这三个东西。Vue提供了这三个的全局注册函数,挂载了Vue上,Vue.component、Vue.filter和Vue.directive,分别用来你全局注册组件、过滤器和指令。...原创 2020-03-27 09:40:59 · 612 阅读 · 0 评论 -
04-谈谈Vue中的类继承——Vue.extend
core/global-api/extend.js这个类继承是专用的,只用来创建Vue的子类的,也就是各种组件类的创建。因此这里面的代码有很多硬编码的东西。去除跟Vue强相关的内容的话,剩下的就是一个典型的类继承,在别的源码库里也都见过的。经过extend后,子类上会有父类(Vue)的那些方法:extendusemixincomponentfilterdirective同时还会...原创 2020-03-27 09:31:43 · 4593 阅读 · 0 评论 -
04-new Vue做了啥
这里打算介绍一下new Vue时,Vue做了啥,其实就是说一下_init方法的调用。Vue方法里面只有一行代码this._init(options);这个_init到底做了什么?让我们看看吧(core/instance/init.js)。每个实例给一个全局的_uid_isVue赋值true顶重要的一步计算当前实例的$options,后续的所以操作基本都是根据它去做的_renderPr...原创 2020-03-31 21:41:48 · 411 阅读 · 0 评论 -
0x-Vue选项的合并策略core/util/options.js
随着对Vue源码的深入,越来越觉得它的结构还是清晰的。想想也是这样的,如果不清晰,它们的开发人员也很难维护的呀。众所周知在创建Vue实例是需要传递一个对象的,我们称之为选项(options)。最终每个实例会有一个options来保存自己的实例。但是这个options来保存自己的实例。但是这个options来保存自己的实例。但是这个options并不是创建Vue实例是通过构造函数传来的那个,它是综...原创 2020-03-31 21:36:41 · 334 阅读 · 0 评论 -
01-Vue源码的构建过程解析之scripts/build.js
const fs = require('fs') // node内建的文件系统模块const path = require('path') // node内建的路径模块const zlib = require('zlib') // 用来压缩的const rollup = require('rollup') // 没什么好说的const terser = require('terser') ...原创 2020-03-26 18:59:44 · 901 阅读 · 0 评论 -
01-Vue源码的构建过程解析之scripts/config.js
本来想在一片文章中吧构建的过程说清楚呢,谁知道光一个scripts/config.js就那么长。还是单拉出来看吧!!贴代码时间到:)请看注释这里总结一个脚本用到的插件列表,后来慢慢了解rollup-plugin-bublerollup-plugin-aliasrollup-plugin-commonjsrollup-plugin-replacerollup-plugin-node...原创 2020-03-26 18:58:57 · 660 阅读 · 1 评论 -
03-做一个通读Vue源码的计划吧
to be continue原创 2020-03-26 19:04:08 · 249 阅读 · 0 评论 -
02-找到Vue的入口
to be contiune原创 2020-03-26 19:02:00 · 802 阅读 · 0 评论 -
01-Vue源码的构建过程解析
to be continue原创 2020-03-26 19:04:52 · 272 阅读 · 0 评论 -
00-获取Vue源码
to be continue原创 2020-03-26 18:57:40 · 6707 阅读 · 0 评论