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

【Vue2.x源码学习笔记-Vue构造函数】的更多相关文章

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

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

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实例的属性和方法整理

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

Vue2.x源码学习笔记-Vue静态方法和静态属性整理

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

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

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

Vue2.x源码学习笔记-从一个小例子查看vm实例生命周期

学习任何一门框架,都不可能一股脑儿的从入口代码从上到下,把代码看完, 这样其实是很枯燥的,我想也很少有人这么干,或者这么干着干着可能干不下去了. 因为肯定很无聊. 我们先从一个最最简单的小例子,来查看new Vue(options)实例,这个过程发生了什么. vm实例上的属性又如何添加上去的,又如何渲染到浏览器页面上的. 关于vue的数据依赖和虚拟dom都是重点,必然会在以后的帖子记录. 这篇帖子就根据下例子,看看实例化一个vm实例做了啥吧. 先把小例子贴出来: <div id="app&…

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…

Vue2.x源码学习笔记-源码目录结构整理

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…