建站
咨詢
售后
建站咨詢
新聞中心
隨著 TienChin 項(xiàng)目視頻的錄制，松哥終于也要靜下心來，認(rèn)真捋一捋 Vue3 中的各種新特性了，然后再和小伙伴們進(jìn)行分享，其實(shí) Vue3 中還是帶來了很多新鮮的玩意，今天我們就不卷 Java 了，來卷卷前端。
創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的靖西網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
以下內(nèi)容是一個(gè) Java 猿對(duì) Vue3 的理解，主要是應(yīng)用層面上，如果有專業(yè)的前端小伙伴，請(qǐng)輕拍。
1. script 寫法
進(jìn)入到 Vue3 時(shí)代，最明顯的感受就是在一個(gè) .vue 文件中，script 標(biāo)簽的寫法大變樣了。以前在 Vue2 中，我們都是這樣寫的：
不過到了 Vue3 里邊，這個(gè)寫法變了，變成下面這樣了：
{{a}}
{{result}}
先從大的方面來看，細(xì)節(jié)實(shí)現(xiàn)咱們后面再細(xì)聊。
大的方面，就是在這個(gè) export default 中，以后就只有兩個(gè)元素了，name 和 setup，我們以前的各種方法定義、生命周期函數(shù)、計(jì)算屬性等等，都寫在 setup 中，并且需要在 setup 中返回，setup 中返回了什么，上面的 template 中就能用什么。
這種寫法稍微有點(diǎn)費(fèi)事，所以還有一種簡(jiǎn)化的寫法，像下面這樣：
{{a}}
{{result}}
這種寫法就是直接在 script 標(biāo)簽中加入 setup，然后在 script 標(biāo)簽中該怎么定義就怎么定義，也不用 return 了。這個(gè)場(chǎng)景，又有點(diǎn) jQuery 的感覺了。
上面這個(gè)實(shí)現(xiàn)里有幾個(gè)細(xì)節(jié)，我們?cè)賮碓敿?xì)說說。
2. 生命周期
首先就是生命周期函數(shù)的寫法。
以前 Vue2 里的寫法有一個(gè)專業(yè)名詞叫做 options API，現(xiàn)在在 Vue3 里也有一個(gè)專業(yè)名詞叫做 composition API。在 Vue3 中，這些對(duì)應(yīng)的生命周期函數(shù)都要先從 vue 中導(dǎo)出，然后調(diào)用并傳入一個(gè)回調(diào)函數(shù)，像我們上一小節(jié)那樣寫。
下圖這張表格展示了 options API 和 composition API 的一一對(duì)應(yīng)關(guān)系：
|
options API |
composition API |
|
beforeCreate |
Not Needed |
|
created |
Not Needed |
|
mounted |
onMounted |
|
beforeUpdate |
onBeforeUpdate |
|
updated |
onUpdated |
|
beforeUnmount |
onBeforeUnmount |
|
unmounted |
onUnmounted |
|
errorCaptured |
onErrorCaptured |
|
renderTracked |
onRenderTracked |
|
renderTriggered |
onRenderTriggered |
|
activated |
onActivated |
|
deactivated |
onDeactivated |
想用哪個(gè)生命周期函數(shù)，就從 vue 中導(dǎo)出這個(gè)函數(shù)，然后傳入回一個(gè)回調(diào)就可以使用了。例如第一小節(jié)中松哥給大家舉的 onMounted 的用法。
3. 計(jì)算屬性
除了生命周期函數(shù)，計(jì)算屬性、watch 監(jiān)聽等等，用法也和生命周期函數(shù)類似，需要先從 vue 中導(dǎo)出，導(dǎo)出之后，也是傳入一個(gè)回調(diào)函數(shù)就可以使用了。上文有例子，我就不再啰嗦了。
像 watch 的監(jiān)控，寫法如下：
導(dǎo)入 watch 之后，然后直接使用即可。
4. ref 于 reactive
上面的例子中還有一個(gè) ref，這個(gè)玩意也需要跟大家介紹下。
在 Vue2 里邊，如果我們想要定義響應(yīng)式數(shù)據(jù)，一般都是寫在 data 函數(shù)中的，類似下面這樣：
但是在 Vue3 里邊，你已經(jīng)看不到 data 函數(shù)了，那怎么定義響應(yīng)式數(shù)據(jù)呢？就是通過 ref 或者 reactive 來定義了。
在第一小節(jié)中，我們就是通過 ref 定義了一個(gè)名為 a 的響應(yīng)式變量。
這個(gè) a 在 script 中寫的時(shí)候，有一個(gè) value 屬性，不過在 HTML 中引用的時(shí)候，是沒有 value 的，可千萬別寫成了 {{a.value}}，我們?cè)賮砘仡櫹律衔牡陌咐?/p>
{{a}}
現(xiàn)在就是通過這樣的方式來定義響應(yīng)式對(duì)象，修改值的時(shí)候，需要用 a.value，但是真正的上面的 template 節(jié)點(diǎn)中訪問的時(shí)候是不需要 value 的（注意，函數(shù)也得返回后才能在頁面中使用）。
和 Vue2 相比，這種寫法有一個(gè)很大的好處就是在方法中引用的時(shí)候不用再寫 this 了。
ref 一般用來定義原始數(shù)據(jù)類型，像 String、Number、BigInt、Boolean、Symbol、Null、Undefined 這些。
如果你想定義對(duì)象，那么可以使用 reactive 來定義，如下：
{{a}}
{{book.name}}
{{book.author}}
這里定義了 book 對(duì)象，book 對(duì)象中包含了 name 和 author 兩個(gè)屬性。
有的時(shí)候，你可能批量把數(shù)據(jù)定義好了，但是在訪問的時(shí)候卻希望直接訪問，那么我們可以使用數(shù)據(jù)展開，像下面這樣：
{{a}}
{{name}}
{{author}}
這樣，在上面訪問的時(shí)候，就可以直接訪問 name 和 author 兩個(gè)屬性了，就不用添加 book 前綴了。
不過?。?！
這種寫法其實(shí)有一個(gè)小坑。
比如我再添加一個(gè)按鈕，如下：
{{a}}
{{name}}
{{author}}
這個(gè)時(shí)候點(diǎn)擊更新按鈕，你會(huì)發(fā)現(xiàn)沒反應(yīng)！因?yàn)橛昧藬?shù)據(jù)展開之后，響應(yīng)式就失效了。所以，對(duì)于這種展開的數(shù)據(jù)，應(yīng)該再用 toRefs 來處理下，如下：
{{a}}
{{name}}
{{author}}
當(dāng)然，如果你將 setup 直接寫在了 script 標(biāo)簽中，那么可以直接按照如下方式來展開數(shù)據(jù)：
{{a}}
{{name}}
{{author}}
分享名稱：一個(gè)Java猿眼中Vue3和Vue2的差異
URL網(wǎng)址：http://m.5511xx.com/article/dpspsij.html
