vue3默認(rèn)把所有onSomething當(dāng)作v-on事件綁定的原因

這篇文章主要講解了vue3默認(rèn)把所有onSomething當(dāng)作v-on事件綁定的原因，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),新密企業(yè)網(wǎng)站建設(shè),新密品牌網(wǎng)站建設(shè),網(wǎng)站定制,新密網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,新密網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

最近在重新看vue3的rfcs，發(fā)現(xiàn)一個(gè)細(xì)節(jié)，原話如下：

props that start with on are handled as v-on bindings, with everything after on being converted to all-lowercase as the event name (more on this below)

也就是說，以后如果你在傳遞props的時(shí)候，以 on 開頭的props，如果在組件上沒有做props的聲明，那么會被當(dāng)作事件綁定到組件的根節(jié)點(diǎn)上。

究其原因，我大致概括了兩點(diǎn)：

兼容vue2中的v-on.native
vue3的vnode聲明把props拍平了，為了區(qū)分事件和其他props，就統(tǒng)一把所有的on開通的props默認(rèn)作為事件綁定

為此，我開了一個(gè)issue來討論這個(gè)問題，issue地址。我關(guān)心的主要有兩點(diǎn)：

這是對functional component的嚴(yán)重限制
是否會導(dǎo)致一些令人括困惑的誤解

先講第一點(diǎn)

vue3中可以直接通過 function() {} 來聲明函數(shù)組件了，這是一個(gè)便利性的非常大的提升。在以前，你要聲明組件，你必須要：

{
  functinal: true,
  props: {},
  render() {}
}

這最大的提升來自不需要聲明props，為什么說這是提升，因?yàn)檫@讓我們開發(fā)HOC變得更方便了?，F(xiàn)在我們可以通過 ...rest 的方式把HOC不關(guān)心的props直接向下傳遞了。

但是現(xiàn)在因?yàn)檫@個(gè)默認(rèn)限制，我們不得不在HOC中聲明所有可能的他要擴(kuò)展的組件以 on 開頭的props。舉個(gè)例子，我們有如下組件：

{
  props: {
    name: String,
    onChange: Function
  }
}

而我們的HOC的功能是在 name 前面加上 prefix ，對于這個(gè)HOC我們需要關(guān)心的只是 name 和他自己的props: prefix 。所以他的聲明應(yīng)該如下：

{
  props: {
    name: String,
    prefix: String
  }
}

然后在render中他可以這么做：

{
  render() {
    const {name, prefix, ...rest} = props
    return <WrapperedComponent name={`${prefix}-${name}`} {...rest} />
  }
}

也就是對于HOC來說，他是不需要關(guān)心他擴(kuò)展的組件其他的props的，但是在這種情況下，如果我們不在HOC中聲明，那么在使用的時(shí)候傳入的 onChange 會自動綁定到root節(jié)點(diǎn)，而不是作為props傳遞下去。

第二點(diǎn)：令人困惑的使用

舉個(gè)例子，如果我有一個(gè)組件：

{
  props: {
    onChange: Function
  },
  methods: {
    handleInput() {
      // do someting
      // 并且根據(jù)情況觸發(fā)`onChange`
    } 
  },
  render() {
    return <input onInput={this.handleInput} />
  }
}

很顯然我是想要封裝 input 的變化，在滿足某些條件的時(shí)候才對外拋出新的value。但是如果這個(gè)時(shí)候有人就是不看文檔，直接傳遞了 onInput ，那么這時(shí)候 input 事件會直接綁定到節(jié)點(diǎn)上，那么這也是可以觸發(fā)的。

如果我們的測試用例太少或者不仔細(xì)，很可能反應(yīng)不過來他們的區(qū)別。這顯然是作為組件開發(fā)者的我們不希望出現(xiàn)的，但我們又無法限制這種行為。

總結(jié)

不得不說，我在考慮這兩個(gè)問題的時(shí)候是有一定的 React思維在里面的。因?yàn)閭€(gè)人來說我是比較喜歡React的API設(shè)計(jì)的，非常的簡潔，其對于組件的使用也更趨于極致，就是一切皆組件（連 redirect 這樣的行為都定義成了組件）。

而vue是一直在跟隨react的，相信這點(diǎn)大家也不會否認(rèn)。vue3更新的hooks（Composition）API，Suspense等明顯是借鑒的React的概念。

但同時(shí)我又是很看好vue3的，我一直覺得vue2這樣的API設(shè)計(jì)以及 .vue 文件的開發(fā)模式都是為了吸引中低級用戶而準(zhǔn)備的，甚至舍棄了一些高級API特性（比如HOC在vue中就很難實(shí)現(xiàn)，并且普及率相當(dāng)?shù)停?/p>

而vue3的hooks API以及其對JSX的更好支持，還有更純粹的 functional component ，讓我一度看到了vue在工程方面更激進(jìn)的變化。

但是 v-on 的默認(rèn)行為，卻又是一次那么明顯的替用戶做決定的行為。其實(shí)要解決這個(gè)問題很簡單，可以完全不考慮 v-on ，把所有傳遞的參數(shù)作為props，如果組件開發(fā)者真的要在根節(jié)點(diǎn)上綁定事件，他可以實(shí)現(xiàn)的時(shí)候綁定，我們不應(yīng)該在使用組件的場景下需要考慮在組件內(nèi)部的節(jié)點(diǎn)上做一些事情，這樣做的副作用實(shí)在太大了。

看完上述內(nèi)容，是不是對vue3默認(rèn)把所有onSomething當(dāng)作v-on事件綁定的原因有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：vue3默認(rèn)把所有onSomething當(dāng)作v-on事件綁定的原因
本文來源：http://bm7419.com/article2/pcgpoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、品牌網(wǎng)站建設(shè)、云服務(wù)器、電子商務(wù)、App開發(fā)、網(wǎng)站維護(hù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容