快捷導(dǎo)航

Vue3屬性綁定方法解析

更新時(shí)間：2022年09月25日 09:54:33 作者：Web能力中心團(tuán)隊(duì)???????

這篇文章主要介紹了Vue3屬性綁定方法解析，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下

前言：

這篇文章來(lái)自我們團(tuán)隊(duì)的田鑫雨同學(xué)，強(qiáng)勁的“后浪”。不論使用已有框架，還是自實(shí)現(xiàn)框架，數(shù)據(jù)綁定都是一個(gè)熱點(diǎn)話題，來(lái)看看他對(duì)Vue3數(shù)據(jù)綁定方式的分析

Vue3 通常使用 v-bind 綁定數(shù)據(jù)到子元素上，對(duì)于一個(gè)元素接收數(shù)據(jù)的方式有兩種：通過(guò)property或通過(guò)attribute，本文通過(guò)分析源碼得到結(jié)論：Vue會(huì)通過(guò)判斷元素實(shí)例el上是否有需要綁定的property，如果有就把數(shù)據(jù)傳給子元素的property，否則傳給attribute。當(dāng)然還有會(huì)一些特殊處理，我們這里只討論一般情況。

首先說(shuō)結(jié)論，對(duì)于一般的屬性，Vue會(huì)判斷元素el上是否有對(duì)應(yīng)的property屬性，如果有就賦值給對(duì)應(yīng)的property，否則添加到attribute上。然后Vue會(huì)對(duì)一些屬性做特殊處理直接綁定到attribute，此外對(duì)input/textarea/select元素也會(huì)有特殊處理。

Vue3.2版本還提供了:xxx.prop 和 :xxx.attr 寫(xiě)法指定綁定數(shù)據(jù)到property或attribute上

直接從源碼入手。

在Vue初始化過(guò)程中，Vue會(huì)將<template>解析并構(gòu)造成vdom，收集其中的數(shù)據(jù)綁定放在props對(duì)象中。到了mount階段Vue會(huì)根據(jù)vdom創(chuàng)建為真實(shí)DOM，然后放到頁(yè)面中。

創(chuàng)建過(guò)程大致為遍歷vdom中的vnode節(jié)點(diǎn)，執(zhí)行mountElement()，關(guān)鍵代碼如下，根據(jù)vnode創(chuàng)建真實(shí)el元素，進(jìn)行數(shù)據(jù)綁定和事件綁定，然后把el元素插入到父容器中，最后完成頁(yè)面的加載。

const mountElement = (vnode, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized) => {
  let el;
  // ...
  const { type, props, shapeFlag, transition, patchFlag, dirs } = vnode;
  {
      el = vnode.el = hostCreateElement(vnode.type, isSVG, props && props.is, props);
      // ...
      // props
      if (props) {
          for (const key in props) {
              if (key !== 'value' && !isReservedProp(key)) {
                  hostPatchProp(el, key, null, props[key], isSVG, vnode.children, parentComponent, parentSuspense, unmountChildren);
              }
          }
          // ...
      }
      // ...
  }
  // ...
  hostInsert(el, container, anchor);
  // ...
};

這里以一個(gè)自定義的WebComponent元素<te-tag>為例

Vue使用createElement創(chuàng)建了te-tag元素對(duì)象保存在el中，然后使用for (const key in props) {...}遍歷需要綁定的屬性，屬性名為key，屬性值為props[key]，然后執(zhí)行hostPatchProp()將該屬性添加到el上。

hostPatchProp()即patchProp()方法代碼如下

const patchProp = (el, key, prevValue, nextValue, isSVG = false, prevChildren, parentComponent, parentSuspense, unmountChildren) => {
      if (key === 'class') {
          patchClass(el, nextValue, isSVG);
      }
      else if (key === 'style') {
          patchStyle(el, prevValue, nextValue);
      }
      else if (isOn(key)) {
          // ignore v-model listeners
          if (!isModelListener(key)) {
              patchEvent(el, key, prevValue, nextValue, parentComponent);
          }
      }
      else if (key[0] === '.'
          ? ((key = key.slice(1)), true)
          : key[0] === '^'
              ? ((key = key.slice(1)), false)
              : shouldSetAsProp(el, key, nextValue, isSVG)) {
          patchDOMProp(el, key, nextValue, prevChildren, parentComponent, parentSuspense, unmountChildren);
      }
      else {
          if (key === 'true-value') {
              el._trueValue = nextValue;
          }
          else if (key === 'false-value') {
              el._falseValue = nextValue;
          }
          patchAttr(el, key, nextValue, isSVG);
      }
  };

通過(guò)源碼可以看到，除了class/style的屬性，Vue會(huì)對(duì)我們自定義的屬性會(huì)進(jìn)行一個(gè)判斷，對(duì)于key的值：

.xxx表示通過(guò):xxx.prop綁定的數(shù)據(jù)，直接往property上設(shè)置
^xxx表示通過(guò):xxx.attr綁定的值，應(yīng)該往attribute上設(shè)置
不是以上兩種情況的key值如xxx，需要調(diào)用shouldSetAsProp()判斷是否應(yīng)該設(shè)置到property上

判斷為真綁定property會(huì)執(zhí)行patchDOMProp()，否則綁定attribute會(huì)執(zhí)行pathAttr()

我們這里最關(guān)心的第三種情況執(zhí)行shouldSetAsProp()來(lái)判斷是否應(yīng)該把xxx設(shè)置到property上，其代碼如下

function shouldSetAsProp(el, key, value, isSVG) {
      if (isSVG) {
          // most keys must be set as attribute on svg elements to work
          // ...except innerHTML & textContent
          if (key === 'innerHTML' || key === 'textContent') {
              return true;
          }
          // or native onclick with function values
          if (key in el && nativeOnRE.test(key) && isFunction(value)) {
              return true;
          }
          return false;
      }
      // these are enumerated attrs, however their corresponding DOM properties
      // are actually booleans - this leads to setting it with a string "false"
      // value leading it to be coerced to `true`, so we need to always treat
      // them as attributes.
      // Note that `contentEditable` doesn't have this problem: its DOM
      // property is also enumerated string values.
      if (key === 'spellcheck' || key === 'draggable' || key === 'translate') {
          return false;
      }
      // #1787, #2840 form property on form elements is readonly and must be set as
      // attribute.
      if (key === 'form') {
          return false;
      }
      // #1526 <input list> must be set as attribute
      if (key === 'list' && el.tagName === 'INPUT') {
          return false;
      }
      // #2766 <textarea type> must be set as attribute
      if (key === 'type' && el.tagName === 'TEXTAREA') {
          return false;
      }
      // native onclick with string value, must be set as attribute
      if (nativeOnRE.test(key) && isString(value)) {
          return false;
      }
      return key in el;
  }

這里可以看到Vue對(duì)SVG/spellcheck/draggale/translate/form/input[list]/textarea[type]/onclick等做了特殊處理，要求返回false綁定數(shù)據(jù)到attribute上。

而我們自定義的屬性只通過(guò)一行代碼來(lái)判斷，