面試官:來說說vue3是怎麼處理內置的v-for、v-model等指令?

来源:https://www.cnblogs.com/heavenYJJ/p/18142035
-Advertisement-
Play Games

前言 最近有粉絲找到我,說被面試官給問懵了。 粉絲:面試官上來就問“一個vue文件是如何渲染成瀏覽器上面的真實DOM?”,當時還挺竊喜這題真簡單。就簡單說了一下先是編譯成render函數、然後根據render函數生成虛擬DOM,最後就是根據虛擬DOM生成真實DOM。按照正常套路面試官接著會問vue響 ...


前言

最近有粉絲找到我,說被面試官給問懵了。

  • 粉絲:面試官上來就問“一個vue文件是如何渲染成瀏覽器上面的真實DOM?”,當時還挺竊喜這題真簡單。就簡單說了一下先是編譯成render函數、然後根據render函數生成虛擬DOM,最後就是根據虛擬DOM生成真實DOM。按照正常套路面試官接著會問vue響應式原理和diff演算法,結果面試官不講武德問了我“那render函數又是怎麼生成的呢?”。

  • 我:之前寫過一篇 看不懂來打我,vue3如何將template編譯成render函數 文章專門講過這個吖。

  • 粉絲:我就是按照你文章回答的面試官,底層其實是調用的一個叫baseCompile的函數。在baseCompile函數中主要有三部分,執行baseParse函數將template模版轉換成模版AST抽象語法樹,接著執行transform函數處理掉vue內置的指令和語法糖就可以得到javascript AST抽象語法樹,最後就是執行generate函數遞歸遍歷javascript AST抽象語法樹進行字元串拼接就可以生成render函數。當時在想這回算是穩了,結果跟著就翻車了。

  • 粉絲:面試官接著又讓我講“transform函數內具體是如何處理vue內置的v-for、v-model等指令?”,你的文章中沒有具體講過這個吖,我只有說不知道。面試官接著又問:generate函數是如何進行字元串拼接得到的render函數呢?,我還是回答的不知道。

  • 我:我的鍋,接下來就先安排一篇文章來講講transform函數內具體是如何處理vue內置的v-for、v-model等指令?

先來看個流程圖

先來看一下我畫的transform函數執行流程圖,讓你對整個流程有個大概的印象,後面的內容看著就不費勁了。如下圖:
full-progress

從上面的流程圖可以看到transform函數的執行過程主要分為下麵這幾步:

  • transform函數中調用createTransformContext函數生成上下文對象。在上下文對象中存儲了當前正在轉換的node節點的信息,後面的traverseNodetraverseChildrennodeTransforms數組中的轉換函數、directiveTransforms對象中的轉換函數都會依賴這個上下文對象。

  • 然後執行traverseNode函數,traverseNode函數是一個典型的洋蔥模型。第一次執行traverseNode函數的時候會進入洋蔥模型的第一層,先將nodeTransforms數組中的轉換函數全部執行一遍,對第一層的node節點進行第一次轉換,將轉換函數返回的回調函數存到第一層的exitFns數組中。經過第一次轉換後v-for等指令已經被初次處理了。

  • 然後執行traverseChildren函數,在traverseChildren函數中對當前node節點的子節點執行traverseNode函數。此時就會進入洋蔥模型的第二層,和上一步一樣會將nodeTransforms數組中的轉換函數全部執行一遍,對第二層的node節點進行第一次轉換,將轉換函數返回的回調函數存到第二層的exitFns數組中。

  • 假如第二層的node節點已經沒有了子節點,洋蔥模型就會從“進入階段”變成“出去階段”。將第二層的exitFns數組中存的回調函數全部執行一遍,對node節點進行第二次轉換,然後出去到第一層的洋蔥模型。經過第二次轉換後v-for等指令已經被完全處理了。

  • 同樣將第一層中的exitFns數組中存的回調函數全部執行一遍,由於此時第二層的node節點已經全部處理完了,所以在exitFns數組中存的回調函數中就可以根據子節點的情況來處理父節點。

  • 執行nodeTransforms數組中的transformElement轉換函數,會返回一個回調函數。在回調函數中會調用buildProps函數,在buildProps函數中只有當node節點中有對應的指令才會執行directiveTransforms對象中對應的轉換函數。比如當前node節點有v-model指令,才會去執行transformModel轉換函數。v-model等指令也就被處理了。

舉個例子

還是同樣的套路,我們通過debug一個簡單的demo來帶你搞清楚transform函數內具體是如何處理vue內置的v-for、v-model等指令。demo代碼如下:

<template>
  <div>
    <input v-for="item in msgList" :key="item.id" v-model="item.value" />
    <p>標題是:{{ title }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const msgList = ref([
  {
    id: 1,
    value: "",
  },
  {
    id: 2,
    value: "",
  },
  {
    id: 3,
    value: "",
  },
]);
const title = ref("hello word");
</script>

在上面的代碼中,我們給input標簽使用了v-for和v-model指令,還渲染了一個p標簽。p標簽中的內容由foo變數、bar字元串、baz變數拼接而來的。

我們在上一篇 看不懂來打我,vue3如何將template編譯成render函數 文章中已經講過了,將template模版編譯成模版AST抽象語法樹的過程中不會處理v-for、v-model等內置指令,而是將其當做普通的props屬性處理。

比如我們這個demo,編譯成模版AST抽象語法樹後。input標簽對應的node節點中就增加了三個props屬性,name分別為for、bind、model,分別對應的是v-for、v-bind、v-model。真正處理這些vue內置指令是在transform函數中。

transform函數

本文中使用的vue版本為3.4.19transform函數在node_modules/@vue/compiler-core/dist/compiler-core.cjs.js文件中。找到transform函數的代碼,打上斷點。

從上一篇文章我們知道了transform函數是在node端執行的,所以我們需要啟動一個debug終端,才可以在node端打斷點。這裡以vscode舉例,首先我們需要打開終端,然後點擊終端中的+號旁邊的下拉箭頭,在下拉中點擊Javascript Debug Terminal就可以啟動一個debug終端。
debug-terminal

接著在debug終端中執行yarn dev(這裡是以vite舉例)。在瀏覽器中訪問 http://localhost:5173/,此時斷點就會走到transform函數中了。我們在debug終端中來看看調用transform函數時傳入的root變數,如下圖:
before-transform

從上圖中我們可以看到transform函數接收的第一個參數root變數是一個模版AST抽象語法樹,為什麼說他是模版AST抽象語法樹呢?因為這棵樹的結構和template模塊中的結構一模一樣,root變數也就是模版AST抽象語法樹是對template模塊進行描述。

根節點的children下麵只有一個div子節點,對應的就是最外層的div標簽。div節點children下麵有兩個子節點,分別對應的是input標簽和p標簽。input標簽中有三個props,分別對應input標簽上面的v-for指令、key屬性、v-model指令。從這裡我們可以看出來此時vue內置的指令還沒被處理,在執行parse函數生成模版AST抽象語法樹階段只是將其當做普通的屬性處理後,再塞到props屬性中。

p標簽中的內容由兩部分組成:<p>標題是:{{ title }}</p>。此時我們發現p標簽的children也是有兩個,分別是寫死的文本和title變數。

我們接著來看transform函數,在我們這個場景中簡化後的代碼如下:

function transform(root, options) {
  const context = createTransformContext(root, options);
  traverseNode(root, context);
}

從上面的代碼中可以看到transform函數內主要有兩部分,從名字我想你應該就能猜出他們的作用。傳入模版AST抽象語法樹options,調用createTransformContext函數生成context上下文對象。傳入模版AST抽象語法樹context上下文對象,調用traverseNode函數對樹中的node節點進行轉換。

createTransformContext函數

在講createTransformContext函數之前我們先來瞭解一下什麼是context(上下文)

什麼是上下文

上下文其實就是在某個範圍內的“全局變數”,在這個範圍內的任意地方都可以拿到這個“全局變數”。舉兩個例子:

在vue中可以通過provied向整顆組件樹提供數據,然後在樹的任意節點可以通過inject拿到提供的數據。比如:

根組件App.vue,註入上下文。

const count = ref(0)
provide('count', count)

業務組件list.vue,讀取上下文。

const count = inject('count')

在react中,我們可以使用React.createContext 函數創建一個上下文對象,然後註入到組件樹中。

const ThemeContext = React.createContext('light');

function App() {
  const [theme, setTheme] = useState('light');
  // ...
  return (
    <ThemeContext.Provider value={theme}>
      <Page />
    </ThemeContext.Provider>
  );
}

在這顆組件樹的任意層級中都能拿到上下文對象中提供的數據:

const theme = useContext(ThemeContext);

樹中的節點一般可以通過children拿到子節點,但是父節點一般不容易通過子節點拿到。在轉換的過程中我們有的時候需要拿到父節點進行一些操作,比如將當前節點替換為一個新的節點,又或者直接刪掉當前節點。

所以在這裡會維護一個context上下文對象,對象中會維護一些狀態和方法。比如當前正在轉換的節點是哪個,當前轉換的節點的父節點是哪個,當前節點在父節點中是第幾個子節點,還有replaceNoderemoveNode等方法。

上下文中的一些屬性和方法

我們將斷點走進createTransformContext函數中,簡化後的代碼如下:

function createTransformContext(
  root,
  {
    nodeTransforms = [],
    directiveTransforms = {},
    // ...省略
  }
) {
  const context = {
    // 所有的node節點都會將nodeTransforms數組中的所有的轉換函數全部執行一遍
    nodeTransforms,
    // 只執行node節點的指令在directiveTransforms對象中對應的轉換函數
    directiveTransforms,
    // 需要轉換的AST抽象語法樹
    root,
    // 轉換過程中組件內註冊的組件
    components: new Set(),
    // 轉換過程中組件內註冊的指令
    directives: new Set(),
    // 當前正在轉換節點的父節點,預設轉換的是根節點。根節點沒有父節點,所以為null。
    parent: null,
    // 當前正在轉換的節點,預設為根節點
    currentNode: root,
    // 當前轉換節點在父節點中的index位置
    childIndex: 0,
    replaceNode(node) {
      // 將當前節點替換為新節點
    },
    removeNode(node) {
      // 刪除當前節點
    },
    // ...省略
  };
  return context;
}

從上面的代碼中可以看到createTransformContext中的代碼其實很簡單,第一個參數為需要轉換的模版AST抽象語法樹,第二個參數對傳入的options進行解構,拿到options.nodeTransforms數組和options.directiveTransforms對象。

nodeTransforms數組中存了一堆轉換函數,在樹的遞歸遍歷過程中會將nodeTransforms數組中的轉換函數全部執行一遍。directiveTransforms對象中也存了一堆轉換函數,和nodeTransforms數組的區別是,只會執行node節點的指令在directiveTransforms對象中對應的轉換函數。比如node節點中只有v-model指令,那就只會執行directiveTransforms對象中的transformModel轉換函數。這裡將拿到的nodeTransforms數組和directiveTransforms對象都存到了context上下文中。

context上下文中存了一些狀態屬性:

  • root:需要轉換的AST抽象語法樹。

  • components:轉換過程中組件內註冊的組件。

  • directives:轉換過程中組件內註冊的指令。

  • parent:當前正在轉換節點的父節點,預設轉換的是根節點。根節點沒有父節點,所以為null。

  • currentNode:當前正在轉換的節點,預設為根節點。

  • childIndex:當前轉換節點在父節點中的index位置。

context上下文中存了一些方法:

  • replaceNode:將當前節點替換為新節點。

  • removeNode:刪除當前節點。

traverseNode函數

接著將斷點走進traverseNode函數中,在我們這個場景中簡化後的代碼如下:

function traverseNode(node, context) {
  context.currentNode = node;
  const { nodeTransforms } = context;
  const exitFns = [];
  for (let i = 0; i < nodeTransforms.length; i++) {
    const onExit = nodeTransforms[i](node, context);
    if (onExit) {
      if (isArray(onExit)) {
        exitFns.push(...onExit);
      } else {
        exitFns.push(onExit);
      }
    }
    if (!context.currentNode) {
      return;
    } else {
      node = context.currentNode;
    }
  }

  traverseChildren(node, context);

  context.currentNode = node;
  let i = exitFns.length;
  while (i--) {
    exitFns[i]();
  }
}

從上面的代碼中我們可以看到traverseNode函數接收兩個參數,第一個參數為當前需要處理的node節點,第一次調用時傳的就是樹的根節點。第二個參數是上下文對象。

我們再來看traverseNode函數的內容,內容主要分為三部分。分別是:

  • nodeTransforms數組內的轉換函數全部執行一遍,如果轉換函數的執行結果是一個回調函數,那麼就將回調函數push到exitFns數組中。

  • 調用traverseChildren函數處理子節點。

  • exitFns數組中存的回調函數依次從末尾取出來挨個執行。

traverseChildren函數

我們先來看看第二部分的traverseChildren函數,代碼很簡單,簡化後的代碼如下:

function traverseChildren(parent, context) {
  let i = 0;
  for (; i < parent.children.length; i++) {
    const child = parent.children[i];
    context.parent = parent;
    context.childIndex = i;
    traverseNode(child, context);
  }
}

traverseChildren函數中會去遍歷當前節點的子節點,在遍歷過程中會將context.parent更新為當前的節點,並且將context.childIndex也更新為當前子節點所在的位置。然後再調用traverseNode函數處理當前的子節點。

所以在traverseNode函數執行的過程中,context.parent總是指向當前節點的父節點,context.childIndex總是指向當前節點在父節點中的index位置。如下圖:

traverseChildren

進入時執行的轉換函數

我們現在回過頭來看第一部分的代碼,代碼如下:

function traverseNode(node, context) {
  context.currentNode = node;
  const { nodeTransforms } = context;
  const exitFns = [];
  for (let i = 0; i < nodeTransforms.length; i++) {
    const onExit = nodeTransforms[i](node, context);
    if (onExit) {
      if (isArray(onExit)) {
        exitFns.push(...onExit);
      } else {
        exitFns.push(onExit);
      }
    }
    if (!context.currentNode) {
      return;
    } else {
      node = context.currentNode;
    }
  }
  // ...省略
}

首先會將context.currentNode更新為當前節點,然後從context上下文中拿到由轉換函數組成的nodeTransforms數組。

看不懂來打我,vue3如何將template編譯成render函數 文章中我們已經講過了nodeTransforms數組中主要存了下麵這些轉換函數,代碼如下:

const nodeTransforms = [
  transformOnce,
  transformIf,
  transformMemo,
  transformFor,
  transformFilter,
  trackVForSlotScopes,
  transformExpression
  transformSlotOutlet,
  transformElement,
  trackSlotScopes,
  transformText
]

很明顯我們這裡的v-for指令就會被nodeTransforms數組中的transformFor轉換函數處理。

看到這裡有的小伙伴就會問了,怎麼沒有在nodeTransforms數組中看到處理v-model指令的轉換函數呢?處理v-model指令的轉換函數是在directiveTransforms對象中。在directiveTransforms對象中主要存了下麵這些轉換函數:

const directiveTransforms = {
  bind: transformBind,
  cloak: compilerCore.noopDirectiveTransform,
  html: transformVHtml,
  text: transformVText,
  model: transformModel,
  on: transformOn,
  show: transformShow
}

nodeTransformsdirectiveTransforms的區別是,在遞歸遍歷轉換node節點時,每次都會將nodeTransforms數組中的所有轉換函數都全部執行一遍。比如當前轉換的node節點中沒有使用v-if指令,但是在轉換當前node節點時還是會執行nodeTransforms數組中的transformIf轉換函數。

directiveTransforms是在遞歸遍歷轉換node節點時,只會執行node節點中存在的指令對應的轉換函數。比如當前轉換的node節點中有使用v-model指令,所以就會執行directiveTransforms對象中的transformModel轉換函數。由於node節點中沒有使用v-html指令,所以就不會執行directiveTransforms對象中的transformVHtml轉換函數。

我們前面講過了context上下文中存了很多屬性和方法。包括當前節點的父節點是誰,當前節點在父節點中的index位置,替換當前節點的方法,刪除當前節點的方法。這樣在轉換函數中就可以通過context上下文對當前節點進行各種操作了。

將轉換函數的返回值賦值給onExit變數,如果onExit不為空,說明轉換函數的返回值是一個回調函數或者由回調函數組成的數組。將這些回調函數push進exitFns數組中,在退出時會將這些回調函數倒序全部執行一遍。

執行完回調函數後會判斷上下文中的currentNode是否為空,如果為空那麼就return掉整個traverseNode函數,後面的traverseChildren等函數都不會執行了。如果context.currentNode不為空,那麼就將本地的node變數更新成context上下文中的currentNode

為什麼需要判斷context上下文中的currentNode呢?原因是經過轉換函數的處理後當前節點可能會被刪除了,也有可能會被替換成一個新的節點,所以在每次執行完轉換函數後都會更新本地的node變數,保證在下一個的轉換函數執行時傳入的是最新的node節點。

退出時執行的轉換函數回調

我們接著來看traverseNode函數中最後一部分,代碼如下:

function traverseNode(node, context) {
  // ...省略
  context.currentNode = node;
  let i = exitFns.length;
  while (i--) {
    exitFns[i]();
  }
}

由於這段代碼是在執行完traverseChildren函數再執行的,前面已經講過了在traverseChildren函數中會將當前節點的子節點全部都處理了,所以當代碼執行到這裡時所有的子節點都已經處理完了。所以在轉換函數返回的回調函數中我們可以根據當前節點轉換後的子節點情況來決定如何處理當前節點。

在處理子節點的時候我們會將context.currentNode更新為子節點,所以在處理完子節點後需要將context.currentNode更新為當前節點。這樣在執行轉換函數返回的回調函數時,context.currentNode始終就是指向的是當前的node節點。

請註意這裡是倒序取出exitFns數組中存的回調函數,在進入時會按照順序去執行nodeTransforms數組中的轉換函數。在退出時會倒序去執行存下來的回調函數,比如在nodeTransforms數組中transformIf函數排在transformFor函數前面。transformIf用於處理v-if指令,transformFor用於處理v-for指令。在進入時transformIf函數會比transformFor函數先執行,所以在組件上面同時使用v-if和v-for指令,會是v-if指令先生效。在退出階段時transformIf函數會比transformFor函數後執行,所以在transformIf回調函數中可以根據transformFor回調函數的執行結果來決定如何處理當前的node節點。

traverseNode函數其實就是典型的洋蔥模型,依次從父組件到子組件挨著調用nodeTransforms數組中所有的轉換函數,然後從子組件到父組件倒序執行nodeTransforms數組中所有的轉換函數返回的回調函數。traverseNode函數內的設計很高明,如果你還沒反應過來,彆著急我接下來會講他高明在哪裡。

洋蔥模型traverseNode函數

我們先來看看什麼是洋蔥模型,如下圖:
onion

洋蔥模型就是:從外面一層層的進去,再一層層的從裡面出來。

第一次進入traverseNode函數的時候會進入洋蔥模型的第1層,先依次將nodeTransforms數組中所有的轉換函數全部執行一遍,對當前的node節點進行第一次轉換。如果轉換函數的返回值是回調函數或者回調函數組成的數組,那就將這些回調函數依次push到第1層定義的exitFns數組中。

然後再去處理當前節點的子節點,處理子節點的traverseChildren函數其實也是在調用traverseNode函數,此時已經進入了洋蔥模型的第2層。同理在第2層也會將nodeTransforms數組中所有的轉換函數全部執行一遍,對第2層的node節點進行第一次轉換,並且將返回的回調函數依次push到第2層定義的exitFns數組中。

同樣的如果第2層節點也有子節點,那麼就會進入洋蔥模型的第3層。在第3層也會將nodeTransforms數組中所有的轉換函數全部執行一遍,對第3層的node節點進行第一次轉換,並且將返回的回調函數依次push到第3層定義的exitFns數組中。

請註意此時的第3層已經沒有子節點了,那麼現在就要從一層層的進去,變成一層層的出去。首先會將第3層exitFns數組中存的回調函數依次從末尾開始全部執行一遍,會對第3層的node節點進行第二次轉換,此時第3層中的node節點已經被全部轉換完了。

由於第3層的node節點已經被全部轉換完了,所以會出去到洋蔥模型的第2層。同樣將第2層exitFns數組中存的回調函數依次從末尾開始全部執行一遍,會對第2層的node節點進行第二次轉換。值得一提的是由於第3層的node節點也就是第2層的children節點已經被完全轉換了,所以在執行第2層轉換函數返回的回調函數時就可以根據子節點的情況來處理父節點。

同理將第2層的node節點全部轉換完了後,會出去到洋蔥模型的第1層。將第1層exitFns數組中存的回調函數依次從末尾開始全部執行一遍,會對第1層的node節點進行第二次轉換。

當出去階段的第1層全部處理完後了,transform函數內處理內置的v-for等指令也就處理完了。執行完transform函數後,描述template解構的模版AST抽象語法樹也被處理成了描述render函數結構的javascript AST抽象語法樹。後續只需要執行generate函數,進行普通的字元串拼接就可以得到render函數。

繼續debug

搞清楚了traverseNode函數,接著來debug看看demo中的v-for指令和v-model指令是如何被處理的。

  • v-for指令對應的是transformFor轉換函數。

  • v-model指令對應的是transformModel轉換函數。

transformFor轉換函數

通過前面我們知道了用於處理v-for指令的transformFor轉換函數是在nodeTransforms數組中,每次處理node節點都會執行。我們給transformFor轉換函數打3個斷點,分別是:

  • 進入transformFor轉換函數之前。

  • 調用transformFor轉換函數,第1次對node節點進行轉換之後。

  • 調用transformFor轉換函數返回的回調函數,第2次對node節點進行轉換之後。

我們將代碼走到第1個斷點,看看執行transformFor轉換函數之前input標簽的node節點是什麼樣的,如下圖:
transformFor1

從上圖中可以看到input標簽的node節點中還是有一個v-for的props屬性,說明此時v-for指令還沒被處理。

我們接著將代碼走到第2個斷點,看看調用transformFor轉換函數第1次對node節點進行轉換之後是什麼樣的,如下圖:
transformFor2

從上圖中可以看到原本的input的node節點已經被替換成了一個新的node節點,新的node節點的children才是原來的node節點。並且input節點props屬性中的v-for指令也被消費了。新節點的source.content里存的是v-for="item in msgList"中的msgList變數。新節點的valueAlias.content里存的是v-for="item in msgList"中的item。請註意此時arguments數組中只有一個欄位,存的是msgList變數。

我們接著將代碼走到第3個斷點,看看調用transformFor轉換函數返回的回調函數,第2次對node節點進行轉換之後是什麼樣的,如下圖:
transformFor3

從上圖可以看到arguments數組中多了一個欄位,input標簽現在是當前節點的子節點。按照我們前面講的洋蔥模型,input子節點現在已經被轉換完成了。所以多的這個欄位就是input標簽經過transform函數轉換後的node節點,將轉換後的input子節點存到父節點上面,後面生成render函數時會用。

transformModel轉換函數

通過前面我們知道了用於處理v-model指令的transformModel轉換函數是在directiveTransforms對象中,只有當node節點中有對應的指令才會執行對應的轉換函數。我們這裡input上面有v-model指令,所以就會執行transformModel轉換函數。

我們在前面的 看不懂來打我,vue3如何將template編譯成render函數 文章中已經講過了處理v-model指令是調用的@vue/compiler-dom包的transformModel函數,很容易就可以找到@vue/compiler-dom包的transformModel函數,然後打一個斷點,讓斷點走進transformModel函數中,如下圖:
transformModel

從上面的圖中我們可以看到在@vue/compiler-dom包的transformModel函數中會調用@vue/compiler-core包的transformModel函數,拿到返回的baseResult對象後再一些其他操作後直接return baseResult

從左邊的call stack調用棧中我們可以看到transformModel函數是由一個buildProps函數調用的,buildProps函數是由postTransformElement函數調用的。而postTransformElement函數則是transformElement轉換函數返回的回調函數,transformElement轉換函數是在nodeTransforms數組中。

所以directiveTransforms對象中的轉換函數調用其實是由nodeTransforms數組中的transformElement轉換函數調用的。如下圖:
directiveTransforms

看名字你應該猜到了buildProps函數的作用是生成props屬性的。點擊Step Out將斷點跳出transformModel函數,走進buildProps函數中,可以看到buildProps函數中調用transformModel函數的代碼如下圖:
buildProps

從上圖中可以看到執行directiveTransforms對象中的轉換函數不僅可以對節點進行轉換,還會返回一個props數組。比如我們這裡處理的是v-model指令,返回的props數組就是由v-model指令編譯而來的props屬性,這就是所謂的v-model語法糖。

看到這裡有的小伙伴會疑惑了v-model指令不是會生成modelValueonUpdate:modelValue兩個屬性,為什麼這裡只有一個onUpdate:modelValue屬性呢?

答案是只有給自定義組件上面使用v-model指令才會生成modelValueonUpdate:modelValue兩個屬性,對於這種原生input標簽是不需要生成modelValue屬性的,而且input標簽本身是不接收名為modelValue屬性,接收的是value屬性。

總結

現在我們再來看看最開始講的流程圖,我想你應該已經能將整個流程串起來了。如下圖:
full-progress

transform函數的執行過程主要分為下麵這幾步:

  • transform函數中調用createTransformContext函數生成上下文對象。在上下文對象中存儲了當前正在轉換的node節點的信息,後面的traverseNodetraverseChildrennodeTransforms數組中的轉換函數、directiveTransforms對象中的轉換函數都會依賴這個上下文對象。

  • 然後執行traverseNode函數,traverseNode函數是一個典型的洋蔥模型。第一次執行traverseNode函數的時候會進入洋蔥模型的第一層,先將nodeTransforms數組中的轉換函數全部執行一遍,對第一層的node節點進行第一次轉換,將轉換函數返回的回調函數存到第一層的exitFns數組中。經過第一次轉換後v-for等指令已經被初次處理了。

  • 然後執行traverseChildren函數,在traverseChildren函數中對當前node節點的子節點執行traverseNode函數。此時就會進入洋蔥模型的第二層,和上一步一樣會將nodeTransforms數組中的轉換函數全部執行一遍,對第二層的node節點進行第一次轉換,將轉換函數返回的回調函數存到第二層的exitFns數組中。

  • 假如第二層的node節點已經沒有了子節點,洋蔥模型就會從“進入階段”變成“出去階段”。將第二層的exitFns數組中存的回調函數全部執行一遍,對node節點進行第二次轉換,然後出去到第一層的洋蔥模型。經過第二次轉換後v-for等指令已經被完全處理了。

  • 同樣將第一層中的exitFns數組中存的回調函數全部執行一遍,由於此時第二層的node節點已經全部處理完了,所以在exitFns數組中存的回調函數中就可以根據子節點的情況來處理父節點。

  • 執行nodeTransforms數組中的transformElement轉換函數,會返回一個回調函數。在回調函數中會調用buildProps函數,在buildProps函數中只有當node節點中有對應的指令才會執行directiveTransforms對象中對應的轉換函數。比如當前node節點有v-model指令,才會去執行transformModel轉換函數。v-model等指令也就被處理了。

關註公眾號:前端歐陽,解鎖我更多vue乾貨文章。還可以加我微信,私信我想看哪些vue原理文章,我會根據大家的反饋進行創作。
qrcode


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 介紹 圖片預覽在應用開發中是一種常見場景,在諸如QQ、微信、微博等應用中均被廣泛使用。本模塊基於Image組件實現了簡單的圖片預覽功能。 使用說明: 雙指捏合縮放圖片大小 雙擊圖片進行圖片的大小切換 圖片在放大模式下,滑動圖片查看圖片的對應位置 效果圖預覽 實現思路 image組件的objectFi ...
  • 有的時候,我們可能需要多次執行同一塊代碼。一般情況下,語句是按順序執行的:函數中的第一個語句先執行,接著是第二個語句,依此類推。 編程語言提供了更為複雜執行路徑的多種控制結構。 迴圈語句允許我們多次執行一個語句或語句組,下麵是大多數編程語言中迴圈語句的流程圖: for 迴圈 TypeScript ...
  • 一、Shape Shape組件是用於創建2D形狀和粒子效果的組件。它可以創建包括圓形、正方形、三角形和多邊形等基本形狀,同時還可以自定義形狀。Shape組件創建各種不同的效果,例如火花、煙霧、雨滴等。在使用Shape組件時,可以通過編輯頂點、路徑和大小等屬性來控制形狀的外觀和行為。 1.創建 ...
  • 介紹 本示例主要介紹在TaskPool子線程中使用 dlopen 預載入 so 庫並使用句柄調用庫函數的方法,以及在Native中使用 pread 系統函數讀取Rawfile文件的部分文本內容,並添加 HiLog 日誌。 效果圖預覽 使用說明 rawfile路徑下存在一個有內容的文本文件rawfil ...
  • 介紹 MpChart是一個包含各種類型圖表的圖表庫,主要用於業務數據彙總,例如銷售數據走勢圖,股價走勢圖等場景中使用,方便開發者快速實現圖表UI。本示例主要介紹如何使用三方庫MpChart實現柱狀圖UI效果。如堆疊數據類型顯示,Y軸是否顯示,左Y軸位置,右Y軸位置,是否顯示X軸,是否繪製背景色,是否 ...
  • 條件語句用於基於不同的條件來執行不同的動作。 TypeScript 條件語句是通過一條或多條語句的執行結果(True 或 False)來決定執行的代碼塊。 可以通過下圖來簡單瞭解條件語句的執行過程: 條件語句 通常在寫代碼時,您總是需要為不同的決定來執行不同的動作。您可以在代碼中使用條件語句來完成該 ...
  • 一、Image 在HarmonyOS中,Image組件是用於顯示圖像文件的UI組件。它可以顯示本地圖像文件或遠程URL地址的圖像文件。Image組件的實現方式比較簡單,只需提供圖像文件路徑或URL地址即可。 Image通過調用介面來創建,介面調用形式如下: Image(src: string | ...
  • 介紹 本示例介紹用過使用ListItem組件屬性swipeAction實現列表左滑編輯效果的功能。 該場景多用於待辦事項管理、文件管理、備忘錄的記錄管理等。 效果圖預覽 使用說明: 點擊添加按鈕,選擇需要添加的待辦事項。 長按待辦事項,點擊刪除後,被勾選待辦事項被刪除。 左滑單個待辦事項,點擊刪除按 ...
一周排行
    -Advertisement-
    Play Games
  • 通過WPF的按鈕、文本輸入框實現了一個簡單的SpinBox數字輸入用戶組件並可以通過數據綁定數值和步長。本文中介紹了通過Xaml代碼實現自定義組件的佈局,依賴屬性的定義和使用等知識點。 ...
  • 以前,我看到一個朋友在對一個系統做初始化的時候,通過一組魔幻般的按鍵,調出來一個隱藏的系統設置界面,這個界面在常規的菜單或者工具欄是看不到的,因為它是一個後臺設置的關鍵界面,不公開,同時避免常規用戶的誤操作,它是作為一個超級管理員的入口功能,這個是很不錯的思路。其實Winform做這樣的處理也是很容... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他的程式每次關閉時就會自動崩潰,一直找不到原因讓我幫忙看一下怎麼回事,這位朋友應該是第二次找我了,分析了下 dump 還是挺經典的,拿出來給大家分享一下吧。 二:WinDbg 分析 1. 為什麼會崩潰 找崩潰原因比較簡單,用 !analyze -v 命 ...
  • 在一些報表模塊中,需要我們根據用戶操作的名稱,來動態根據人員姓名,更新報表的簽名圖片,也就是電子手寫簽名效果,本篇隨筆介紹一下使用FastReport報表動態更新人員簽名圖片。 ...
  • 最新內容優先發佈於個人博客:小虎技術分享站,隨後逐步搬運到博客園。 創作不易,如果覺得有用請在Github上為博主點亮一顆小星星吧! 博主開始學習編程於11年前,年少時還只會使用cin 和cout ,給單片機點點燈。那時候,類似async/await 和future/promise 模型的認知還不是 ...
  • 之前在阿裡雲ECS 99元/年的活動實例上搭建了一個測試用的MINIO服務,以前都是直接當基礎設施來使用的,這次準備自己學一下S3相容API相關的對象存儲開發,因此有了這個小工具。目前僅包含上傳功能,後續計劃開發一個類似圖床的對象存儲應用。 ...
  • 目錄簡介快速入門安裝 NuGet 包實體類User資料庫類DbFactory增刪改查InsertSelectUpdateDelete總結 簡介 NPoco 是 PetaPoco 的一個分支,具有一些額外的功能,截至現在 github 星數 839。NPoco 中文資料沒多少,我是被博客園群友推薦的, ...
  • 前言 前面使用 Admin.Core 的代碼生成器生成了通用代碼生成器的基礎模塊 分組,模板,項目,項目模型,項目欄位的基礎功能,本篇繼續完善,實現最核心的模板生成功能,並提供生成預覽及代碼文件壓縮下載 準備 首先清楚幾個模塊的關係,如何使用,簡單畫一個流程圖 前面完成了基礎的模板組,模板管理,項目 ...
  • 假設需要實現一個圖標和文本結合的按鈕 ,普通做法是 直接重寫該按鈕的模板; 如果想作為通用的呢? 兩種做法: 附加屬性 自定義控制項 推薦使用附加屬性的形式 第一種:附加屬性 創建Button的附加屬性 ButtonExtensions 1 public static class ButtonExte ...
  • 在C#中,委托是一種引用類型的數據類型,允許我們封裝方法的引用。通過使用委托,我們可以將方法作為參數傳遞給其他方法,或者將多個方法組合在一起,從而實現更靈活的編程模式。委托類似於函數指針,但提供了類型安全和垃圾回收等現代語言特性。 基本概念 定義委托 定義委托需要指定它所代表的方法的原型,包括返回類 ...