Vue2.x源码学习笔记-Vue源码调试】的更多相关文章

如果我们不用单文件组件开发,一般直接<script src="dist/vue.js">引入开发版vue.js这种情况下debug也是很方便的,只不过vue.js文件代码是rollup生成的 这种情况下debug,看源码也是很方便的 但是如果能够在vue项目中的src目录下中的文件打断点调试就更好了.那怎么做到呢? 其实很简单1. 打开 build/config.js 文件 找到 genConfig() 函数 该函数下有个config对象,给该对象添加一个属性和值: sou…
我们知道使用vue.js开发应用时,都是new Vue({}/*options*/) 那Vue构造函数上有哪些静态属性和方法呢?其原型上又有哪些方法呢? 一般我都会在浏览器中输入Vue来look see see 可以看到Vue构造函数上挂载了这么多属性和方法,so这么nb. 可以看到有很多的全局的api,以及实例的方法(其实就是Vue.prototype上的方法). 那么问题来了,尤大是如何把这么多方法和属性挂载上去的.那么带着问题,进入vue源码 look see see去 现在写项目可能都使…
还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProxy // Proxy代理对象 vm._self // 当前vm实例 vm.$parent // 用于自定义子组件中,指向父组件的实例 vm.$root // 指向根vm实例 vm.$children // 当前组件的子组件实例数组 vm.$refs vm._watcher = null vm._in…
Vue静态方法和静态属性,其实直接在浏览器中可以查看到的,如下 圈起来的是其静态属性,但是有的属性对象中的属性的值又是函数.未圈起来的则是函数. 其实它来自如下各个目录下的js文件 // src/core/index.js Vue.version = '__VERSION__' // src/entries/web-runtime-with-compiler.js Vue.compile = compileToFunctions // 把模板template转换为render函数 // src/…
最近开始学习Vue源码,第一步就是要把调试环境搭好,这个过程遇到小坑着实费了点功夫,在这里记下来 一.调试环境搭建过程 1.安装node.js,具体不展开 2.下载vue项目源码,git或svn等均可 我这里打算参考http://hcysun.me/2017/03/03/Vue%E6%BA%90%E7%A0%81%E5%AD%A6%E4%B9%A0/来学习,所以使用2.1.7版本 3.执行npm install 4.执行npm run dev,到这里问题来了,这些问题在下文第二部分详细写,这里先…
最新 Vue 源码学习笔记 v2.x.x & v3.x.x 框架架构 核心算法 设计模式 编码风格 项目结构 为什么出现 解决了什么问题 有哪些应用场景 v2.x.x & v3.x.x https://github.com/learning-js-by-reading-source-codes/vue https://github.com/learning-js-by-reading-source-codes/vue-next refs xgqfrms 2012-2020 www.cnbl…
new Vue(Vue 初始化) 一个vue实例化到底经历了什么?已下是博主自己的总结,不正确的地方请指出,谢谢~ 一.简述 从使用角度来看,挂载的顺序如下 1. $slots 2. $scopedSlots 3. beforeCreate 4. inject 5. props 6. methods 7. data 8. computed 9. watch 10. provide 11. created 12. beforeMount 13. mounted 从源码角度来看,运行的顺序如下 Vu…
上接 Underscore.js 源码学习笔记(上) === 756 行开始 函数部分. var executeBound = function(sourceFunc, boundFunc, context, callingContext, args) { if (!(callingContext instanceof boundFunc)) return sourceFunc.apply(context, args); var self = baseCreate(sourceFunc.prot…
版本 Underscore.js 1.9.1 一共 1693 行.注释我就删了,太长了… 整体是一个 (function() {...}());  这样的东西,我们应该知道这是一个 IIFE(立即执行函数). var root = typeof self == 'object' && self.self === self && self || typeof global == 'object' && global.global === global &…
AXI_LITE源码学习笔记 1. axi_awready信号的产生 准备接收写地址信号 // Implement axi_awready generation // axi_awready is asserted for one S_AXI_ACLK clock cycle when both // S_AXI_AWVALID and S_AXI_WVALID are asserted. axi_awready is // de-asserted when reset is low. alwa…
Vue源码学习1--Vue构造函数 这是我第一次正式阅读大型框架源码,刚开始的时候完全不知道该如何入手.Vue源码clone下来之后这么多文件夹,Vue的这么多方法和概念都在哪,完全没有头绪.现在也只是很粗略的了解一下,个人认为这篇只是能做到大家阅读Vue的参考导航,可以较快的找到需要看的文件或方法.很多细节依然没有理解到位,但是可以慢慢来,先分享一波~ 源码文件目录结构 - benchmarks 暂时不知道是什么 - dist 存放打包后的文件夹 - examples 示例,这个地方可以自己写…
Hadoop源码学习笔记(6) ——从ls命令一路解剖 Hadoop几个模块的程序我们大致有了点了解,现在我们得细看一下这个程序是如何处理命令的. 我们就从原头开始,然后一步步追查. 我们先选中ls命令,这是一个列出分面式文件系统中的目录结构.传入一个查阅地址,如果没有则是根目录.启动NameNode和DataNode服务.然后在命令行中输入ls : 换成程序,如果写呢,我们新建一个ClientEnter类.之前章节中,我们就知道,在命令行中输入的dfs命令,指向到org.apache.hado…
Hadoop源码学习笔记(5) ——回顾DataNode和NameNode的类结构 之前我们简要的看过了DataNode的main函数以及整个类的大至,现在结合前面我们研究的线程和RPC,则可以进一步看看几个对象的大至结构以及调用关系. 我们知道,三个结构(客户端,NameNode,DataNode)是能过网络调用的,走的是RPC.那在底层通讯时谁做服务器谁做客户端呢?我们先回顾一下这三者关系: 这样看,看不出,我们进入源码,看一下夹在中间的NameNode: 在这个initialize函数中,…
Hadoop源码学习笔记(4) ——Socket到RPC调用 Hadoop是一个分布式程序,分布在多台机器上运行,事必会涉及到网络编程.那这里如何让网络编程变得简单.透明的呢? 网络编程中,首先我们要学的就是Socket编程,这是网络编程中最底层的程序接口,分为服务器端和客户端,服务器负责监听某个端口,客户端负责连接服务器上的某个端口,一旦连接通过后,服务器和客户端就可以双向通讯了,我们看下示例代码: ServerSocket server = new ServerSocket(8111); S…
Hadoop源码学习笔记(3) ——初览DataNode及学习线程 进入了main函数,我们走出了第一步,接下来看看再怎么走: public class DataNode extends Configured implements InterDatanodeProtocol,       ClientDatanodeProtocol, FSConstants, Runnable {      public static DataNode createDataNode(String args[],…
Hadoop源码学习笔记(2) ——进入main函数打印包信息 找到了main函数,也建立了快速启动的方法,然后我们就进去看一看. 进入NameNode和DataNode的主函数后,发现形式差不多: public static void main(String args[]) {     try {       StringUtils.startupShutdownMessage(DataNode.class, args, LOG);       DataNode datanode = crea…
Hadoop源码学习笔记(1) ——找到Main函数及读一读Configure类 前面在第一季中,我们简单地研究了下Hadoop是什么,怎么用.在这开源的大牛作品的诱惑下,接下来我们要研究一下它是如何实现的. 提前申明,本人是一直搞.net的,对java略为生疏,所以在学习该作品时,会时不时插入对java的学习,到时也会摆一些上来,包括一下设计模式之类的.欢迎高手指正. 整个学习过程,我们主要通过eclipse来学习,之前已经讲过如何在eclipse中搭建调试环境,这里就不多述了. 在之前源码初…
Hadoop学习笔记(9) ——源码初窥 之前我们把Hadoop算是入了门,下载的源码,写了HelloWorld,简要分析了其编程要点,然后也编了个较复杂的示例.接下来其实就有两条路可走了,一条是继续深入研究其编程及部署等,让其功能使用的淋漓尽致.二是停下来,先看看其源码,研究下如何实现的.在这里我就选择第二条路. 研究源码,那我们就来先看一下整个目录里有点啥: 这个是刚下完代码后,目录列表中的内容. 目录/文件 说明 bin 下面存放着可执行的sh命名,所有操作都在这里 conf 配置文件所在…
HashMap有一个问题,就是迭代HashMap的顺序并不是HashMap放置的顺序,也就是无序. LinkedHashMap保证了元素迭代的顺序.该迭代顺序可以是插入顺序或者是访问顺序.通过维护一个双向链表实现. 需要在理解HashMap实现原理的基础上学习LinkedHashMap,JDK源码学习笔记——HashMap 一.数据结构 实际上就是在HashMap的基础上加了LinkedList (图片来自Java集合之LinkedHashMap) LinkedHashMap.Entry继承了H…
Vue原型对象的包装 在Vue官网直接通过 script 标签导入的 Vue包是 umd模块的形式.在使用前都通过 new Vue({}).记录一下 Vue构造函数的包装. 在 src/core/instance/index.js 这个文件是 Vue构造函数的出生地. import { initMixin } from './init' import { stateMixin } from './state' import { renderMixin } from './render' impo…
jquery源码学习笔记二:jQuery工厂 jquery源码学习笔记一:总体结构 上两篇说过,query的核心是一个jQuery工厂.其代码如下 function( window, noGlobal ) { var jQuery = function( selector, context ) {//首先定义一个内部jQuery.注意,此jQuery只是一个工厂内部的变量,并非我们在外面引用的那个jQuery或$ return new jQuery.fn.init( selector, cont…
目录 RocketMQ 源码学习笔记----Producer 是怎么将消息发送至 Broker 的? 前言 项目结构 rocketmq-client 模块 DefaultMQProducerTest RocketMQ 源码学习笔记----Producer 是怎么将消息发送至 Broker 的? 前言 本次分析基于 RocketMQ release-4.5.2 版本. 分析的目标是: RocketMQ 中 Producer 是怎么将消息发送至 Broker 的? 说到学习源码,首先当然是要把源代码…
目录 RocketMQ 源码学习笔记 Producer 是怎么将消息发送至 Broker 的? 前言 项目结构 rocketmq-client 模块 DefaultMQProducerTest RocketMQ 源码学习笔记 Producer 是怎么将消息发送至 Broker 的? 前言 本次分析基于 RocketMQ release-4.5.2 版本. 分析的目标是: RocketMQ 中 Producer 是怎么将消息发送至 Broker 的? 说到学习源码,首先当然是要把源代码下载下来,官…
OpenTK源码下载地址:https://github.com/opentk/opentk OpenTK使用Nuget安装命令:OpenTK:Install-Package OpenTK -Version 3.0.1 OpenTK.GLControl:Install-Package OpenTK.GLControl -Version 3.0.1 OpenTK官网: https://github.com/opentk  注意地址https://opentk.github.io/已经失效. Open…
最新 React 源码学习笔记 v17.x.x 框架架构 核心算法 设计模式 编码风格 项目结构 为什么出现 解决了什么问题 有哪些应用场景 refs https://github.com/learning-js-by-reading-source-codes/react xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!…
阅读本文大概需要 6 分钟 一个项目随着功能开发越来越多,项目必然越来越大,工程管理成本也越来越高,后期维护成本更高.如何更好的组织管理工程,是非常重要的 今天我们来学习下 Qt Creator 是如何组织管理这么庞大的一个项目工程的 QMake 多工程管理方法 我们知道 Qt 采用 qmake语法进行组织管理工程结构,想要更好的学习管理一个工程需要你了解基本的qmake语法 在Qt当中,一般以xx.pro结尾的文件是某个工程文件,我们只要打开该文件即可打开该文件管理的工程 单工程基本用法 比如…
阅读本文大概需要 8 分钟 插件听上去很高大上,实际上就是一个个动态库,动态库在不同平台下后缀名不一样,比如在 Windows下以.dll结尾,Linux 下以.so结尾 开发插件其实就是开发一个动态库,该动态库能够很好的加载进主程序.访问主程序资源.和主程序之间进行通信 本篇文章一起学习下 Qt Creator当中是如何实现插件的开发.加载.解析.管理以及互相通信的,方便我们开发自定义插件打下基础 简介 Qt Creator 插件理解起来其实很简单,定义一个接口类作为基类,其他插件需要继承该类…
系列文章: 1.async-validator 源码学习(一):文档翻译 2.async-validator 源码学习笔记(二):目录结构 rule 主要实现的是校验规则,文件结构为下图: 一.rule 目录文件介绍 其中 index.d.ts 文件: declare const _default: { required: import("..").ExecuteRule; whitespace: import("..").ExecuteRule; type: im…
系列文章: 1.async-validator 源码学习(一):文档翻译 2.async-validator 源码学习笔记(二):目录结构 3.async-validator 源码学习笔记(三):rule 源码目录结构如图: validator 源码分析 validator 与 rule 紧密相连,rule 目录下的文件主要功能是校验 value 和 rule ,然后给 errors 数组中添加 error .validator 则是把 校验的 value 细分成各种类型,对不同的类型进行不同的…
系列文章: 1.async-validator 源码学习(一):文档翻译 2.async-validator 源码学习笔记(二):目录结构 3.async-validator 源码学习笔记(三):rule 4.async-validator 源码学习笔记(四):validator Schema 是 async-validator 库的标准使用方式,使用 class 类的形式和构造函数方式进行定义的. 一.Schema 类使用方式 在官方文档中 Schema 的使用方式有如下几步: 从 async…