午夜视频在线观看你懂的-国产对白videos高潮内射-成人国产一区二区三区av-亚洲欧美中文日本在线视频

前端教程
當(dāng)前位置: 主頁 > 資訊 > 前端教程
十分鐘帶你了解 Vue3 的新寫法
發(fā)布日期:2023-07-30 閱讀次數(shù):

  最近因為項目需要,不得不學(xué)習(xí)一下 Vue3。于是花了 4 個小時,把 Vue3 過了一遍?,F(xiàn)在我來帶你快速了解 Vue3 的寫法。

  本文的目的,是為了讓已經(jīng)有 Vue2 開發(fā)經(jīng)驗的人,快速掌握 Vue3 的寫法。

  因此,本篇假定你已經(jīng)掌握 Vue 的核心內(nèi)容,只為你介紹編寫 Vue3 代碼,需要了解的內(nèi)容。

  首先,Vue3 新增了一個叫做組合式 api 的東西,英文名叫 Composition API。因此 Vue3 的現(xiàn)在支持三種寫法,

  正如你看到的那樣,無論是代碼行數(shù),還是代碼的精簡度, setup的方式是最簡單的形式。

  如果你對 Vue 很熟悉,那么,我推薦你使用 setup的方式。

  因為第一種寫法的學(xué)習(xí)負(fù)擔(dān)更小,先學(xué)第一種方式,掌握最基本的 Vue 用法,然后再根據(jù)我這篇文章,快速掌握 Vue3 里最需要關(guān)心的內(nèi)容。

  第二種寫法,所有的對象和方法都需要return才能使用,太啰嗦。除了舊項目,可以用這種方式體驗 Vue3 的新特性以外,我個人不建議了解這種方式。反正我自己暫時不打算精進(jìn)這部分。

  所以,接下來,我們主要介紹的,也就是 setup,這種寫法里需要了解的內(nèi)容。

  注意: setup本質(zhì)上是第二種寫法的語法糖,掌握了這種寫法,其實第二種寫法也基本上就會了。(又多了一個不學(xué)第二種寫法的理由)。

  學(xué)習(xí) Vue3 并不代表你需要新學(xué)習(xí)一個技術(shù),Vue3 的底層開發(fā)思想,跟 Vue2 是沒有差別的。

  所以我們需要關(guān)心的,就是 Vue2 里的內(nèi)容,怎么用 Vue3 的方式寫出來。

  注意:學(xué)習(xí) Vue3 就需要考慮像這樣的內(nèi)容,徒增了學(xué)習(xí)成本。實際上這些心智負(fù)擔(dān),在學(xué)習(xí)的過程中,是可以完全不需要考慮的。

  與props相同,聲明emits我們可以用defineEmits,具體寫法,我們看代碼。

  這一部分,我們需要注意一下了,Vue3 中,watch 有兩種寫法。一種是直接使用watch,還有一種是使用watchEffect。

  如果你熟悉相關(guān)的生命周期,只需要記得在setup里,用on開頭,加上大寫首字母就行。

  這篇文章本身不能做到幫你理解所有 Vue3 的內(nèi)容,但是能幫你快速掌握 Vue3 的寫法。

  如果想做到對 Vue3 的整個內(nèi)容心里有數(shù),還需要你自己多看看 Vue3 的官方文檔。