Read Vue2.6.14 Core source code (1): entry

/** @date 2021-07-20 @description entry */Copy the code

One (sequence)

Decided to stop the daily knot today:

Sometimes I just don’t know what to write;
Output articles are mostly very superficial knowledge, want to have some of their own thinking;
They want to enjoy the process of sharing, not complete the task;

In recent days in the Vue2.6.14 source code, because the level is limited, see relatively slow, a lot of things are not very understand, need to repeatedly read, think or record, from the entrance.

Ii (Entrance)

Github Clone’s core source code is in SRC, and the core code is in SRC /core. SRC /core has an index.js file in it

import Vue from './instance/index'
import { initGlobalAPI } from './global-api/index'
import { isServerRendering } from 'core/util/env'
import { FunctionalRenderContext } from 'core/vdom/create-functional-component'

// 初始化 Vue 全局API use, mixin, extend
initGlobalAPI(Vue)

// 与ssr相关，现在不关注
Object.defineProperty(Vue.prototype, '$isServer', {
  get: isServerRendering
})
Object.defineProperty(Vue.prototype, '$ssrContext', {
  get () {
    return this.$vnode && this.$vnode.ssrContext
  }
})
Object.defineProperty(Vue, 'FunctionalRenderContext', {
  value: FunctionalRenderContext
})

// 版本号
Vue.version = '__VERSION__'

export default Vue
Copy the code

Obviously, the main ones here are Vue and initGlobalAPI

3 (Vue)

So what happens when you introduce Vue, when you go to where the Vue constructor is declared, you can see that there’s a lot more going on than just declaring the Vue constructor, right

import { initMixin } from './init' import { stateMixin } from './state' import { renderMixin } from './render' import { EventsMixin} from './events' import {lifecycleMixin} from './lifecycle' function Vue (options) {// call _init function } // add _init initMixin(Vue) // add $data(undefined) to Vue's prototype property. $props, $set, $delete, $watch stateMixin(Vue) $on, $once, $off $emit method eventsMixin(Vue) // add _update, $forceUpdate, $destroy lifecycleMixin(Vue) // Add _render, $nextTick, $destroy renderMixin(Vue) export default Vue to Vue's prototype propertyCopy the code

Boss (initGlobalAPI)

Then look at the initGlobalAPI. The main thing it does is add methods or properties to Vue and add properties to vue.options

/* @flow */ import config from '.. /config' import { initUse } from './use' import { initMixin } from './mixin' import { initExtend } from './extend' import { initAssetRegisters } from './assets' import { set, del } from '.. /observer/index' import { ASSET_TYPES } from 'shared/constants' import builtInComponents from '.. /components/index' import { observe } from 'core/observer/index' import { warn, extend, nextTick, mergeOptions, defineReactive } from '.. /util/index' export function initGlobalAPI (Vue: GlobalAPI) {const configDef = {} configdef. get = () => config // define config object.defineProperty (Vue, 'config', Vue. Util = {warn, extend, mergeOptions, defineReactive} $set, $delete, Vue. Set = Set Vue. Delete = del Vue.nextTick = nextTick // 2.6 Explicit Observable API Vue <>(obj: T): T => {observe(obj) return obj} // Set options on Vue and initialize options Vue. Options = object. create(null) /** ASSET_TYPES = [ 'component', 'directive', 'filter'] */ asset_types.foreach (type => {vue.options [type + 's'] = object.create (null)}) // vue.options. _base is Vue Itself Vue. Options. _base = Vue / / Vue.options.com add Keep Alive - ponents extend (Vue.options.com ponents, BuiltInComponents) // add use attribute to initUse(Vue) // add mixin attribute to initMixin(Vue) // add extend attribute to Vue, // Add component, directive, filter properties to Vue initAssetRegisters(Vue)}Copy the code

The above is the entry related code, the concrete implementation of things or quite a lot, here only focus on the surface.

Final (navigation)

Read Vue2.6.14 Core source code (1): entry

Read Vue2.6.14 Core source code (2): After Vue

Read Vue2.6.14 Core source code (3): initGlobalAPI

Read Vue2.6.14 Core source code (4): _init

Read Vue2.6.14 Core source code (1): entry