摘要:源码版本构造器实例选项让我们用一段展示一下这三个概念其中的构造器实例实例名可以任意取,这里我们便于理解保持和文档一致选项即为传入构造器里的配置选项。其实构造器上也绑了不少好用的方法。
源码版本:2.0.5
构造器、实例、选项让我们用一段demo展示一下这三个概念:
//HTML{{ message }}
//JS var vm = new Vue({ el: "#app", data: { message: "Hello Vue!" } })
其中:
Vue: Vue的构造器
vm : 实例 (实例名可以任意取,这里我们便于理解保持和vue文档一致)
new Vue(options): 选项(options)即为传入构造器里的配置选项。(data, methods,computed,created...)
当我们了解这三个概念,将有助于我们去理解vue的api文档
Vue 的开放api跳转到vue的文档
全局配置: 以 Vue.config.xx 的形式去访问和修改
全局API: 以Vue.xx 的形式去访问和修改
选项: 以 var vm = new Vue(options) 的形式将options传入构造器
实例属性/方法: 以vm.$xx的方式去访问 (前缀$,为了避免用户data/methods等解析后绑定的api 和 默认api冲突)
从api文档中我们可以了解到,当我们引入vue.js, 我们仅仅引入了一个构造函数(Vue)
引入了构造函数后,我们有几种使用方式
将我们自定义的选项,传入构造器。 当new Vue(options)时,会自动运行vm._init方法
解析各种选项
调用beforeCreate 和created 上绑定的钩子函数
将数据项(data,computed,props)和methods等绑到实例上
调用vm.$mount方法,来执行模板渲染
返回一个实例对象 vm
实际上,我们使用vue.js来开发时,主要就是配置不同的options提供Vue构造器解析,实现不同的业务功能。
通过更改Vue.config来进行全局配置 在选项内部可以使用 Vue 和 vm 来调用构造器和实例上的方法 Vue源码是怎么开放这些api的 主入口src/core/index.js
import Vue from "./instance/index" import { initGlobalAPI } from "./global-api/index" import { isServerRendering } from "core/util/env" initGlobalAPI(Vue) Object.defineProperty(Vue.prototype, "$isServer", { get: isServerRendering }) Vue.version = "__VERSION__" export default Vue
Vue源码的主入口主要做三件事
1.引用 ./instance/index 中暴露的Vue构造器
2.调用initGlobalAPI方法,定义全局资源
3.暴露Vue
src/core/global-api/index.js
//源码有点长,我去掉了引用部分和一些注释。 export function initGlobalAPI (Vue: GlobalAPI) { // config const configDef = {} configDef.get = () => config if (process.env.NODE_ENV !== "production") { configDef.set = () => { util.warn( "Do not replace the Vue.config object, set individual fields instead." ) } } Object.defineProperty(Vue, "config", configDef) Vue.util = util Vue.set = set Vue.delete = del Vue.nextTick = util.nextTick Vue.options = Object.create(null) config._assetTypes.forEach(type => { Vue.options[type + "s"] = Object.create(null) }) Vue.options._base = Vue util.extend(Vue.options.components, builtInComponents) initUse(Vue) initMixin(Vue) initExtend(Vue) initAssetRegisters(Vue) }
initGlobal的代码就是对Vue进行各种方法和属性定义
【Vue.config】 各种全局配置项
【Vue.util】 各种工具函数,还有一些兼容性的标志位(哇,不用自己判断浏览器了,Vue已经判断好了)
【Vue.set/delete】 这个你文档应该见过
【Vue.nextTick】
【Vue.options】 这个options和我们上面用来构造实例的options不一样。这个是Vue默认提供的资源(组件指令过滤器)。
【Vue.use】 通过initUse方法定义
【Vue.mixin】 通过initMixin方法定义
【Vue.extend】通过initExtend方法定义
这些定义的全局api可好玩了,平常我们多是用实例上的方法。其实构造器上也绑了不少好用的方法。
有兴趣的同学,可以用下方代码去探究一下
在你的vue项目里,谷歌命令行键入 Object.getOwnPropertyNames(Vue) //可以看定义在对象上的所有属性名/方法名 Vue.config Vue.util Vue.set.toString() //我们平常在控制台上是看不了一个函数到底源码怎么样的,用toString()就可以啦Vue构造器的定义
src/core/instance/index.js
//构造函数,当new Vue(options) 会自动执行这个函数 function Vue (options) { if (process.env.NODE_ENV !== "production" && !(this instanceof Vue)) { warn("Vue is a constructor and should be called with the `new` keyword") } this._init(options) } initMixin(Vue) stateMixin(Vue) eventsMixin(Vue) lifecycleMixin(Vue) renderMixin(Vue)
这里就不一个一个函数展开了
构造函数里其实就一句话,this._init(options)
initMixin之类的方法,定义了实例上的方法,下面给出一个探索地图,以供探究源码
我们可以看到 以 "_"为开头的方法,多半是Vue内部使用,但不公开的api。
以“$” 为开头的方法,是文档中公开给用户使用的默认api
至此,我们对Vue的结构有了个初步的了解,以及相关api的原始出处有了初步了解。
在学习的过程中,参考了两位大牛的文章,收益良多
囧克斯 Vue.js源码学习笔记
王鹤 Vue.js 2.0源码解析之前端渲染篇
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/82959.html
摘要:其中执行命令是我们当前所关注的,对于项目的文件结构,我们需要去找到项目的启动的入口文件,接下来我们去一步一步的找到分析命令是一个模块打包器。 打算开始学习vue的源码开始,我开始 serach 关键词:vue 源码,可是发现很多都不是我想要看到的东西,所以打算记录下来,学习的记录和日后分享。我在想这个文章的名字时,手把手系列?十分钟系列?小白到大佬系列?都不是,只是单纯的学习笔记 文件...
摘要:生产版本设为可以启用检查。只适用于开发模式和支持的浏览器上指定组件的渲染和观察期间未捕获错误的处理函数为的运行时警告赋予一个自定义处理函数。注意这只会在开发者环境下生效,在生产环境下它会被忽略。 Vue源码主入口:src/core/index.js import Vue from ./instance/index // 引用Vue构造器 import { initGlobalAPI }...
摘要:前言这节净是些唠叨,只想看升级的可直接跳过。在不久之前,如约发布了版本。正如计划之初,博客的版本也将升级到。升级之旅首先,升级依赖。那该怎么做哪再一次谷哥和查阅文档,然而一无所获。返回的是整个项目路由的实例,它是只读的。 Troubleshooting of upgrading Vue from 1.0 to 2.0 系列文章: Vue 2.0 升(cai)级(keng)之旅 (本...
摘要:哪吒别人的看法都是狗屁,你是谁只有你自己说了才算,这是爹教我的道理。哪吒去他个鸟命我命由我,不由天是魔是仙,我自己决定哪吒白白搭上一条人命,你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运,我不晓得。我只晓得,不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处 查看github最新的Vue...
阅读 1019·2021-11-23 10:11
阅读 3861·2021-11-16 11:50
阅读 926·2021-10-14 09:43
阅读 2716·2021-10-14 09:42
阅读 2713·2021-09-22 16:02
阅读 1057·2019-08-29 10:57
阅读 3381·2019-08-29 10:57
阅读 2272·2019-08-26 13:52