什么是Vue響應(yīng)式系統(tǒng),相信很多沒有經(jīng)驗的人對此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。
我們提供的服務(wù)有:網(wǎng)站建設(shè)、成都網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、陜州ssl等。為千余家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù),是有科學(xué)管理、有技術(shù)的陜州網(wǎng)站制作公司
響應(yīng)式系統(tǒng)(Reactivity systems)是現(xiàn)代前端框架的關(guān)鍵部分之一。應(yīng)用系統(tǒng)的的高度交互性、動態(tài)性和響應(yīng)能力全靠它支持。每個Web開發(fā)人員而言都應(yīng)該了解這一系統(tǒng)的功能和實踐操作。
響應(yīng)系統(tǒng)是一種使自動使數(shù)據(jù)源(模型)與數(shù)據(jù)表示(視圖)層自動保持同步的機制。每次模型更改時,都會重新渲染視圖。
以一個簡單的Markdown編輯器為例。通常編輯器有兩個窗格:一個窗格用于編寫Markdown代碼(用于修改基礎(chǔ)模型),另一個窗格用于預(yù)覽已編譯的HTML(顯示已更新的視圖)。當我們在書寫窗格中寫東西時,它會立即在預(yù)覽窗格中自動預(yù)覽。這個例子比較簡單,在實際情況中會復(fù)雜很多。
在許多情況下,我們要顯示的數(shù)據(jù)取決于其他數(shù)據(jù)。在這種情況下,需要跟蹤相關(guān)數(shù)據(jù),并根據(jù)跟蹤情況來更新數(shù)據(jù)。例如,我們有一個fullName,該屬性由firstName和lastName屬性組成。修改其任何依賴項后,fullName將自動重新評估,并在視圖中顯示結(jié)果。
了解什么是響應(yīng)式系統(tǒng)后,在了解Vue 3中的響應(yīng)系統(tǒng)如何工作以及如何在實踐中使用之前,讓我們一起來快速回顧一下Vue 2中的響應(yīng)系統(tǒng)內(nèi)容及其注意事項。
Vue 2中的響應(yīng)或多或少會被“隱藏”。無論我們放置在data對象中的是什么,Vue都會使其隱式反應(yīng)(reactive implicitly)。這樣雖然可以使開發(fā)人員的工作更加輕松,但靈活度卻會不可避免的降低。
在幕后,Vue 2使用ES5 Object.defineProperty將data對象的所有屬性轉(zhuǎn)換為getter和setter。對于每個組件實例,Vue創(chuàng)建一個依賴關(guān)系觀察程序?qū)嵗?,觀察者會記錄組件渲染期間依賴收集/跟蹤的任何屬性。當屬性觸發(fā)依賴項的設(shè)置器時,將通知觀察者,并將組件重新渲染并更新視圖。但是卻也會有一些問題存在。
由于Object.defineProperty方法的限制,Vue無法檢測到某些數(shù)據(jù)更改。包括:
給對象添加屬性或把對象移除屬性(例如obj.newKey = value)
按索引設(shè)置數(shù)組項(例如arr[index] = newValue)
修改數(shù)組的長度(例如arr.length = newLength)
不過為了解決這些問題, Vue為提供了Vue.set API方法,該方法向響應(yīng)對象添加了一個屬性,確保新屬性也是響應(yīng)性的,從而觸發(fā)了視圖更新。
用下述實例討論該情況:
<h2>Hello! My name is {{ person.name }}. I'm {{ person.age }} years old.</h2> <button @click="addAgeProperty">Add "age" property</button> <p>Here are my favorite activities:</p> <ul> <li v-for="item, index in activities" :key="index"> {{ item }} <button @click="editActivity(index)">Edit</button> </li> </ul> <button @click="clearActivities">Clear the activities list</button> </div>
el: '#app', data: { person: { name: "David" }, activities: [ "Reading books", "Listening music", "Watching TV" ] }, methods: { // 1. Add a new property to an object addAgeProperty() { this.person.age = 30 }, // 2. Setting an array item by index editActivity(index) { const newValue = prompt('Input a new value') if (newValue) { this.activities[index] = newValue } }, // 3. Modifying the length of the array clearActivities() { this.activities.length = 0 } } });
在上面的示例中,我們會發(fā)現(xiàn)這三種方法都不起作用。我們不能向該person對象添加新屬性,無法使用activities的索引來編輯數(shù)組中的項目,也不能修改activities數(shù)組的長度。
優(yōu)化如下:
el: '#app', data: { person: { name: "David" }, activities: [ "Reading books", "Listening music", "Watching TV" ] }, methods: { // 1. Adding a new property to the object addAgeProperty() { Vue.set(this.person, 'age', 30) }, // 2. Setting an array item by index editActivity(index) { const newValue = prompt('Input a new value') if (newValue) { Vue.set(this.activities, index, newValue) } }, // 3. Modifying the length of the array clearActivities() { this.activities.splice(0) } } });
在此示例中,我們用Vue.setAPI方法將新age屬性添加到person對象,并從活動數(shù)組中選擇/修改特定項目。在最后一種情況下,使用JavaScript內(nèi)置splice方法。
這個做法完全可行但卻略顯笨拙,而且會導(dǎo)致前后代碼不一致。而Vue 3就解決了這個問題。
我們用下面示例繼續(xù)看:
data() { return { person: { name: "David" }, activities: [ "Reading books", "Listening music", "Watching TV" ] } }, methods: { // 1. Adding a new property to the object addAgeProperty() { this.person.age = 30 }, // 2. Setting an array item by index editActivity(index) { const newValue = prompt('Input a new value') if (newValue) { this.activities[index] = newValue } }, // 3. Modifying the length of the array clearActivities() { this.activities.length = 0 } } } Vue.createApp(App).mount('#app')
可以看到在Vue 3中,所有方法都可以正常工作。
在Vue 2.6中,引入的Vue.observable API方法,一定程度的公開了響應(yīng)式系統(tǒng),使開發(fā)人員可以體驗到響應(yīng)式系統(tǒng)的內(nèi)容。實際上,這和Vue內(nèi)部用來包裝data對象是完全相同的方法,對于在簡單場景創(chuàng)建小的跨組件狀態(tài)存儲很有用。但依舊沒辦法和Vue3的響應(yīng)式系統(tǒng)相比,接下來就為大家詳細介紹。
注意:由于Object.defineProperty方法是僅限ES5且不可調(diào)整的功能,因此Vue 2不支持IE8及以下版本。
為了充分利用ES6 Proxy and Reflect API ,Vue 3中的響應(yīng)式系統(tǒng)已被完全重寫。新版本新增響應(yīng)式API,該API使系統(tǒng)比以前更加靈活和強大。
Proxy API允許開發(fā)人員攔截和修改目標對象上的更低級對象操作。代理(proxy)是對象的克隆/包裝(clone/wrapper),并提供特殊功能(稱為target),這些功能響應(yīng)特定的操作并覆蓋JavaScript對象的內(nèi)置行為(稱為traps)。如果仍然需要使用默認行為,則可以使用相應(yīng)的Reflection API,其名稱顧名思義就是反映Proxy API的方法。這里有一個示例,用來了解如何在Vue 3中使用這些API:
name: "David", age: 27 }; const handler = { get(target, property, receiver) { // track(target, property) console.log(property) // output: name return Reflect.get(target, property, receiver) }, set(target, property, value, receiver) { // trigger(target, property) console.log(`${property}: ${value}`) // output: "age: 30" and "hobby: Programming" return Reflect.set(target, property, value, receiver) } } let proxy = new Proxy(person, handler); console.log(person) // get (reading a property value) console.log(proxy.name) // output: David // set (writing to a property) proxy.age = 30; // set (creating a new property) proxy.hobby = "Programming"; console.log(person)
要創(chuàng)建一個新的代理,使用new Proxy(target, handler)構(gòu)造函數(shù)。它帶有兩個參數(shù):目標對象(person對象)和處理程序?qū)ο?,該對象定義將攔截哪些操作(get和set操作)。在handler對象中, get和set陷阱來跟蹤何時讀取屬性以及何時修改/添加屬性。設(shè)置控制臺語句以確保運行正確。
在get和set陷阱采用下列參數(shù):
target:代理包裝的目標對象
property:屬性名稱
value:屬性值(此參數(shù)僅用于設(shè)置操作)
receiver:進行操作的對象(通常是代理)
Reflect API方法與其相應(yīng)的代理方法接受相同的參數(shù)
注釋中track函數(shù)和trigger函數(shù)特定用于Vue,用于跟蹤何時讀取屬性以及何時修改/添加屬性。
在示例的最后一部分,用控制臺語句輸出原始person對象。然后用另一份聲明中讀取屬性name的proxy對象。接下來,修改age屬性并創(chuàng)建一個新hobby屬性。最后,再次輸出該對象以查看它是否正確更新。
以上就是Vue3響應(yīng)式系統(tǒng)的完整工作流程,但在實際工作中會復(fù)雜得多。
使用Vue 3響應(yīng)式系統(tǒng),還有一些注意事項:
僅適用于支持ES6 +的瀏覽器
響應(yīng)代理不等于原始對象
看完上述內(nèi)容,你們掌握什么是Vue響應(yīng)式系統(tǒng)的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
網(wǎng)站欄目:什么是Vue響應(yīng)式系統(tǒng)
路徑分享:http://muchs.cn/article46/ihsjhg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)網(wǎng)站制作、外貿(mào)建站、網(wǎng)頁設(shè)計公司、小程序開發(fā)、、外貿(mào)網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)