最近小组有个关于vue源码分析的分享会,提前准备一下… 前言:我们都知道使用v-model可以实现数据的双向绑定,及实现数据的变化驱动dom的更新,dom的更新影响数据的变化.那么v-model是怎么实现这一原理的呢?接下来探索一下这部分的源码. 前期准备①:vue2.5.2源码(用于阅读.查看关联等)②:建立vue demo,创建包含v-model指令的实例(用于debugger)以下为demo: genDirectives在模板的编译阶段, v-model跟其他指令一样,会被解析到 el.d…

Vue源码分析(二) : Vue实例挂载 author: @TiffanysBear 实例挂载主要是 $mount 方法的实现,在 src/platforms/web/entry-runtime-with-compiler.js & src/platforms/web/runtime/index.js 等文件中都有对Vue.prototype.$mount的定义: // vue/platforms/web/entry-runtime-with-compiler.js Vue.prototype.…

Vue 源码分析-逻辑层 预期的效果: 监听input的输入,input在输入的时候,会触发 watch与computed函数,并且会更新原始的input的数值.所以直接跟input相关的处理就有3处,但实际上会有连带性的触发,触发watch的input函数的时候,还会触发this.answer对应的依赖处理 看看内部是如何处理的: Vue在初始化data的时候,会通过Object.defineProperty重新定义input的set与get访问接口,同时会创建一个记录并且保持其数据对应的依赖…

jQuery 2.0.3 源码分析Sizzle引擎 - 解析原理 声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 先来回答博友的提问: 如何解析 div > p + div.aaron input[type="checkbox"] 顺便在深入理解下解析的原理: HTML结构 <div id="text"> <p> <input type="text" /> </p>…

Vue源码分析(一) : new Vue() 做了什么 author: @TiffanysBear 在了解new Vue做了什么之前,我们先对Vue源码做一些基础的了解,如果你已经对基础的源码目录设计等有基础的了解的话,可以跳过下面这部分. 源码目录设计 Vue.js 的源码都在 src 目录下,其目录结构如下. src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── server # 服务端渲染 ├── sfc #…

其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue 源码分析] 本文将 vue 中与数据侦测相关的源码摘了出来,配合上文(侦测数据的变化 - [基本实现]) 一起来分析一下 vue 是如何实现数据侦测的. Tip: 以下代码出自 vue.esm.js,版本为 v2.5.20.无关代码有一些删减.中文注释都是笔者添加. /** * Define a property. * 定义属性的方法 */ function def (obj, key, val, enumerable) {…

MyBatis插件原理----从<plugins>解析开始 本文分析一下MyBatis的插件实现原理,在此之前,如果对MyBatis插件不是很熟悉的朋友,可参看此文MyBatis7:MyBatis插件及示例----打印每条SQL语句及其执行时间,本文我以一个例子说明了MyBatis插件是什么以及如何实现.由于MyBatis的插件已经深入到了MyBatis底层代码,因此要更好地使用插件,必须对插件实现原理及MyBatis底层代码有所熟悉才行,本文分析一下MyBatis的插件实现原理. 首先,我们…

前言 在 SOFA-RPC 的官方介绍里,介绍了自定义线程池,可以为指定服务设置一个独立的业务线程池,和 SOFARPC 自身的业务线程池是隔离的.多个服务可以共用一个独立的线程池. API使用方式如下: UserThreadPool threadPool = new UserThreadPool(); threadPool.setCorePoolSize(10); threadPool.setMaximumPoolSize(100); threadPool.setKeepAliveTime(2…

在Spring Boot源码分析-启动过程中我们进行了启动源码的分析,大致了解了整个Spring Boot的启动过程,具体细节这里不再赘述,感兴趣的同学可以自行阅读.今天让我们继续阅读源码,了解配置文件加载原理. 基于Spring Boot 2.1.0.RELEASE 在开始阅读源码之前,首先准备三个问题. 什么时候开始加载配置文件? 如何读取相关配置文件内容? 如何区分不同环境的配置? 下面用Spring代替Spring Boot 接下来进入主题,首先关注第一个问题. 一.什么时候开始加载配置…

2017-07-05 本节从一个小案例入手,结合源码分析下通过netlink进行内核和用户通信的流程. 内核端 按照传统CS模式,其实内核端可以作为是服务器端,用以接收用户的请求并作出处理,但是从netlink本身的特性,其更像是一个对等实体.双方都可以进行主动数据的传递. 内核中首先调用netlink_kernel_create函数创建一个sock结构,其实这里仅仅是返回一个sock结构,而其中创建了相关的socket,netlink_sock,inode等. 老版本的函数参数都是写在netl…

2017-07-05 上文以一个简单的案例描述了通过Netlink进行用户.内核通信的流程,本节针对流程中的各个要点进行深入分析 sock的创建 sock管理结构 sendmsg源码分析  sock的创建 这点包含用户socket的创建以及内核socket的创建,前者通过socket调用实现,后者通过netlink_kernel_create实现.先看用户层的实现 SYSCALL_DEFINE3(socket, int, family, int, type, int, protocol) { i…

最近准备开启Vue的源码学习,并且每一个Vue的重要知识点都会记录下来.我们知道Vue的核心理念是数据驱动视图,所有操作都只需要在数据层做处理,不必关心视图层的操作.这里先来学习Vue的响应式原理,Vue2.0的响应式原理是基于Object.defineProperty来实现的.Vue通过对传入的数据对象属性的getter/setter方法来监听数据的变化,通过getter进行依赖收集,setter方法通知观察者,在数据变更时更新视图. 1.使用rollup搭建开发环境 安装rollup环境 n…

声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 先来回答博友的提问: 如何解析 div > p + div.aaron input[type="checkbox"] 顺便在深入理解下解析的原理: HTML结构 <div id="text"> <p> <input type="text" /> </p> <div class="aaron"&…

@SessionAttribute作用于处理器类上,用于在多个请求之间传递参数,类似于Session的Attribute,但不完全一样,一般来说@SessionAttribute设置的参数只用于暂时的传递,而不是长期的保存,长期保存的数据还是要放到Session中. 通过@SessionAttribute注解设置的参数有3类用法: (1)在视图中通过request.getAttribute或session.getAttribute获取 (2)在后面请求返回的视图中通过session.getAtt…

Vue.js 的源码都在 src 目录下,其目录结构如下 src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── server # 服务端渲染 ├── sfc # .vue 文件解析 ├── shared # 共享代码 compiler compiler 目录包含 Vue.js 所有编译相关的代码.它包括把模板解析成 ast 语法树,ast 语法树优化,代码生成等功能. 编译的工作可以在构建时做(借助 webpack…

本次主要想写spring bean的实例化相关的内容.创建spring bean 实例是spring bean 生命周期的第一阶段.bean 的生命周期主要有如下几个步骤: 创建bean的实例 给实例化出来的bean填充属性 初始化bea 通过IOC容器使用bean 容器关闭时销毁bean 在实例化bean之前在BeanDefinition里头已经有了所有需要实例化时用到的元数据,接下来spring 只需要选择合适的实例化方法以及策略即可.实例化方法有两大类分别是工厂方法和构造方法实例化,后者是…

MySQL物理备份工具,常用的有两个:MySQL Enterprise Backup 和 XtraBackup. 前者常用于MySQL企业版,后者常用于MySQL社区版.Percona Server for MySQL 和 MariaDB. 所以,如果我们使用的是后三者,在实例较大的情况下,一般都会选择XtraBackup作为备份恢复工具. 熟悉一个工具,不仅仅是要了解它的用法,更重要的是掌握用法背后的原理.毕竟,用法只是"术",原理才是"道".所谓,明道才能优术.…

Vue.js 源码是基于 Rollup 构建的,它的构建相关配置都在 scripts 目录下.(Rollup 中文网和英文网) 构建脚本 通常一个基于 NPM 托管的项目都会有一个 package.json 文件,它是对项目的描述文件,它的内容实际上是一个标准的 JSON 对象. 我们通常会配置 script 字段作为 NPM 的执行脚本,Vue.js 源码构建的脚本如下: { "script": { "build": "node scripts/buil…

认识 Flow Flow 是 facebook 出品的 JavaScript 静态类型检查⼯具.Vue.js 的源码利⽤了 Flow 做了静态类型检查, 所以了解 Flow 有助于我们阅读源码 Flow 的官方文档 为什么⽤ Flow JavaScript 是动态类型语⾔,它的灵活性有⽬共睹,但是过于灵活的副作⽤是很容易就写出⾮常隐蔽的 隐患代码,在编译期甚⾄看上去都不会报错,但在运⾏阶段就可能出现各种奇怪的 bug. 类型检查是当前动态类型语⾔的发展趋势,所谓类型检查,就是在编译期尽早发现(由…

2017-07-06 上节主讲了用户层通过netlink和内核交互的详细过程,本节分析下用户层接收数据的过程…… 有了之前基础知识的介绍,用户层接收数据只涉及到一个核心调用readmsg(), 其他的就不多介绍了,不太明白的请参考之前的文章,我们还是重点看下内核究竟在背后做了什么!该函数在内核对应于read_msg系统调用 SYSCALL_DEFINE3(recvmsg, int, fd, struct msghdr __user *, msg, unsigned int, flags) { i…

一,Vue.js 的源码都是在src 目录下,其目录结构如下. 1.compiler 目录包含Vue.js 所有编译相关的代码.它包括把所有模板解析成ast 语法树, ast 语法树优化等功能. 2.core 目录 包含了Vue.js 的核心代码,包括内置组件,全局API封装,Vue 实例化,观察者,虚拟DOM, 工具函数等等. (1) observer     相应系统,包含数据观测的核心代码.  (2) vdom     包含虚拟DOM 创建(creation)和打补丁(patching)…

本次主要想写spring bean的实例化相关的内容.创建spring bean 实例是spring bean 生命周期的第一阶段.bean 的生命周期主要有如下几个步骤: 创建bean的实例 给实例化出来的bean填充属性 初始化bea 通过IOC容器使用bean 容器关闭时销毁bean 在实例化bean之前在BeanDefinition里头已经有了所有需要实例化时用到的元数据,接下来spring 只需要选择合适的实例化方法以及策略即可.实例化方法有两大类分别是工厂方法和构造方法实例化,后者是…

1.new Vue的过程 1)首先Vue是一个类,初始化时已经添加很多 initMixin(Vue)             给原型添加Vue.prototype._init  stateMixin(Vue)     eventsMixin(Vue) lifecycleMixin(Vue) 给原型添加Vue.prototype._update renderMixin(Vue)  给原型添加vm.$createElement 2)new vue的constructor里面执行了this._init…

实例化构造函数 从这里可以看出new Vue实际上是使vue构造函数实例化,然后调用_init方法 _init方法,该方法在 src/core/instance/init.js 中定义 Vue.prototype._init = function (options?: Object) { const vm: Component = this // a uid vm._uid = uid++ let startTag, endTag /* istanbul ignore if */ if (pro…

compiler compiler 目录包含 Vue.js 所有编译相关的代码.它包括把模板解析成 ast 语法树,ast 语法树优化,代码生成等功能 core core 目录包含了 Vue.js 的核心代码,包括内置组件.全局 API 封装,Vue 实例化.观察者.虚拟 DOM.工具函数等等. platform Vue.js 是一个跨平台的 MVVM 框架,它可以跑在 web 上,也可以配合 weex 跑在 native 客户端上.platform 是 Vue.js 的入口,2 个目录代表 2…

首先从一条简单的语句开始,创建了一个hashmap对象: Map<String,String> hashmap = new HashMap<String,String>(); 调用hashmap类无参数构造方法,使用默认转载因子, public HashMap() { this.loadFactor = DEFAULT_LOAD_FACTOR; // all other fields defaulted } 默认装载因子只有在构造器不指定的情况下使用 /** * The load…

在执行 npm run dev 的时候 根据script/config.js 文件中的配置 'web-full-dev': { entry: resolve('web/entry-runtime-with-compiler.js'), dest: resolve('dist/vue.js'), format: 'umd', env: 'development', alias: { he: './entity-decoder' }, banner  } 可知入口文件为 'web/entry-run…

MyBatis 允许你在已映射语句执行过程中的某一点进行拦截调用. 默认情况下,可以使用插件来拦截的方法调用包括: Executor (update, query, flushStatements, commit, rollback, getTransaction, close, isClosed) ParameterHandler (getParameterObject, setParameters) ResultSetHandler (handleResultSets, handleOutp…

初始化  Data,props,event监听 beforCreated,Created 挂载 执行编译,首次渲染.创建和追加过程 编译 编译模块分为三个阶段:parse.optimize.generate 数据响应式 渲染函数执行时会触发getter进行依赖收集,将来数据变化时会触发setter进行更新 虚拟dom Vue 工作机制 // dom <div   style="color:red" @click="xx"><a> click…

响应式特点 数据响应式 修改数据时,视图自动更新,避免繁琐Dom操作,提高开发效率 双向绑定 数据改变,视图随之改变.视图改变,数据随之改变 数据驱动 开发时仅需要关注数据本身,不需要关心数据如何渲染到视图 官方教程: https://cn.vuejs.org/v2/guide/reactivity.html MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/d…