【Vue源码探究一】当我们引入Vue，我们引入了什么？

mengbo 发布于2019-08-20 16:30 / 3252人阅读

摘要：源码版本构造器实例选项让我们用一段展示一下这三个概念其中的构造器实例实例名可以任意取，这里我们便于理解保持和文档一致选项即为传入构造器里的配置选项。其实构造器上也绑了不少好用的方法。

源码版本：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）
引入了构造函数后，我们有几种使用方式

最常见的使用方式: var vm = new Vue(options)

将我们自定义的选项，传入构造器。当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

initGlobalAPI

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源码解析之前端渲染篇

idc机房托管私有云 cdn引入vue 引入了关于我们网站源码数据库拒绝了我们的连接请求

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82959.html

Vue源码学习（一）——追根究底Vue

摘要：其中执行命令是我们当前所关注的，对于项目的文件结构，我们需要去找到项目的启动的入口文件，接下来我们去一步一步的找到分析命令是一个模块打包器。打算开始学习vue的源码开始，我开始 serach 关键词：vue 源码，可是发现很多都不是我想要看到的东西，所以打算记录下来，学习的记录和日后分享。我在想这个文章的名字时，手把手系列？十分钟系列？小白到大佬系列？都不是，只是单纯的学习笔记文件...

Harriet666 2019-08-23 13:55 评论0 收藏0
Vue源码解读(1)--src/core/index.js 入口文件

摘要：生产版本设为可以启用检查。只适用于开发模式和支持的浏览器上指定组件的渲染和观察期间未捕获错误的处理函数为的运行时警告赋予一个自定义处理函数。注意这只会在开发者环境下生效，在生产环境下它会被忽略。 Vue源码主入口:src/core/index.js import Vue from ./instance/index // 引用Vue构造器 import { initGlobalAPI }...

tangr206 2019-08-22 17:36 评论0 收藏0
Vue 2.0 升（cai）级（keng）之旅

摘要：前言这节净是些唠叨，只想看升级的可直接跳过。在不久之前，如约发布了版本。正如计划之初，博客的版本也将升级到。升级之旅首先，升级依赖。那该怎么做哪再一次谷哥和查阅文档，然而一无所获。返回的是整个项目路由的实例，它是只读的。 Troubleshooting of upgrading Vue from 1.0 to 2.0 系列文章: Vue 2.0 升（cai）级（keng）之旅 (本...

lidashuang 2019-08-21 14:16 评论0 收藏0
前方来报，八月最新资讯--关于vue2&3的最佳文章推荐

摘要：哪吒别人的看法都是狗屁，你是谁只有你自己说了才算，这是爹教我的道理。哪吒去他个鸟命我命由我，不由天是魔是仙，我自己决定哪吒白白搭上一条人命，你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运，我不晓得。我只晓得，不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 评论0 收藏0
vue源码分析系列

摘要：本系列文章旨在化繁为简，通读源码，描述背后的实现逻辑。记录方式主要是代码注释文章链接源码分析系列之环境搭建源码分析系列之入口文件分析源码分析系列之响应式数据一源码分析系列之响应式数据二概述在使用vue的时候，会遇到很多神奇的地方，比如修改vue实例中data对象的属性值，会触发dom值的改变；改变dom中的输入，会触发data对应属性的改变，即双向数据绑定。通过watch可以...

Joonas 2019-08-23 15:10 评论0 收藏0