Vue.js 源碼分析(二) 基礎篇 全局配置


Vue.config是一個對象,包含Vue的全局配置,可以在啟動應用之前修改下列屬性,如下:

ptionMergeStrategies        ;自定義合並策略的選項
silent                   ;是否關閉警告,默認為false,如果設置true,那么將不會有各種報錯
productionTip             ;開發模式下是否在控制台顯示生產提示,即一條You are running Vue in development mode提示,設置false,即可關閉該提示
devtools                ;是否允許vue-devtools(Vue調試神器)檢查代碼,瀏覽器環境下為true
performance                 ;是否開啟性能追蹤,只有在開發模式和支持 performance.mark API 的瀏覽器上才有效
errorHandler                ;指定組件的渲染和觀察期間未捕獲錯誤的處理函數。這個處理函數被調用時,可獲取錯誤信息和 Vue 實例。
warnHandler                 ;Vue 的運行時警告賦予一個自定義處理函數。注意這只會在開發者環境下生效,在生產環境下它會被忽略。
ignoredElements             ;忽略某些自定義元素
keyCodes                    ;給v-on 自定義鍵位別名。
isReservedTag               ;保留標簽,如有,則這些標簽不能注冊成為組件

例如當我們直接引入vue的js文件時:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <title>Document</title>
</head>
<body>    
</body>
</html>

在控制台會輸出提示信息,如下:

 writer by:大沙漠 QQ:22969969

在開發模式下,會輸出一條消息提示,如果我們設置 productionTip 為false即可關閉這條提示,如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <title>Document</title>
</head>
<body>
<script>Vue.config.productionTip=false</script>    
</body>
</html>

、在Vue的官網也是設置productionTip配置屬性為false實現關閉消息提示的:

 

注意:我們只能修改vue.config里的某個屬性,而不能直接修改config,這樣要報錯的,如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <title>Document</title>
</head>
<body>
<script>Vue.config={productionTip:false}</script>    
</body>
</html>

報錯:[Vue warn]: Do not replace the Vue.config object, set individual fields instead.

 

源碼分析


 

 Vue內部會執行一個initGlobalAPI(Vue)函數,Vue就是匿名函數表達式里的Vue函數對象(不懂可以回頭看看第一節代碼結構),如下:

function initGlobalAPI (Vue) {      //在第5016行
  // config
  var configDef = {};
  configDef.get = function () { return config; };           //Vue.config會獲取config全局變量
  {
    configDef.set = function () {                           //設置Vue.config時直接報錯,即不允許設置Vue.config值
      warn(
        'Do not replace the Vue.config object, set individual fields instead.'
      );
    };
  }
  Object.defineProperty(Vue, 'config', configDef);          //通過ES5的defineProperty設置Vue的config的訪問器屬性,獲取Vue.config時會執行configDef.get函數,設置Vue.config時會執行configDef.set函數

  /*中間省略*/
}

 

config是一個全局對象,定義在vue.js開始的361行,如下:

var config = ({     //第361行
  /**
   * Option merge strategies (used in core/util/options)
   */
  // $flow-disable-line
  optionMergeStrategies: Object.create(null),

  /**
   * Whether to suppress warnings.
   */
  silent: false,

  /**
   * Show production mode tip message on boot?
   */
  productionTip: "development" !== 'production',      //這就是剛剛我們測試的例子對應的屬性

  /**
   * Whether to enable devtools
   */
  devtools: "development" !== 'production',

  /**
   * Whether to record perf
   */
  /*其余省略*/
})

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM