vue 源码学习三 vue中如何生成虚拟DOM

Vue源码学习三 ———— Vue构造函数包装

Vue源码学习二是对Vue的原型对象的包装,最后从Vue的出生文件导出了 Vue这个构造函数来到 src/core/index.js 代码是: import Vue from './instance/index' import { initGlobalAPI } from './global-api/index' import { isServerRendering } from 'core/shared/env' import { FunctionalRenderContext } fro…

vue 源码学习三 vue中如何生成虚拟DOM

vm._render 生成虚拟dom 我们知道在挂载过程中, $mount 会调用 vm._update和vm._render 方法,vm._updata是负责把VNode渲染成真正的DOM,vm._render方法是用来把实例渲染成VNode,这里的_render是实例的私有方法,和前面我们说的vm.render不是同一个,先来看下vm._render定义,vm._render是通过renderMixin(Vue)挂载的,定义在src/core/instance/render.js: // 简…

Vue源码学习二 ———— Vue原型对象包装

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…

Vue源码学习1——Vue构造函数

Vue源码学习1--Vue构造函数这是我第一次正式阅读大型框架源码,刚开始的时候完全不知道该如何入手.Vue源码clone下来之后这么多文件夹,Vue的这么多方法和概念都在哪,完全没有头绪.现在也只是很粗略的了解一下,个人认为这篇只是能做到大家阅读Vue的参考导航,可以较快的找到需要看的文件或方法.很多细节依然没有理解到位,但是可以慢慢来,先分享一波~ 源码文件目录结构 - benchmarks 暂时不知道是什么 - dist 存放打包后的文件夹 - examples 示例,这个地方可以自己写…

Vue源码学习一 ———— Vue项目目录

Vue 目录结构可以在 github 上通过这款 Chrome 插件 octotree 查看Vue的文件目录.也可以克隆到本地.. Vue 是如何规划目录的 scripts ------------- 构建相关文件 git-hooks.js ----- 存放 git 钩子 alias.js ----- 别名配置文件 config.js ------ 生成 rollup 配置 build.js ----- 对上面config.js中所有的 rollup配置进行构建 replease.sh ---…

Vue源码学习（一）：调试环境搭建

最近开始学习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源码学习】依赖收集

前面我们学习了vue的响应式原理,我们知道了vue2底层是通过Object.defineProperty来实现数据响应式的,但是单有这个还不够,我们在data中定义的数据可能没有用于模版渲染,修改这些数据同样会出发setter导致重新渲染,所以vue在这里做了优化,通过收集依赖来判断哪些数据的变更需要触发视图更新. 前言如果这篇文章有帮助到你,️关注+点赞️鼓励一下作者,文章公众号首发,关注前端南玖第一时间获取最新的文章- 我们先来考虑两个问题: 1.我们如何知道哪里用了data里面的数据…

Vue源码分析(二) : Vue实例挂载

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 源码学习(1)

概述我在闲暇时间学习了一下 Vue 的源码,有一些心得,现在把它们分享给大家. 这个分享只是 Vue源码系列的第一篇,主要讲述了如下内容: 寻找入口文件在打包的过程中 Vue 发生了什么变化在 Vue 实例化的时候,它的内部到底做了什么寻找入口文件首先我们寻找入口文件,我们查看package.json文件去找它的打包指令: "scripts": { // ... "build": "node scripts/build.js", //…

【Vue源码学习】响应式原理探秘

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

VUE 源码学习01 源码入口

VUE[version:2.4.1] Vue项目做了不少,最近在学习设计模式与Vue源码,记录一下自己的脚印!共勉!注:此处源码学习方式为先了解其大模块,从宏观再去到微观学习,以免一开始就研究细节然后出不来~ 从package.json文件知道我们在执行命令npm run dev(只是以dev为例prod一样) 对应的是config.js文件里面的web-full-dev,然后找到config.js文件 config.js 'web-full-dev': { entry: resolve('we…

Vue2.x源码学习笔记-Vue源码调试

如果我们不用单文件组件开发,一般直接<script src="dist/vue.js">引入开发版vue.js这种情况下debug也是很方便的,只不过vue.js文件代码是rollup生成的这种情况下debug,看源码也是很方便的但是如果能够在vue项目中的src目录下中的文件打断点调试就更好了.那怎么做到呢? 其实很简单1. 打开 build/config.js 文件找到 genConfig() 函数该函数下有个config对象,给该对象添加一个属性和值: sou…

Vue2.x源码学习笔记-Vue构造函数

我们知道使用vue.js开发应用时,都是new Vue({}/*options*/) 那Vue构造函数上有哪些静态属性和方法呢?其原型上又有哪些方法呢? 一般我都会在浏览器中输入Vue来look see see 可以看到Vue构造函数上挂载了这么多属性和方法,so这么nb. 可以看到有很多的全局的api,以及实例的方法(其实就是Vue.prototype上的方法). 那么问题来了,尤大是如何把这么多方法和属性挂载上去的.那么带着问题,进入vue源码 look see see去现在写项目可能都使…

mybatis源码学习(三)-一级缓存二级缓存

本文主要是个人学习mybatis缓存的学习笔记,主要有以下几个知识点 1.一级缓存配置信息 2.一级缓存源码学习笔记 3.二级缓存配置信息 4.二级缓存源码 5.一级缓存.二级缓存总结 1.一级缓存配置: 一级缓存是SqlSession级别的,同一个sqlSession执行多次相同的查询语句时,第二次会从缓存中获取数据,不查询数据库:一级缓存是无法关闭的,默认是SESSION级别 mybatis一级缓存默认是开启的,一级缓存有两个配置值,SESSION级别和STATEMENT级别,这两个级别的区…

Vue源码学习(一）———数据双向绑定 Observer

从最简单的案例,来学习Vue.js源码. <body> <div id='app'> <input type="text" v-model="message">---{{message}} </div> </body> <script src='./vue.js'></script> <script> var app = new Vue({ el: '#app', dat…

Vue源码学习02 初始化模块init.js

接上篇,我们看到了VUE分了很多模块(initMixin()stateMixin()eventsMixin()lifecycleMixin()renderMixin()),通过使用Mixin模式,都是使用了JavaScript原型继承的原理,在Vue的原型上面增加属性和方法.我们继续跟着this._init(options)走,这个一点击进去就知道了是进入了init.js文件是在initMixin函数里面给Vue原型添加的_init方法.首先来从宏观看看这个init文件,可以看出主要是导出了两个…

Vue源码学习（零）：内部原理解析

本篇文章是在阅读<剖析 Vue.js 内部运行机制>小册子后总结所得,想要了解详细内容,请参考原文:https://juejin.im/book/5a36661851882538e2259c0f 阅读源码前想要先了解Vue的内部机制和运行原理,帮助更快更有针对性的阅读源码所以就找到了上面的小册子,小册子里主要是简化版的源码这篇文章更主要是对小册子消化后的个人笔记和总结,大部分内容是使用流程图等对Vue运行的整体流程和各个阶段做更加直观的展示下面对上图所示的整体流程做简单介绍: 一.主要步…

Vue源码学习之双向绑定

首发地址:CJWbiu's Blog 原理: ‘当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter.Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器.’ 上面那段话是Vue官方文档中截取的,可以看到是使用Object.defineProper…

vue 源码学习（一）目录结构和构建过程简介

Flow vue框架使用了Flow作为类型检查,来保证项目的可读性和维护性.vue.js的主目录下有Flow的配置.flowconfig文件,还有flow目录,指定了各种自定义类型. 在学习源码前可以先看下Flow的语法官方文档目录结构 vue.js源码主要在src下 src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── server # 服务端渲染 ├── sfc # .vue 文件解析 ├── shared…

Vue源码学习之数据初始化

首发地址:CJWbiu's Blog 在这里思考一个问题,使用Vue的时候需要在创建Vue实例时传入一个option,这里包含了我们定义的props.methods.data等.而在methods的方法中获取data中的key值都是直接通过this.key获取option对象中的methods中的定义的方法如何通过this访问到data中的数据呢? let vue = new Vue({ el: '#app', methods: { say() { console.log(this.msg) }…

Vue源码学习（二）——生命周期

官网对生命周期给出了一个比较完成的流程图,如下所示: 从图中我们可以看到我们的Vue创建的过程要经过以下的钩子函数: beforeCreate => created => beforeMount => mounted => beforeUpdate => updated => beforeDestroy => destroyed 那么我们就从源码的角度来看一看吧,当我们new Vue的时候,会执行_init函数 function Vue (options) { i…

【译】Vue源码学习（一）：Vue对象构造函数

本系列文章详细深入Vue.js的源代码,以此来说明JavaScript的基本概念,尝试将这些概念分解到JavaScript初学者可以理解的水平.有关本系列的一些后续的计划和轨迹的更多信息,请参阅此文章.有关本系列的文章更新进度的信息,请关注我的Tweeter.本系列的文章目录,请查看该链接. Vue对象构造函数 Vue实例是深入了解Vue源代码的一个基本点.正如Vue官方文档所说那样,"每个Vue应用程序都是通过使用Vue函数创建一个新的Vue实例来开始的." 在Vue的源码中,一个新…

vue源码学习-vnode的挂载和更新流程

概述本文主要介绍在视图的渲染过程中,Vue 是如何把 vnode 解析并挂载到页面中的.我们通过一个最简单的例子来分析主要流程: <div id="app"> {{someVar}} </div> <script type="text/javascript"> new Vue({ el: '#app', data: { someVar: 'init' }, mounted(){ setTimeout(() => this.…

vue 源码学习二实例初始化和挂载过程

vue 入口从vue的构建过程可以知道,web环境下,入口文件在 src/platforms/web/entry-runtime-with-compiler.js(以Runtime + Compiler模式构建,vue直接运行在浏览器进行编译工作) import Vue from './runtime/index' 下一步,找到./runtime/index,发现: import Vue from 'core/index' 下一步,找到core/index,发现: import Vue fro…

spring源码学习(三)--spring循环引用源码学习

在spring中,是支持单实例bean的循环引用(循环依赖)的,循环依赖,简单而言,就是A类中注入了B类,B类中注入了A类,首先贴出我的代码示例 @Component public class AddressVO { @Autowired private UserVO userVO; } @Component public class UserVO { @Autowired private AddressVO addressVO; public void test(){ System.out.p…

[spring源码学习]三、IOC源码——自定义配置文件读取

一.环境准备在文件读取的时候,第9步我们发现spring会根据标签的namespace来选择读取方式,联想spring里提供的各种标签,比如<aop:xxx>等应该会有不同的读取和解析方式,这一章我们来找一个其他文件,了解下spring自定义标签和配置的读取流程. 手边正好有一套dubbo的源码,因此为了区别与spring的原生读取,就使用它来进行分析. 首先spring的配置文件中我们需要加上标签的namespace <?xml version="1.0" enc…

深入vue源码，了解vue的双向数据绑定原理

大家都知道vue是一种MVVM开发模式,数据驱动视图的前端框架,并且内部已经实现了双向数据绑定,那么双向数据绑定是怎么实现的呢? 先手动撸一个最最最简单的双向数据绑定 <div> <input type="text" name="" id="text"> <span id="show"></span> </div> <script> var text =…

Vue源码之----为什么Vue中Array的pop，push等方法可以reactive，而Array[0]='a'这样的方法不会reactive?

这就要从reactive开始讲起了,粗略的说,js的操作能引起页面上显示的改变,是因为该操作引起了组件的重新渲染,渲染会生成新的虚拟节点,新节点和旧节点会对比,操作浏览器的node进行改变. vue实例以下简称vm 说具体点 data()方法的返回值以及watch,props,computed里面的属性,,在这之前都会被defineReactive方法重写get和set方法(get方法重写为调用的时候收集Dep这个静态变量指向的watcher,set方法调用的时候会notify收集的watche…

Vue源码学习(二）$mount() 后的做的事(1)

Vue实例初始化完成后,启动加载($mount)模块数据. (一)Vue$3.protype.$mount 标红的函数 compileToFunctions 过于复杂,主要是生AST 树,返回的 ref 如下: render 是浏览器虚拟机编译出来的一个函数.我们点进入可以看到如下代码(自己调整后空格换行后的数据) (function(){ with(this){ return _c('div',{ attrs:{"id":"app"…