建站
咨詢
售后
建站咨詢
新聞中心
最近，因?yàn)轫?xiàng)目需要，不得不學(xué)習(xí)一下 vue3。于是花了 4 個(gè)小時(shí)，把 Vue3 過了一遍?，F(xiàn)在我來帶你快速了解 Vue3 的寫法。
站在用戶的角度思考問題，與客戶深入溝通，找到洛南網(wǎng)站設(shè)計(jì)與洛南網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋洛南地區(qū)。
本文的目的，是為了讓已經(jīng)有 Vue2 開發(fā)經(jīng)驗(yàn)的 人 ，快速掌握 Vue3 的寫法。
因此， 本篇假定你已經(jīng)掌握 Vue 的核心內(nèi)容 ，只為你介紹編寫 Vue3 代碼，需要了解的內(nèi)容。
一、Vue3 里 script 的三種寫法
首先，Vue3 新增了一個(gè)叫做組合式 api 的東西，英文名叫 Composition API。因此 Vue3 的 script 現(xiàn)在支持三種寫法，
1、最基本的 Vue2 寫法
{{ count }}
2、setup() 屬性
{{ count }}
3、script setup
{{ count }}
正如你看到的那樣，無論是代碼行數(shù)，還是代碼的精簡度，
// Vue3 的寫法
2）注意事項(xiàng)——組合式 api 的心智負(fù)擔(dān)
a、ref 和 reactive
Vue3 里，還提供了一個(gè)叫做 reactive 的 api。
但是我的建議是，你不需要關(guān)心它。絕大多數(shù)場景下，ref 都夠用了。
b、什么時(shí)候用 ref() 包裹，什么時(shí)候不用。
要不要用ref，就看你的這個(gè)變量的值改變了以后，頁面要不要跟著變。
當(dāng)然，你可以完全不需要關(guān)心這一點(diǎn)，跟過去寫 data 一樣就行。
只不過這樣做，你在使用的時(shí)候，需要一直 .value。
c、不要解構(gòu)使用
在使用時(shí)，不要像下面這樣去寫，會(huì)丟失響應(yīng)性。
也就是會(huì)出現(xiàn)更新了值，但是頁面沒有更新的情況
// Vue3 的寫法
{{ count }}
注意： 學(xué)習(xí) Vue3 就需要考慮像這樣的內(nèi)容，徒增了學(xué)習(xí)成本。實(shí)際上這些心智負(fù)擔(dān)，在學(xué)習(xí)的過程中，是可以完全不需要考慮的。
這也是為什么我推薦新人先學(xué)習(xí) Vue2 的寫法。
2、methods
聲明事件方法，我們只需要在 script 標(biāo)簽里，創(chuàng)建一個(gè)方法對象即可。
剩下的在 Vue2 里是怎么寫的，Vue3 是同樣的寫法。
// Vue2 的寫法
這是一個(gè)div
// Vue3 的寫法
這是一個(gè)div
3、props
聲明 props 我們可以用 defineProps()，具體寫法，我們看代碼。
1）寫法對比
// Vue2 的寫法
{{ foo }}
// Vue3 的寫法
{{ foo }}
2）注意事項(xiàng)——組合式 api 的心智負(fù)擔(dān)
使用 props 時(shí)，同樣注意不要使用解構(gòu)的方式。
4、emits 事件
與 props 相同，聲明 emits 我們可以用 defineEmits()，具體寫法，我們看代碼。
// Vue2 的寫法
這是一個(gè)div
// Vue3 的寫法
這是一個(gè)div
5、computed
直接上寫法對比。
// Vue2 的寫法
{{ value }}
{{ reversedValue }}
// Vue3 的寫法
{{ value }}
{{ reversedValue }}
6、watch
這一部分，我們需要注意一下了，Vue3 中，watch 有兩種寫法。一種是直接使用 watch，還有一種是使用 watchEffect。
兩種寫法的區(qū)別是：
- watch 需要你明確指定依賴的變量，才能做到監(jiān)聽效果。
- 而 watchEffect 會(huì)根據(jù)你使用的變量，自動(dòng)的實(shí)現(xiàn)監(jiān)聽效果。
1）直接使用 watch
// Vue2 的寫法
{{ count }}
{{ anotherCount }}
// Vue3 的寫法
{{ count }}
{{ anotherCount }}
2）使用 watchEffect
// Vue2 的寫法
{{ count }}
{{ anotherCount }}
// Vue3 的寫法
{{ count }}
{{ anotherCount }}
7、生命周期
Vue3 里，除了將兩個(gè) destroy 相關(guān)的鉤子，改成了 unmount，剩下的需要注意的，就是在 // 組合式 api 寫法
三、結(jié)語
好了，對于快速上手 Vue3 來說，以上內(nèi)容基本已經(jīng)足夠了。
這篇文章本身不能做到幫你理解所有 Vue3 的內(nèi)容，但是能幫你快速掌握 Vue3 的寫法。
如果想做到對 Vue3 的整個(gè)內(nèi)容心里有數(shù)，還需要你自己多看看 Vue3 的官方文檔。
本文名稱：十分鐘，帶你了解Vue3的新寫法
網(wǎng)頁網(wǎng)址：http://www.5511xx.com/article/djscoee.html
