Vue?入口與?initGlobalAPI實(shí)例剖析
Vue 的入口
在上面的scripts/alias
文件中可以分析出入口是
src/platforms/web/entry-runtime-with-compiler.js
import Vue from './runtime/index'
在這個(gè)入口 JS 的上方我們可以找到 Vue 的來(lái)源:import Vue from './runtime/index'
,我們先來(lái)看一下這塊兒的實(shí)現(xiàn),它定義在 src/platforms/web/runtime/index.js
中:
import Vue from 'core/index'
這里關(guān)鍵的代碼是 import Vue from 'core/index'
,之后的邏輯都是對(duì) Vue 這個(gè)對(duì)象做一些擴(kuò)展,可以先不用看,我們來(lái)看一下真正初始化 Vue 的地方,在 src/core/index.js
中:
import Vue from './instance/index'
這里有 2 處關(guān)鍵的代碼,import Vue from './instance/index'
和 initGlobalAPI(Vue)
,初始化全局 Vue API(我們稍后介紹),我們先來(lái)看第一部分,在 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 的廬山真面目,它實(shí)際上就是一個(gè)用 Function 實(shí)現(xiàn)的類,我們只能通過(guò) new Vue 去實(shí)例化它。
我們往后看這里有很多 xxxMixin 的函數(shù)調(diào)用,并把 Vue 當(dāng)參數(shù)傳入,它們的功能都是給 Vue 的 prototype 上擴(kuò)展一些方法,Vue 按功能把這些擴(kuò)展分散到多個(gè)模塊中去實(shí)現(xiàn),而不是在一個(gè)模塊里實(shí)現(xiàn)所有
initGlobalAPI
Vue.js 在整個(gè)初始化過(guò)程中,除了給它的原型 prototype 上擴(kuò)展方法,還會(huì)給 Vue 這個(gè)對(duì)象本身擴(kuò)展全局的靜態(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 上擴(kuò)展的一些全局方法的定義,Vue 官網(wǎng)中關(guān)于全局 API 都可以在這里找到
以上就是Vue 入口與 initGlobalAPI實(shí)例剖析的詳細(xì)內(nèi)容,更多關(guān)于Vue 入口 initGlobalAPI的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue-router實(shí)現(xiàn)webApp切換頁(yè)面動(dòng)畫效果代碼
本篇文章主要介紹了vue實(shí)現(xiàn)app頁(yè)面切換效果實(shí)例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05vue實(shí)現(xiàn)列表倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)列表倒計(jì)時(shí),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-09-09Vue結(jié)合路由配置遞歸實(shí)現(xiàn)菜單欄功能
這篇文章主要介紹了Vue結(jié)合路由配置遞歸實(shí)現(xiàn)菜單欄,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)火鍋工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06淺談Vue.js 關(guān)于頁(yè)面加載完成后執(zhí)行一個(gè)方法的問(wèn)題
這篇文章主要介紹了Vue.js 關(guān)于頁(yè)面加載完成后執(zhí)行一個(gè)方法的問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04vue?使用addRoutes動(dòng)態(tài)添加路由及刷新頁(yè)面跳轉(zhuǎn)404路由的問(wèn)題解決方案
我自己使用addRoutes動(dòng)態(tài)添加的路由頁(yè)面,使用router-link標(biāo)簽可以跳轉(zhuǎn),但是一刷新就會(huì)自動(dòng)跳轉(zhuǎn)到我定義的通配符?*?指向的404路由頁(yè)面,這說(shuō)明沒有找到指定路由才跳到404路由的,這樣的情況如何處理呢,下面小編給大家分享解決方案,一起看看吧2023-10-10vue實(shí)現(xiàn)條件判斷動(dòng)態(tài)綁定樣式的方法
今天小編就為大家分享一篇vue實(shí)現(xiàn)條件判斷動(dòng)態(tài)綁定樣式的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09解決vue select當(dāng)前value沒有更新到vue對(duì)象屬性的問(wèn)題
今天小編就為大家分享一篇解決vue select當(dāng)前value沒有更新到vue對(duì)象屬性的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08element-ui el-dialog嵌套table組件,ref問(wèn)題及解決
這篇文章主要介紹了element-ui el-dialog嵌套table組件,ref問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02