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

時間 2019-12-08

標籤 vue 2.0 源碼分析基礎全局配置简体版

原文原文鏈接

用法css

Vue.config是一個對象，包含Vue的全局配置,能夠在啓動應用以前修改下列屬性，以下:html

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

例如當咱們直接引入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>

在控制檯會輸出提示信息，以下:函數

在開發模式下，會輸出一條消息提示，若是咱們設置 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.spa

源碼分析調試

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
   */
  /*其他省略*/
})