Vue源碼解讀(1)--src/core/index.js 入口文件

tangr206 發布于2019-08-22 17:36 / 1183人閱讀

摘要：生產版本設為可以啟用檢查。只適用于開發模式和支持的瀏覽器上指定組件的渲染和觀察期間未捕獲錯誤的處理函數為的運行時警告賦予一個自定義處理函數。注意這只會在開發者環境下生效，在生產環境下它會被忽略。

Vue源碼主入口:src/core/index.js

import Vue from "./instance/index" // 引用Vue構造器
import { initGlobalAPI } from "./global-api/index" // 調用initGlobalAPI方法，定義全局資源
import { isServerRendering } from "core/util/env"
import { FunctionalRenderContext } from "core/vdom/create-functional-component"

initGlobalAPI(Vue)
...

Vue.version = "__VERSION__"

export default Vue //暴露Vue

打印出Vue構造器的屬性及原型對象屬性，此時原型對象已額外定義了30個原型對象屬性及一個自動獲得的constructor(構造函數)屬性（Vue.prototype.constructor === Vue）

https://segmentfault.com/img/...

該圖片引用自：【Vue源碼探究一】當我們引入Vue，我們引入了什么？
然后查看src/core/global-api/index中的initGlobalAPI方法，將Vue構造器作為參數傳入

export function initGlobalAPI (Vue: GlobalAPI) {
  // config
  const configDef = {}
  /**
    // 全局配置: config中的參數
    config = {
        optionMergeStrategies: Object.create(null), // 合并策略的選項
        silent: false, // 取消 Vue 所有的日志與警告
        devtools: process.env.NODE_ENV !== "production", // 配置是否允許 vue-devtools 檢查代碼。開發版本默認為 true，生產版本默認為 false。生產版本設為 true 可以啟用檢查。
        performance: false, // 設置為 true 以在瀏覽器開發工具的性能|時間線面板中啟用對組件初始化、編譯、渲染和打補丁的性能追蹤。只適用于開發模式和支持 performance.mark API 的瀏覽器上
        errorHandler: null, // 指定組件的渲染和觀察期間未捕獲錯誤的處理函數
        warnHandler: null, // 為 Vue 的運行時警告賦予一個自定義處理函數。注意這只會在開發者環境下生效，在生產環境下它會被忽略。
        ignoredElements: [],
        keyCodes: Object.create(null), // 給 v-on 自定義鍵位別名
        isReservedTag: no,
        isReservedAttr: no,
        isUnknownElement: no,
        getTagNamespace: noop,
        parsePlatformTagName: identity,
    }
    **/
  configDef.get = () => config // import config from "../config"
  if (process.env.NODE_ENV !== "production") {
    configDef.set = () => {
      util.warn(
        // Vue.config = {...}會觸發setter，設置config中屬性不會，Vue.config.silent = true (取消 Vue 所有的日志與警告)
        "Do not replace the Vue.config object, set individual fields instead."
      )
    }
  }
  // 各種全局配置項
  Object.defineProperty(Vue, "config", configDef)
  Vue.util = util // 各種工具函數，及一些兼容性的標志位
  Vue.set = set // Vue.set
  Vue.delete = del // Vue.delete
  Vue.nextTick = util.nextTick

  Vue.options = Object.create(null) // Vue默認提供的資源
  // ASSET_TYPES: ["component", "directive", "filter"]
  config._assetTypes.forEach(type => {
    Vue.options[type + "s"] = Object.create(null)
  })

  Vue.options._base = Vue

  //builtInComponents: {KeepAlive: KeepAlive}
  util.extend(Vue.options.components, builtInComponents)

  initUse(Vue) // Vue.use
  initMixin(Vue) // Vue.minxin
  initExtend(Vue) // Vue.extend
  initAssetRegisters(Vue)
}

GPU云服務器云服務器源碼解讀 webrtc源碼解讀 webrtc fec源碼解讀 js v8源碼解讀

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95325.html

Vue源碼學習（一）——追根究底Vue

摘要：其中執行命令是我們當前所關注的，對于項目的文件結構，我們需要去找到項目的啟動的入口文件，接下來我們去一步一步的找到分析命令是一個模塊打包器。打算開始學習vue的源碼開始，我開始 serach 關鍵詞：vue 源碼，可是發現很多都不是我想要看到的東西，所以打算記錄下來，學習的記錄和日后分享。我在想這個文章的名字時，手把手系列？十分鐘系列？小白到大佬系列？都不是，只是單純的學習筆記文件...

Harriet666 2019-08-23 13:55 評論0 收藏0
Vue2 源碼分析

摘要：應用啟動一般是通過，所以，先從該構造函數著手。構造函數文件該文件只是構造函數，原型對象的聲明分散在當前目錄的多個文件中構造函數接收參數，然后調用。源碼版本：v2.1.10 分析目標通過閱讀源碼，對 Vue2 的基礎運行機制有所了解，主要是： Vue2 中數據綁定的實現方式 Vue2 中對 Virtual DOM 機制的使用方式源碼初見項目構建配置文件為 build/conf...

alin 2019-08-20 14:35 評論0 收藏0
vue源碼學習（一）——從入口開始

摘要：學習源碼時，我們首先需要看的是文件，該文件里配置了的依賴以及開發環境和生產環境的編譯的啟動腳本等其他信息。一個是完整版，一個是運行時。運行時用來創建實例渲染并處理虛擬等的代碼。基本上就是除去編譯器的其它一切。學習vue源碼時，我們首先需要看的是package.json文件，該文件里配置了vue的依賴以及開發環境和生產環境的編譯的啟動腳本等其他信息。首先我們需要關注的是script。我...

ybak 2019-08-23 12:41 評論0 收藏0
Vue源碼學習（二）——從宏觀看Vue

摘要：上一篇文章我們寫到從入口文件一步步找到的構造函數，現在我們要去看看實例化經歷的過程的構造函數我們知道的構造函數在中不明白的可以去看上一篇文章源碼學習筆記一。上一篇文章我們寫到從入口文件一步步找到Vue的構造函數，現在我們要去看看Vue實例化經歷的過程 Vue的構造函數我們知道Vue的構造函數在src/core/instance/index.js中,不明白的可以去看上一篇文章 Vue...

AndroidTraveler 2019-08-23 13:59 評論0 收藏0
深入Vue.js從源碼開始(二)

摘要：有一點要注意的是，暴露的方法最好不要依賴，因為它可能經常會發生變化，是不穩定的。從入口開始我們之前提到過 Vue.js 構建過程，在 web 應用下，我們來分析 Runtime + Compiler 構建出來的 Vue.js，它的入口是 src/platforms/web/entry-runtime-with-compiler.js：摘選entry-runtime-with-co...

rainyang 2019-08-23 13:40 評論0 收藏0