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

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

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

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

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静态方法和静态属性,其实直接在浏览器中可以查看到的,如下 圈起来的是其静态属性,但是有的属性对象中的属性的值又是函数.未圈起来的则是函数. 其实它来自如下各个目录下的js文件 // src/core/index.js Vue.version = '__VERSION__' // src/entries/web-runtime-with-compiler.js Vue.compile = compileToFunctions // 把模板template转换为render函数 // src/…

还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: 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…

大体思路(九) 本节内容: 1. compileToFunctions定位 1. compileToFunctions定位 ==> createCompiler = createCompilerCreator(function beasCompile(){}) // 创建编译器的编译器 编译器的爷爷. ==> beasOptions 编译器默认预留选项 ==> createCompiler(beasOptions) 创建一个编译器.返回一个对象 ==> { compile: fun…