欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue AST源碼解析第一篇

 更新時間:2017年07月19日 14:05:42   作者:QH-Jimmy  
這篇文章主要為大家詳細(xì)介紹了Vue AST源碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下

講完了數(shù)據(jù)劫持原理和一堆初始化,現(xiàn)在是DOM相關(guān)的代碼了。

上一節(jié)是從這個函數(shù)開始的:

// Line-3924
 Vue.prototype._init = function(options) {
  // 大量初始化
  // ...
  // Go!
  if (vm.$options.el) {
   vm.$mount(vm.$options.el);
  }
 };

弄完data屬性的數(shù)據(jù)綁定后,開始處理el屬性,也就是掛載的DOM節(jié)點,這里的vm.$options.el也就是傳進去的'#app'字符串。

有一個值得注意的點是,源碼中有2個$mount函數(shù)都是Vue$3的原型函數(shù),其中一個標(biāo)記了注釋public mount method,在7531行,另外一個在9553行。打斷點進入的是后面,因為定義的晚,覆蓋了前面的函數(shù)。

// Line-7531
 // public mount method
 Vue$3.prototype.$mount = function(el,hydrating) {
  el = el && inBrowser ? query(el) : undefined;
  return mountComponent(this, el, hydrating)
 };

 // Line-9552
 var mount = Vue$3.prototype.$mount;
 Vue$3.prototype.$mount = function(
  el,
  hydrating
 ) {
  // ...很多代碼
  return mount.call(this, el, hydrating)
 };

現(xiàn)在進入后面的$mount函數(shù)看看內(nèi)部結(jié)構(gòu):

// Line-9552
 var mount = Vue$3.prototype.$mount;
 Vue$3.prototype.$mount = function(el,hydrating) {
  // 將el格式化為DOM節(jié)點
  el = el && query(el);
  // 判斷是否掛載到body或者h(yuǎn)tml標(biāo)簽上
  if (el === document.body || el === document.documentElement) {
   "development" !== 'production' && warn(
    "Do not mount Vue to <html> or <body> - mount to normal elements instead."
   );
   return this
  }

  var options = this.$options;
  // 處理template/el 轉(zhuǎn)換為渲染函數(shù)
  if (!options.render) {
   // ...非常多代碼
  }
  return mount.call(this, el, hydrating)
 };

代碼前半段首先將el轉(zhuǎn)換為DOM節(jié)點,并判斷是否掛載到body或者h(yuǎn)tml標(biāo)簽,看看簡單的query函數(shù):

 // Line-4583
 function query(el) {
  // 如果是字符串就調(diào)用querySelector
  if (typeof el === 'string') {
   var selected = document.querySelector(el);
   if (!selected) {
    "development" !== 'production' && warn(
     'Cannot find element: ' + el
    );
    // 找不到就返回一個div
    return document.createElement('div')
   }
   return selected
  }
  // 不是字符串就默認(rèn)傳進來的是DOM節(jié)點 
  else {
   return el
  }
 }

函數(shù)比較簡單,值得注意的幾個點是,由于調(diào)用的是querySelector方法,所以可以傳標(biāo)簽名、類名、C3新選擇器等,都會返回查詢到的第一個。當(dāng)然,總是傳一個ID或者確定的DOM節(jié)點才是正確用法。

下面看接下來的代碼:

// Line-9552
 var mount = Vue$3.prototype.$mount;
 Vue$3.prototype.$mount = function(el,hydrating) {
  // ...el轉(zhuǎn)換為DOM節(jié)點
  // ...
  // 沒有render屬性 進入代碼段
  if (!options.render) {
   var template = options.template;
   // 沒有template 跳
   if (template) {
    if (typeof template === 'string') {
     if (template.charAt(0) === '#') {
      template = idToTemplate(template);
      /* istanbul ignore if */
      if ("development" !== 'production' && !template) {
       warn(
        ("Template element not found or is empty: " + (options.template)),
        this
       );
      }
     }
    } else if (template.nodeType) {
     template = template.innerHTML;
    } else {
     {
      warn('invalid template option:' + template, this);
     }
     return this
    }
   }
   // 有el 獲取字符串化的DOM樹
   else if (el) {
    template = getOuterHTML(el);
   }
   if (template) {
    // ...小段代碼
   }
  }
  return mount.call(this, el, hydrating)
 };

由于沒有template屬性,會直接進入第二個判斷條件,調(diào)用getOuterHTML來初始化template變量,函數(shù)比較簡單, 來看看:

// Line-9623
 function getOuterHTML(el) {
  if (el.outerHTML) {
   return el.outerHTML
  }
  // 兼容IE中的SVG
  else {
   var container = document.createElement('div');
   container.appendChild(el.cloneNode(true));
   return container.innerHTML
  }
 }

簡單來講,就是調(diào)用outerHTML返回DOM樹的字符串形式,看圖就明白了:

下面看最后一段代碼:

 // Line-9552
 var mount = Vue$3.prototype.$mount;
 Vue$3.prototype.$mount = function(el,hydrating) {
  // ...el轉(zhuǎn)換為DOM節(jié)點
  // ...
  // 沒有render屬性 進入代碼段
  if (!options.render) {
   // ...處理template
   // ...
   if (template) {
    // 編譯開始
    if ("development" !== 'production' && config.performance && mark) {
     mark('compile');
    }

    // 將DOM樹字符串編譯為函數(shù)
    var ref = compileToFunctions(template, {
     shouldDecodeNewlines: shouldDecodeNewlines,
     delimiters: options.delimiters
    }, this);
    // options添加屬性
    var render = ref.render;
    var staticRenderFns = ref.staticRenderFns;
    options.render = render;
    options.staticRenderFns = staticRenderFns;

    // 編譯結(jié)束
    if ("development" !== 'production' && config.performance && mark) {
     mark('compile end');
     measure(((this._name) + " compile"), 'compile', 'compile end');
    }
   }
  }
  return mount.call(this, el, hydrating)
 };

忽略2段dev模式下的提示代碼,剩下的代碼做了3件事,調(diào)用compileToFunctions函數(shù)肢解DOM樹字符串,將返回的對象屬性添加到options上,再次調(diào)用mount函數(shù)。

首先看一下compileToFunctions函數(shù),該函數(shù)接受3個參數(shù),分別為字符串、配置對象、當(dāng)前vue實例。

由于函數(shù)比較長,而且部分是錯誤判斷,簡化后如下:

// Line-9326
 function compileToFunctions(template,options,vm) {
  // 獲取配置參數(shù)
  options = options || {};

  // ...

  var key = options.delimiters ?
   String(options.delimiters) + template :
   template;
  // 檢測緩存
  if (functionCompileCache[key]) {
   return functionCompileCache[key]
  }

  // 1
  var compiled = compile(template, options);

  // ...

  // 2
  var res = {};
  var fnGenErrors = [];
  res.render = makeFunction(compiled.render, fnGenErrors);
  var l = compiled.staticRenderFns.length;
  res.staticRenderFns = new Array(l);
  for (var i = 0; i < l; i++) {
   res.staticRenderFns[i] = makeFunction(compiled.staticRenderFns[i], fnGenErrors);
  }

  // ...

  // 3
  return (functionCompileCache[key] = res)
 }

可以看到,這個函數(shù)流程可以分為4步,獲取參數(shù) => 調(diào)用compile函數(shù)進行編譯 => 將得到的compiled轉(zhuǎn)換為函數(shù) => 返回并緩存。

 第一節(jié)現(xiàn)在這樣吧。一張圖總結(jié)下:

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vite搭建vue2項目的實戰(zhàn)過程

    vite搭建vue2項目的實戰(zhàn)過程

    自從體驗了一下vite之后,真的太快了,然而對vue3還不是很熟練,就想著在vue2的項目中使用以下vite,下面這篇文章主要給大家介紹了關(guān)于vite搭建vue2項目的相關(guān)資料,需要的朋友可以參考下
    2022-11-11
  • vue實現(xiàn)PC端錄音功能的實例代碼

    vue實現(xiàn)PC端錄音功能的實例代碼

    這篇文章主要介紹了vue實現(xiàn)PC端錄音功能的實例代碼,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-06-06
  • vue-cli如何快速構(gòu)建vue項目

    vue-cli如何快速構(gòu)建vue項目

    本篇文章主要介紹了vue-cli如何快速構(gòu)建vue項目,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-04-04
  • electron-vite新一代electron開發(fā)構(gòu)建工具

    electron-vite新一代electron開發(fā)構(gòu)建工具

    這篇文章主要介紹了electron-vite新一代electron開發(fā)構(gòu)建工具,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • Vue Router 實現(xiàn)動態(tài)路由和常見問題及解決方法

    Vue Router 實現(xiàn)動態(tài)路由和常見問題及解決方法

    動態(tài)路由不同于常見的靜態(tài)路由,可以根據(jù)不同的「因素」而改變站點路由列表。這篇文章主要介紹了Vue Router 實現(xiàn)動態(tài)路由和常見問題解決方案,需要的朋友可以參考下
    2020-03-03
  • Vue實現(xiàn)批量注冊全局組件的示例代碼

    Vue實現(xiàn)批量注冊全局組件的示例代碼

    在項目開發(fā)中,我們經(jīng)常會封裝一些全局組件,然后在入口文件中統(tǒng)一導(dǎo)入,所以本文主要為大家詳細(xì)介紹了Vue如何批量注冊全局組件,感興趣的小伙伴可以了解下
    2024-01-01
  • Vue獲取DOM元素樣式和樣式更改示例

    Vue獲取DOM元素樣式和樣式更改示例

    本篇文章主要介紹了Vue獲取DOM元素樣式和樣式更改示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-03-03
  • Vue 利用指令實現(xiàn)禁止反復(fù)發(fā)送請求的兩種方法

    Vue 利用指令實現(xiàn)禁止反復(fù)發(fā)送請求的兩種方法

    這篇文章主要介紹了Vue 利用指令實現(xiàn)禁止反復(fù)發(fā)送請求的兩種方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-09-09
  • vue實現(xiàn)行列轉(zhuǎn)換的一種方法

    vue實現(xiàn)行列轉(zhuǎn)換的一種方法

    這篇文章主要介紹了vue實現(xiàn)行列轉(zhuǎn)換的一種方法,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-08-08
  • vue3實現(xiàn)旋轉(zhuǎn)圖片驗證

    vue3實現(xiàn)旋轉(zhuǎn)圖片驗證

    這篇文章主要為大家詳細(xì)介紹了vue3實現(xiàn)旋轉(zhuǎn)圖片驗證,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04

最新評論