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

Vue 3.0的attribute強(qiáng)制行為理解學(xué)習(xí)

 更新時間:2022年08月11日 15:37:51   作者:cutekio  
這篇文章主要為大家介紹了Vue 3.0的attribute強(qiáng)制行為理解學(xué)習(xí),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

理解property和attribute

這個要看具體的語境了。不過我們可以從詞源的角度來區(qū)分一下這兩者:

property

形容詞

property的詞源可追溯到proper,意為合適的,適當(dāng)?shù)摹?/p>

短語示例:

  • a proper job 一份合適(自己的)工作

名詞

proper加上ty后綴變?yōu)槊~prproperty,意為特性

短語示例:

  • chemical property 化學(xué)性質(zhì),比如酒精易揮發(fā)的化學(xué)性質(zhì)。

attribute

an abstraction belonging to or characteristic of an entity

對實體的抽象或者特征描述。

比如,我們談?wù)撘粭l魚這個實體,說這條魚具有對稱性,此時我們的意思是這條魚具有這個屬性,而不是說只有這條魚具有對稱性。

這樣總結(jié)下來,property是attribute的子集,property代表專屬于一個實體的屬性。

但是在編碼的過程中,程序員總有抽象不完善的情況,這也是為什么property和attribute會混淆的原因。

vue3中的property和attribute

在vue3中property也就是props所定義的一個組件的屬性,這些屬性會由組件接收,同時在接收的時候會對其進(jìn)行校驗數(shù)據(jù)類型和值的正確性。

如下一段代碼很好地解釋了vue3中什么是property:

class User {
  _name
  set name(name) {
      if(!name) {
        alert('名稱不能為空')
      }
      this._name = name
  }
  get name() {
      return this._name
  }
}

而attribute則更像沒人管的野孩子。下面一段介紹是vue3對非prop的attribute的描述:

一個非 prop 的 attribute 是指傳向一個組件,但是該組件并沒有相應(yīng) props 或 emits 定義的 attribute。常見的示例包括 class、style 和 id attribute??梢酝ㄟ^ $attrs property 訪問那些 attribute。

xml中的屬性節(jié)點

html所構(gòu)成的dom樹,元素節(jié)點上的attribute的類型是屬性節(jié)點,也是樹的一個level。

dom api在處理這些屬性時,如果是對象的property,則會交由對象的property處理器去處理,而如果對象沒有相應(yīng)的property,則會將由xml解析出來的attribute添加到attributes這個屬性上去。

vue3.0的attribute強(qiáng)制行為

接觸過強(qiáng)類型語言比如Java的都會知道【強(qiáng)制類型轉(zhuǎn)換】這樣一個術(shù)語。

int i = (int)(1.23);

vue框架在編譯模板代碼時也會進(jìn)行類似的【強(qiáng)制類型轉(zhuǎn)換

模板代碼如下:

<template>
    <div id="draggable" draggable />
</template>

在vue2中,上述的模板會被渲染為:

<div id="draggable" draggable="true" />

在vue3中,上述的模板會被渲染為:

<div id="draggable" draggable=""></div>

也就是說vue3中沒有強(qiáng)制行為,你在模板中看到的就是最終的渲染結(jié)果。

源代碼分析

function setAttr(el: Element, key: string, value: any, isInPre?: any) {
  if (isInPre || el.tagName.indexOf('-') > -1) {
    baseSetAttr(el, key, value)
  } else if (isBooleanAttr(key)) {
    // set attribute for blank value
    // e.g. <option disabled>Select one</option>
    if (isFalsyAttrValue(value)) {
      el.removeAttribute(key)
    } else {
      // technically allowfullscreen is a boolean attribute for <iframe>,
      // but Flash expects a value of "true" when used on <embed> tag
      value = key === 'allowfullscreen' && el.tagName === 'EMBED' ? 'true' : key
      el.setAttribute(key, value)
    }
  } else if (isEnumeratedAttr(key)) {
    el.setAttribute(key, convertEnumeratedValue(key, value))
  } else if (isXlink(key)) {
    if (isFalsyAttrValue(value)) {
      el.removeAttributeNS(xlinkNS, getXlinkProp(key))
    } else {
      el.setAttributeNS(xlinkNS, key, value)
    }
  } else {
    baseSetAttr(el, key, value)
  }
}
function baseSetAttr(el, key, value) {
  if (isFalsyAttrValue(value)) {
    el.removeAttribute(key)
  } else {
    // #7138: IE10 & 11 fires input event when setting placeholder on
    // <textarea>... block the first input event and remove the blocker
    // immediately.
    /* istanbul ignore if */
    if (
      isIE &&
      !isIE9 &&
      el.tagName === 'TEXTAREA' &&
      key === 'placeholder' &&
      value !== '' &&
      !el.__ieph
    ) {
      const blocker = e => {
        e.stopImmediatePropagation()
        el.removeEventListener('input', blocker)
      }
      el.addEventListener('input', blocker)
      // $flow-disable-line
      el.__ieph = true /* IE placeholder patched */
    }
    el.setAttribute(key, value)
  }
}
export const convertEnumeratedValue = (key: string, value: any) => {
  return isFalsyAttrValue(value) || value === 'false'
    ? 'false'
    : // allow arbitrary string value for contenteditable
    key === 'contenteditable' && isValidContentEditableValue(value)
    ? value
    : 'true'
}
export const isBooleanAttr = makeMap(
  'allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,' +
    'default,defaultchecked,defaultmuted,defaultselected,defer,disabled,' +
    'enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,' +
    'muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,' +
    'required,reversed,scoped,seamless,selected,sortable,' +
    'truespeed,typemustmatch,visible'
)
export const isEnumeratedAttr = makeMap('contenteditable,draggable,spellcheck')

vue2在解析模板之后,得到了關(guān)于dom結(jié)構(gòu)的js對象描述。

通過調(diào)用dom api來創(chuàng)建節(jié)點并為節(jié)點添加屬性【setAttribute】。

大致分為:

  • 布爾類型屬性

The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

也就是說布爾類型的值如果沒有這個屬性則是false,有了這個屬性,則不論其屬性值是false還是true,都會被瀏覽器解析為true.

  • 枚舉屬性

Some attributes, called enumerated attributes, take on a finite set of states. 這些屬性值的可能情況是有限的

值得一提的是draggablecontenteditable都是枚舉屬性,雖然它們看起來像是布爾類型。

那么這兩種類型的屬性,vue2.0是怎么處理的呢?

  • 首先vue的自定義組件是不在這兩種處理范疇之內(nèi)的。
  • 對于布爾類型值,vue模板則不會一棍子打死,如果真的是falsy值,vue框架會自動幫你去除掉這個屬性,調(diào)用removeAttribute方法。至于allowfullscreen這個雖然是一個boolean類型的值,但用在embed標(biāo)簽上,則要求是true。
  • 其次,如果是枚舉類型的值,則會對枚舉類型的值進(jìn)行轉(zhuǎn)化。如果是falsy的值,則為'false'??擅杜e類型的值實際上就3個contenteditable,draggable,spellcheck,如果是contenteditable則按照所見即所得的原則處理,其他都強(qiáng)制轉(zhuǎn)換為true。
  • 最后,不在上述情況的屬性,則是如果是falsy的值,則移除,其他的值則是原樣設(shè)置。

vue3.0的變化

  • 刪除枚舉 attribute 的內(nèi)部概念,并將這些 attribute 視為普通的非布爾 attribute
  • 重大改變:如果值為布爾值,則不再刪除 attribute false。相反,它被設(shè)置為 attr=“false”。移除 attribute,使用 null 或者 undefined。

vue3不再強(qiáng)制變更屬性值,這樣有了所見即所得的效果,可以解除正常四維對于這些詭異行為的困惑。

至于為什么要這樣做,仁者見仁,智者見智。

以上就是Vue 3.0的attribute強(qiáng)制行為理解學(xué)習(xí)的詳細(xì)內(nèi)容,更多關(guān)于Vue attribute強(qiáng)制行為的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • Webpack和Vite的區(qū)別小結(jié)

    Webpack和Vite的區(qū)別小結(jié)

    本文主要介紹了Webpack和Vite的區(qū)別小結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-05-05
  • vue驗證碼(identify)插件使用方法詳解

    vue驗證碼(identify)插件使用方法詳解

    這篇文章主要為大家詳細(xì)介紹了vue驗證碼插件使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • 詳解vue中的父子傳值雙向綁定及數(shù)據(jù)更新問題

    詳解vue中的父子傳值雙向綁定及數(shù)據(jù)更新問題

    這篇文章主要介紹了vue中的父子傳值雙向綁定及數(shù)據(jù)更新問題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-06-06
  • vue 2.0項目中如何引入element-ui詳解

    vue 2.0項目中如何引入element-ui詳解

    element-ui是一個比較完善的UI庫,但是使用它需要有一點vue的基礎(chǔ),下面這篇文章主要給大家介紹了關(guān)于在vue 2.0項目中如何引入element-ui的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來一起看看吧。
    2017-09-09
  • Vue實現(xiàn)可復(fù)用輪播組件的方法

    Vue實現(xiàn)可復(fù)用輪播組件的方法

    這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)可復(fù)用輪播組件的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • vue 2.0路由之路由嵌套示例詳解

    vue 2.0路由之路由嵌套示例詳解

    這篇文章主要給大家介紹了vue 2.0路由之路由嵌套的相關(guān)資料,文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí),對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。
    2017-05-05
  • vue init失敗簡單解決方法(終極版)

    vue init失敗簡單解決方法(終極版)

    這篇文章主要介紹了vue init失敗的簡單解決方法-終極版,需要的朋友可以參考下
    2017-12-12
  • Vue的實例、生命周期與Vue腳手架(vue-cli)實例詳解

    Vue的實例、生命周期與Vue腳手架(vue-cli)實例詳解

    本文通過實例代碼+圖片描述的形式給大家介紹了Vue的實例、生命周期與Vue腳手架(vue-cli)知識,需要的朋友可以參考下
    2017-12-12
  • vue 修改 data 數(shù)據(jù)問題并實時顯示的方法

    vue 修改 data 數(shù)據(jù)問題并實時顯示的方法

    今天小編就為大家分享一篇vue 修改 data 數(shù)據(jù)問題并實時顯示的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • vue.js配合$.post從后臺獲取數(shù)據(jù)簡單demo分享

    vue.js配合$.post從后臺獲取數(shù)據(jù)簡單demo分享

    今天小編就為大家?guī)硪黄獀ue.js配合$.post從后臺獲取數(shù)據(jù)簡單demo分享,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08

最新評論