vue的源碼解析（內部定義及配置）

PumpkinDylan 發布于2019-08-23 16:01 / 428人閱讀

摘要：這邊有個的定義。獲取元素的名稱空間解析特定平臺的實際標記名稱檢查屬性是否必須使用屬性例如綁定異步執行更新。其中屬性返回一個字符串，該字符串包含對象的源文本，并且它不包含兩邊的兩個正斜杠和任何標志。

SSR_ATTR

var SSR_ATTR = "data-server-rendered";

這邊有個vue SSR的定義。服務端渲染，后面在6446行才有。看到了多帶帶給他寫一篇。

ASSET_TYPES

var ASSET_TYPES = [
    "component",
    "directive",
    "filter"
];

組件可以擁有的資產類型列表，這邊有幾個過濾器，自定義，組件的定義，后面看到后打錨點

LIFECYCLE_HOOKS

var LIFECYCLE_HOOKS = [
    "beforeCreate",
    "created",
    "beforeMount",
    "mounted",
    "beforeUpdate",
    "updated",
    "beforeDestroy",
    "destroyed",
    "activated",
    "deactivated",
    "errorCaptured",
    "serverPrefetch"
];

生命周期的鉤子。。。依舊留個錨點

config

var config = ({
    optionMergeStrategies: Object.create(null),
    //是否發出警告
    silent: false,
     //啟動時顯示生產模式提示消息
    productionTip: "development" !== "production",
    //是否啟用devtools
    devtools: "development" !== "production",
    //是否記錄性能
    performance: false,
    //用于監視程序錯誤的錯誤處理程序
    errorHandler: null,
    //用于監視程序警告的警告處理程序
    warnHandler: null,
    //忽略某些自定義元素
    ignoredElements: [],
    //v-on為自定義用戶關鍵字 
    keyCodes: Object.create(null),

    //檢查是否保留了標記，以便不能將其注冊為組件。  
    isReservedTag: no,
    //檢查是否保留了屬性，以便它不能用作組件屬性。
    isReservedAttr: no,
    //檢查標記是否為未知元素。
    isUnknownElement: no,
    //獲取元素的名稱空間
    getTagNamespace: noop,
    //解析特定平臺的實際標記名稱
    parsePlatformTagName: identity,
    //檢查屬性是否必須使用屬性(例如value)綁定
    mustUseProp: no,
    //異步執行更新。用于Vue測試Utils,如果設置為false，這將顯著降低性能
    async: true,
    //由于遺留原因而暴露
    _lifecycleHooks: LIFECYCLE_HOOKS
  });

Unicode正則表達式

var unicodeRegExp = /a-zA-Zu00B7u00C0-u00D6u00D8-u00F6u00F8-u037Du037F-u1FFFu200C-u200Du203F-u2040u2070-u218Fu2C00-u2FEFu3001-uD7FFuF900-uFDCFuFDF0-uFFFD/;

用于分析HTML標記、組件名稱和屬性路徑的Unicode字母

isReserved

function isReserved (str) {
  var c = (str + "").charCodeAt(0);
  return c === 0x24 || c === 0x5F
}

檢查字符串開頭是否為 $ 或 _  ASCII
charCodeAt() 方法可返回指定位置的字符的 Unicode 編碼。這個返回值是 0 - 65535 之間的整數。

十進制	十六進制	字符
36	0x24	$
95	0x5F	_

def

function def (obj, key, val, enumerable) {
    Object.defineProperty(obj, key, {
      value: val,
      enumerable: !!enumerable,
      writable: true,
      configurable: true
    });
  }

定義屬性，其中!!強制轉換 boolean

parsePath

  var bailRE = new RegExp(("[^" + (unicodeRegExp.source) + ".$_d]"));
  function parsePath (path) {
    if (bailRE.test(path)) {
      return
    }
    var segments = path.split(".");
    return function (obj) {
      for (var i = 0; i < segments.length; i++) {
        if (!obj) { return }
        obj = obj[segments[i]];
      }
      return obj
    }
  }

解析簡單的路徑。

首先定義了一個正則。其中source屬性返回一個字符串，該字符串包含regexp對象的源文本，并且它不包含兩邊的兩個正斜杠和任何標志。
test() 方法檢查字符串是否匹配bailRE
segments將path用split分割成字符串數組，一個循環（obj）是什么？

var hasProto = "__proto__" in {};

  var inBrowser = typeof window !== "undefined";
  var inWeex = typeof WXEnvironment !== "undefined" && !!WXEnvironment.platform;
  var weexPlatform = inWeex && WXEnvironment.platform.toLowerCase();
  var UA = inBrowser && window.navigator.userAgent.toLowerCase();
  var isIE = UA && /msie|trident/.test(UA);
  var isIE9 = UA && UA.indexOf("msie 9.0") > 0;
  var isEdge = UA && UA.indexOf("edge/") > 0;
  var isAndroid = (UA && UA.indexOf("android") > 0) || (weexPlatform === "android");
  var isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || (weexPlatform === "ios");
  var isChrome = UA && /chrome/d+/.test(UA) && !isEdge;
  var isPhantomJS = UA && /phantomjs/.test(UA);
  var isFF = UA && UA.match(/firefox/(d+)/);
  var nativeWatch = ({}).watch;

這個太基礎了，不多解釋了。如果需要可以百度一下userAgent

GPU云服務器云服務器內部窗體及數據調用數據倉庫定義及特點 vue源碼 webrtc的aec源碼解析

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

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

關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0
Vue源碼解析(一)：創建vue程序的背后發生了什么

摘要：主要大綱從方法看全局配置尋根問祖的構造函數的出生地先來一段最常見的代碼上面已經創建了一個應用程序從上面很容易就看出來是一個構造器，是用這個構造器構造出來的實例化對象，實例化的時候傳入了參數，參數中包括和上述延伸了個問題構造器是什么模樣可以主要大綱: 從initGlobalAPI方法看Vue.config全局配置尋根問祖-Vue的構造函數的出生地先來一段最常見的vue代碼dem...

nevermind 2019-08-26 13:39 評論0 收藏0
【Vue原理】Compile - 源碼版之 generate 拼接綁定的事件

摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理源碼版之拼接綁定的事件今天我們寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究...

OnlyMyRailgun 2019-08-26 10:45 評論0 收藏0