Vue?入口與?initGlobalAPI實例剖析
Vue 的入口
在上面的scripts/alias
文件中可以分析出入口是
src/platforms/web/entry-runtime-with-compiler.js
import Vue from './runtime/index'
在這個入口 JS 的上方我們可以找到 Vue 的來源:import Vue from './runtime/index'
,我們先來看一下這塊兒的實現,它定義在 src/platforms/web/runtime/index.js
中:
import Vue from 'core/index'
這里關鍵的代碼是 import Vue from 'core/index'
,之后的邏輯都是對 Vue 這個對象做一些擴展,可以先不用看,我們來看一下真正初始化 Vue 的地方,在 src/core/index.js
中:
import Vue from './instance/index'
這里有 2 處關鍵的代碼,import Vue from './instance/index'
和 initGlobalAPI(Vue)
,初始化全局 Vue API(我們稍后介紹),我們先來看第一部分,在 src/core/instance/index.js
中:
import { initMixin } from './init' import { stateMixin } from './state' import { renderMixin } from './render' import { eventsMixin } from './events' import { lifecycleMixin } from './lifecycle' import { warn } from '../util/index' 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) export default Vue
在這里,我們終于看到了 Vue 的廬山真面目,它實際上就是一個用 Function 實現的類,我們只能通過 new Vue 去實例化它。
我們往后看這里有很多 xxxMixin 的函數調用,并把 Vue 當參數傳入,它們的功能都是給 Vue 的 prototype 上擴展一些方法,Vue 按功能把這些擴展分散到多個模塊中去實現,而不是在一個模塊里實現所有
initGlobalAPI
Vue.js 在整個初始化過程中,除了給它的原型 prototype 上擴展方法,還會給 Vue 這個對象本身擴展全局的靜態(tài)方法,它的定義在 src/core/global-api/index.js
中:
/* @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) { // config const configDef = {} configDef.get = () => config if (process.env.NODE_ENV !== 'production') { configDef.set = () => { warn( 'Do not replace the Vue.config object, set individual fields instead.' ) } } Object.defineProperty(Vue, 'config', configDef) // exposed util methods. // NOTE: these are not considered part of the public API - avoid relying on // them unless you are aware of the risk. Vue.util = { warn, extend, mergeOptions, defineReactive } Vue.set = set Vue.delete = del Vue.nextTick = nextTick // 2.6 explicit observable API Vue.observable = <T>(obj: T): T => { observe(obj) return obj } Vue.options = Object.create(null) ASSET_TYPES.forEach(type => { Vue.options[type + 's'] = Object.create(null) }) // this is used to identify the "base" constructor to extend all plain-object // components with in Weex's multi-instance scenarios. Vue.options._base = Vue extend(Vue.options.components, builtInComponents) initUse(Vue) initMixin(Vue) initExtend(Vue) initAssetRegisters(Vue) }
這里就是在 Vue 上擴展的一些全局方法的定義,Vue 官網中關于全局 API 都可以在這里找到
以上就是Vue 入口與 initGlobalAPI實例剖析的詳細內容,更多關于Vue 入口 initGlobalAPI的資料請關注腳本之家其它相關文章!
相關文章
淺談Vue.js 關于頁面加載完成后執(zhí)行一個方法的問題
這篇文章主要介紹了Vue.js 關于頁面加載完成后執(zhí)行一個方法的問題,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-04-04vue?使用addRoutes動態(tài)添加路由及刷新頁面跳轉404路由的問題解決方案
我自己使用addRoutes動態(tài)添加的路由頁面,使用router-link標簽可以跳轉,但是一刷新就會自動跳轉到我定義的通配符?*?指向的404路由頁面,這說明沒有找到指定路由才跳到404路由的,這樣的情況如何處理呢,下面小編給大家分享解決方案,一起看看吧2023-10-10解決vue select當前value沒有更新到vue對象屬性的問題
今天小編就為大家分享一篇解決vue select當前value沒有更新到vue對象屬性的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08element-ui el-dialog嵌套table組件,ref問題及解決
這篇文章主要介紹了element-ui el-dialog嵌套table組件,ref問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-02-02