建站
咨詢
售后
建站咨詢
新聞中心
我將向你展示如何使用Options API在Vue 2中創(chuàng)建屬性，然后向你展示如何使用Composition API在Vue 3中創(chuàng)建屬性。
然后，你將學(xué)習(xí)如何使用包裝對(duì)象ref和reactive創(chuàng)建屬性，何時(shí)使用它們以及為什么。
到本文結(jié)尾，你將能夠了解Vue 2 Options API與Vue 3 Composition API之間的屬性創(chuàng)建差異。
使用Vue2 Option API
Vue 2中引入的在Options API中聲明屬性的方法之一是將其添加到 data() 函數(shù)返回的JavaScript對(duì)象中。
如你所見(jiàn)，我已經(jīng)創(chuàng)建了一個(gè) name 屬性，并將其初始值設(shè)置為 null。
- export default {
- data() {
- return {
- name: null
- }
- }
- }
當(dāng)我們使用Options API創(chuàng)建屬性時(shí)，默認(rèn)情況下它將變?yōu)轫憫?yīng)性(或者稱為反應(yīng)性)的。
響應(yīng)性?
- name屬性是響應(yīng)性的，意味著可以將其綁定到模板中的HTML元素。
- 每當(dāng)屬性值更改時(shí)，視圖都會(huì)更新，反之亦然，這也稱為雙向數(shù)據(jù)綁定。
我們?cè)贠ptions API中聲明的所有屬性都是響應(yīng)性的，這在大多數(shù)情況下都是很好的。
在JavaScript Vue 2中訪問(wèn)該屬性
要訪問(wèn)此組件中的導(dǎo)出默認(rèn)對(duì)象內(nèi)的任何位置的 name 屬性，我們可以在選項(xiàng)API中使用this關(guān)鍵字。
假設(shè)我想在 mount() 函數(shù)內(nèi)部訪問(wèn)它，該函數(shù)是Options API中的生命周期方法之一。
- export default {
- ...
- mounted() {
- console.log(this.name);
- }
- }
讓我們看看如何在Vue模板中訪問(wèn) name 屬性。
訪問(wèn)Vue 2模板中的屬性
每當(dāng)我們使用Options API創(chuàng)建屬性時(shí)，它們不僅具有響應(yīng)性，而且可立即用于Vue模板。
因此，我們可以簡(jiǎn)單地使用雙花括號(hào)來(lái)訪問(wèn)模板標(biāo)簽之間的 name 屬性。
- {{name}}
在Vue 2中，模板標(biāo)記中需要有一個(gè)父元素，所有其他元素都將進(jìn)入其中。
你可能已經(jīng)知道此過(guò)程，但讓我們看看如何使用新的Composition API來(lái)完成此過(guò)程。
Composition API (Vue 3)
Vue 3的一大優(yōu)點(diǎn)是，我們可以像上面的示例一樣使用Options API來(lái)創(chuàng)建響應(yīng)性屬性。
此外，我們現(xiàn)在可以使用Composition API來(lái)創(chuàng)建非常靈活的屬性，一會(huì)兒你就能明白為什么。
在Vue 3中有兩種創(chuàng)建反應(yīng)特性的方法：
- ref
- reactive
ref()
在Vue 3中，我們需要導(dǎo)入任何我們想要在應(yīng)用程序中使用的包。
通過(guò)這種方式，我們只包含我們?cè)谏a(chǎn)包中使用的包，這使應(yīng)用程序更輕和更快。
有了Composition API，所有的屬性和函數(shù)都會(huì)進(jìn)入 export default 的 setup() 方法里面。
在這里，我們可以使用 let 或 const 或 var(不推薦)關(guān)鍵字將屬性創(chuàng)建為變量。
在右側(cè)，name 變量的值是一個(gè)空字符串，其中包裹了ref對(duì)象。
那么什么是 ref() 對(duì)象???
ref是一個(gè)包裝器對(duì)象，它具有一個(gè)內(nèi)部值并返回一個(gè)反應(yīng)性和可變的對(duì)象。
我們可以將其分配給括號(hào)內(nèi)具有初始值的變量…在這種情況下，是一對(duì)雙引號(hào)。
那么為什么我們需要它呢?
當(dāng) name 變量的值發(fā)生變化時(shí)，它通過(guò)發(fā)出反應(yīng)性事件來(lái)保持反應(yīng)性，這樣觀察者可以自動(dòng)更新。
它接受一個(gè)內(nèi)部value，并返回一個(gè)反應(yīng)式和可變的對(duì)象。
現(xiàn)在，name變量是一種ref對(duì)象，其內(nèi)部包裹著一個(gè)value。
在JavaScript中訪問(wèn)Ref()變量
要獲得與 name 變量關(guān)聯(lián)的值，我們只需要使用它的 .value 屬性對(duì)其進(jìn)行拆包，然后將給出該值。
ref() 對(duì)象將有一個(gè)名為 .value 的單一屬性，指向內(nèi)部值。
是的，當(dāng)你要為 name 變量設(shè)置值時(shí)，我們也需要使用 .value。
正如你所知道的，在Vue 2的Option API中，所有的屬性在模板中一經(jīng)創(chuàng)建就變得可用。
但是在Vue 3與Composition API中，我們有一個(gè)選項(xiàng)可以顯式地將屬性和功能暴露給模板。
這意味著我們現(xiàn)在可以創(chuàng)建一個(gè)私有變量，該變量只能在 setup() 函數(shù)內(nèi)部訪問(wèn)。
現(xiàn)在，我們要做的就是將此變量作為屬性添加到 setup() 函數(shù)返回的JavaScript對(duì)象中。
返回的對(duì)象具有一個(gè)屬性，即username，值是上面聲明的名稱“Raja”。
習(xí)慣了Vue2，這是我經(jīng)常忘記將變量作為屬性添加到返回對(duì)象中的一件事。
在大多數(shù)情況下，出于可維護(hù)性的目的，你希望屬性的鍵和值相同。
- return {
- name:name
- }
為了簡(jiǎn)化此過(guò)程，請(qǐng)使用對(duì)象屬性值的簡(jiǎn)寫(xiě)，如下：
- return {
- name
- }
訪問(wèn)Vue 3模板中的屬性
在模板中，使用雙大括號(hào)來(lái)訪問(wèn) name 屬性，該屬性類似于Options API。
- {{name}}
那么父div怎么辦?
在Vue 3中，我們不再需要父div!
現(xiàn)在，我們可以在模板標(biāo)簽內(nèi)部擁有div元素。
Reactive()
在Composition API中創(chuàng)建變量的另一種方法是使用 reactive() 作為包裝對(duì)象。
你可能想知道：為什么在Vue 3中需要兩種創(chuàng)建變量的方式?
嗯，ref() 是針對(duì)單一的基元類型的變量，比如字符串、數(shù)字等，當(dāng)值發(fā)生變化時(shí)，它會(huì)保持反應(yīng)性。
一旦我們創(chuàng)建了一個(gè)具有字典結(jié)構(gòu)的數(shù)據(jù)(如對(duì)象)的變量，引用就會(huì)失去其反應(yīng)性。
為此，我們需要一個(gè) reactivity() 包裝對(duì)象而不是 ref() 對(duì)象。
Reactive() 接受一個(gè)對(duì)象并返回原始對(duì)象的反應(yīng)代理。
讓我們看看如何做到這一點(diǎn)。
從Vue導(dǎo)入reactive包。
- import { reactive } from "vue";
類似于ref，使用一個(gè)reactive包裝對(duì)象，并將一個(gè)Javascript對(duì)象作為初始值傳遞給一個(gè)變量。
從Reactive()變量獲取值
好消息是，與ref不同，我們不必使用 .value 來(lái)展開(kāi) book 變量的值。
我們可以像往常一樣直接訪問(wèn) book 對(duì)象的屬性。
訪問(wèn)Vue 3模板中的屬性
與前面的例子類似，我們需要做的就是在 setup() 函數(shù)返回的JavaScript對(duì)象中添加這個(gè)變量作為屬性。
我們可以像往常一樣使用雙花括號(hào)在模板中訪問(wèn)它。
- {{book.title}}
- {{book.price}}
為了檢查反應(yīng)性，在2秒后使用 setTimeout() 函數(shù)改變兩個(gè)屬性的值。
通過(guò)查看模板中2秒鐘后的值更改，你將能夠看到反應(yīng)性。
那么數(shù)組呢?
數(shù)組是其中一種類型，我們可以通過(guò)使用 ref 或 reactive 包裝器對(duì)象來(lái)實(shí)現(xiàn)反應(yīng)性。
在可能的情況下，我會(huì)使用 reactive 而不是 ref，以避免 .value 的語(yǔ)法。
無(wú)反應(yīng)性變量
關(guān)于Vue 3的另一個(gè)好處是，我們現(xiàn)在可以創(chuàng)建一個(gè)變量，該變量可以是私有的，也可以在需要時(shí)不響應(yīng)。
分享題目：Vue2和Vue3中應(yīng)該知道的屬性創(chuàng)建差異
文章源于：http://m.5511xx.com/article/cdoiope.html
