Vue源碼解析(一)：創(chuàng)建vue程序的背后發(fā)生了什么

nevermind 發(fā)布于2019-08-26 13:39 / 1817人閱讀

摘要：主要大綱從方法看全局配置尋根問祖的構(gòu)造函數(shù)的出生地先來一段最常見的代碼上面已經(jīng)創(chuàng)建了一個(gè)應(yīng)用程序從上面很容易就看出來是一個(gè)構(gòu)造器，是用這個(gè)構(gòu)造器構(gòu)造出來的實(shí)例化對象，實(shí)例化的時(shí)候傳入了參數(shù)，參數(shù)中包括和上述延伸了個(gè)問題構(gòu)造器是什么模樣可以

主要大綱:

從initGlobalAPI方法看Vue.config全局配置

尋根問祖-Vue的構(gòu)造函數(shù)的出生地

先來一段最常見的vue代碼demo


  {{ message }}

// js
var vm = new Vue({
  el: "#app",
  data: {
    message: ‘hello vue"
  }
})

上面已經(jīng)創(chuàng)建了一個(gè)vue應(yīng)用程序；從上面很容易就看出來 Vue是一個(gè)構(gòu)造器，vm是用這個(gè)構(gòu)造器構(gòu)造出來的實(shí)例化對象，實(shí)例化的時(shí)候傳入了參數(shù)，參數(shù)中包括el和data
上述延伸了3個(gè)問題：

Vue 構(gòu)造器是什么模樣？

Vm可以使用的方法，即vue的開放API都在源碼里面怎么實(shí)現(xiàn)的？

我們傳入構(gòu)造方法內(nèi)的參數(shù)發(fā)生了什么

這些問題是我們解鎖vue源碼的最開始的步驟，所以我們不妨通過vue源碼的入口開始尋找這些源碼的實(shí)現(xiàn)

在源碼的src/platforms/web下面放著不同版本的構(gòu)建entry文件，這些文件中導(dǎo)出export的Vue，都是從src/core/instance/index這個(gè)文件import過來的，
我們先看下入口文件能帶給我們什么答案：

// src/core/instance/index
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"
initGlobalAPI(Vue)

這個(gè)入口文件做了3件事：

引用了 ./instance/index, 暴露了vue的來源，即構(gòu)造器

調(diào)用initGlobalAPI方法，將vue傳進(jìn)去， 給vue拓展了全局靜態(tài)方法

將vue暴露出去

這個(gè)入口文件的意義，是在暴露vue之前，給vue通過initGlobalAPI方法給vue拓展了全局靜態(tài)方法，對應(yīng)Vue的外部API是 Vue.config，包含了Vue的全局配置，

Vue.config.silent // 日志與警告
Vue.config.errorHandler // 這個(gè)處理函數(shù)被調(diào)用的時(shí)候，可以獲取錯(cuò)誤信息和Vue實(shí)例
Vue.config.devtools // 配置是否允許 vue-devtools 檢查代碼
…..

從initGlobalAPI方法看Vue.config全局配置

initGlobalAPI方法定義了configDef對象，它的getter方法會(huì)的屬性值是config，setter方法給出警告不允許修改。最后在vue上添加了config屬性，屬性描述返回configDef對象

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) // 添加config屬性

除此之外，還定義了util屬性，但是并沒有暴露到外面，也并不建議外部去使用

尋根問祖-Vue的構(gòu)造函數(shù)的出生地

了解了構(gòu)造函數(shù)，也就知道了new vue()的時(shí)候發(fā)生了什么
下面這段代碼就是Vue的構(gòu)造方法，我們可以直觀的看出vue構(gòu)造器是使用ES5的Function去實(shí)現(xiàn)類，是因?yàn)榭梢酝ㄟ^prototype往vue原型上拓展很多方法，把這些方法拆分到不同的文件/模塊下，這樣更有利于代碼的維護(hù)，與協(xié)同開發(fā)
比如在這個(gè)文件中，可以看到把Vue當(dāng)作一個(gè)參數(shù)傳進(jìn)下面的**Mixin方法中，這些方法都是通過接收vue，在它的prototype上面定義一些功能的;

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’)
            //   vue必須是new vue()的實(shí)例化對象
           }
        console.log("options", options)

        this._init(options) // 調(diào)用內(nèi)部_init方法
}
initMixin(Vue) // 在created生命周期函數(shù)之前的操作
stateMixin(Vue) // 利用 definedProperty 進(jìn)行靜態(tài)數(shù)據(jù)的訂閱發(fā)布
eventsMixin(Vue) // 實(shí)例事件流的注入, 利用的是訂閱發(fā)布模式的事件流構(gòu)造
lifecycleMixin(Vue) // 
renderMixin(Vue) // 實(shí)現(xiàn) _render 渲染虛擬dom
export default Vue

這個(gè)構(gòu)造函數(shù)的最核心點(diǎn),就是this._init(options)

在此處打斷點(diǎn)，可以看到參數(shù)options傳進(jìn)來的就是外面我們實(shí)例化時(shí)傳入的參數(shù)el 和 data

new Vue({
    el: "#app",
      data: {
        message: ‘hello vue"    
      }
})

這個(gè)_init方法出自initMixin 函數(shù)
看完這個(gè)函數(shù)，我們梳理出整個(gè)初始化階段源碼的幾個(gè)重要的節(jié)點(diǎn)

初始化options參數(shù)進(jìn)行合并配置

初始化生命周期

初始化時(shí)間系統(tǒng)

初始化state,包括data、props、 computed、watcher

export function initMixin (Vue: Class) {

console.log("Vue", Vue)
Vue.prototype._init = function (options?: Object) {
const vm: Component = this
// a uid 實(shí)例化的uid遞增1
vm._uid = uid++
let startTag, endTag
/* istanbul ignore if */

...

// 用_isVue來標(biāo)識(shí)當(dāng)前的實(shí)例是個(gè)Vue實(shí)例，這樣做是為了后續(xù)被observed
vm._isVue = true    
// 合并配置options,并判斷是否是內(nèi)部Component的options的初始化
if (options && options._isComponent) {
    // 內(nèi)部
    initInternalComponent(vm, options)
} else {
    // 非內(nèi)部
    vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
    )
}
// 在render中將this指向vm._renderProxy
if (process.env.NODE_ENV !== "production") {
    initProxy(vm)
} else {
    vm._renderProxy = vm
}
// expose real self
vm._self = vm
// 初始化生命周期
initLifecycle(vm)    
// 初始化事件注冊
initEvents(vm)
// 初始化渲染
initRender(vm)
// 觸發(fā)回掉函數(shù)中的beforeCreate鉤子函數(shù)
callHook(vm, "beforeCreate")
initInjections(vm) // resolve injections before data/props
// 初始化vm的狀態(tài),包括data、props、computed、watcher等
initState(vm)
initProvide(vm) // resolve provide after data/props
// vm已經(jīng)創(chuàng)建好來，回掉created鉤子函數(shù)
callHook(vm, "created’)
/* istanbul ignore if */
…
// 將實(shí)例進(jìn)行掛載
if (vm.$options.el) {
    vm.$mount(vm.$options.el)
    }
}

}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/109241.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

nevermind

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow1.8

閱讀 3573·2023-04-26 00:05
C語言實(shí)現(xiàn)入門級(jí)小游戲——掃雷

閱讀 959·2021-11-11 16:55
單片機(jī)入門指南

閱讀 3539·2021-09-26 09:46
TP5實(shí)現(xiàn)表格拖動(dòng)排序并保存到數(shù)據(jù)庫功能

閱讀 3525·2019-08-30 15:56
前端基礎(chǔ)入門五（掌握jQuery的常用api，實(shí)現(xiàn)動(dòng)態(tài)效果）

閱讀 919·2019-08-30 15:55
【零基礎(chǔ)入門】 css學(xué)習(xí)筆記（4）布局與定位介紹

閱讀 2941·2019-08-30 15:53
關(guān)于響應(yīng)式布局，你必須要知道的

閱讀 1954·2019-08-29 17:11
python大佬養(yǎng)成計(jì)劃----HTML網(wǎng)頁設(shè)計(jì)（表單）

閱讀 822·2019-08-29 16:52

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

Vue源碼解析(一)：創(chuàng)建vue程序的背后發(fā)生了什么

相關(guān)文章

**用Vue自己造個(gè)組件輪子，以及實(shí)踐背后帶來的思考**

Vue.js源碼（1）：Hello World的背后

**【Vue原理】Component - 白話版**

**太原面經(jīng)分享：如何在vue面試環(huán)節(jié)，展示你晉級(jí)阿里P6+的技術(shù)功底？**

**[全網(wǎng)最全的 Vue CLI 3 原創(chuàng)合集] 你要的這里都有**

發(fā)表評(píng)論

0條評(píng)論

nevermind

男|高級(jí)講師

TA的文章

tensorflow1.8

C語言實(shí)現(xiàn)入門級(jí)小游戲——掃雷

單片機(jī)入門指南

TP5實(shí)現(xiàn)表格拖動(dòng)排序并保存到數(shù)據(jù)庫功能

前端基礎(chǔ)入門五（掌握jQuery的常用api，實(shí)現(xiàn)動(dòng)態(tài)效果）

【零基礎(chǔ)入門】 css學(xué)習(xí)筆記（4）布局與定位介紹

關(guān)于響應(yīng)式布局，你必須要知道的

python大佬養(yǎng)成計(jì)劃----HTML網(wǎng)頁設(shè)計(jì)（表單）

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

Vue源碼解析(一)： 創(chuàng)建vue程序的背后發(fā)生了什么

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

Vue源碼解析(一)：創(chuàng)建vue程序的背后發(fā)生了什么