您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)Vue中數(shù)據(jù)響應(yīng)式是什么,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
在開始了解 Vue 的數(shù)據(jù)響應(yīng)式原理前應(yīng)該先搞清楚 ES語(yǔ)法 中的 getter 和 setter 方法的具體用法。
getter和setter 方法是以 get 和 set 關(guān)鍵字來(lái)為對(duì)象添加虛擬屬性的一種方式。這種屬性其實(shí)并不真實(shí)存在,而是以取值函數(shù) getter 和存值函數(shù) setter 來(lái)模擬的一種屬性。目的是對(duì)某個(gè)屬性設(shè)置存值函數(shù)和取值函數(shù),攔截該屬性的存取行為,以便于對(duì)該屬性的存取做一些限定處理。如下所示(以下代碼來(lái)源于 mdn)
getter 方法
const obj = { log: ['a', 'b', 'c'], get latest() { //在正常方法前加 get 關(guān)鍵字 if (this.log.length == 0) { return undefined; } return this.log[this.log.length - 1]; } } console.log(obj.latest);// 輸出 c,獲取的是屬性名不用帶括號(hào)
setter方法
const language = { set current(name) { this.log.push(name); }, log: [] } language.current = 'EN'; language.current = 'FA'; console.log(language.log);//輸出 Array ["EN", "FA"]
defineProperty 方法會(huì)直接在一個(gè)對(duì)象上定義一個(gè)新屬性,或者修改一個(gè)對(duì)象的現(xiàn)有屬性, 并返回這個(gè)對(duì)象,可用于在一個(gè)對(duì)象定義好后為其修改或添加屬性。
語(yǔ)法為:
Object.defineProperty(obj, prop, descriptor)
添加常規(guī)屬性:
let data = { m: 0 } Object.defineProperty(data, 'n', { value: 1 //添加屬性的 value 就是其值 }) console.log(`${data.n}`) //則會(huì)輸出n值為1
也可用來(lái)添加 getter 和 setter 的虛擬屬性
let data1 = { _n: 0 } Object.defineProperty(data1, 'n', { get(){ return this._n }, set(value){ if(value < 0) return this._n = value }//直接寫明 get / set 即可 }) //由于指明了虛擬屬性為 n,即 get n(){}、set n(value){},因此在函數(shù)定義時(shí)就不用再寫n了
代理,即 proxy,簡(jiǎn)單來(lái)說我自己的一些事情我自己不親自處理,而是交給一個(gè)人讓他去幫我做,那個(gè)做事的人就是代理。這個(gè)邏輯中有兩個(gè)關(guān)鍵點(diǎn)需要搞清楚,代理是處理操作的人,而其處理操作的事情不屬于他,而是屬于委托其代理的人的。
因此類比到 Vue數(shù)據(jù)代理 ,委托代理的是 data{} 數(shù)據(jù)對(duì)象,其找到代理就是 Vue實(shí)例vm ,data{} 數(shù)據(jù)對(duì)象要代理 vm 做的事情是管理 data{} 數(shù)據(jù)對(duì)象里數(shù)據(jù)操作。因此 data{} 數(shù)據(jù)對(duì)象只負(fù)責(zé)內(nèi)部數(shù)據(jù)的生產(chǎn)即可,對(duì)生產(chǎn)出來(lái)的數(shù)據(jù)的管理和操作全權(quán)交給 vm 處理。
那么 vm 如何對(duì) data{} 數(shù)據(jù)對(duì)象里的數(shù)據(jù)進(jìn)行控制和操作呢?換句話說,vm 如何在 data{} 數(shù)據(jù)對(duì)象里面的任意一個(gè)屬性值變化時(shí)都及時(shí)知道呢?
于是便用到了 ES 語(yǔ)法中的 getter和setter 方法,通過 getter和setter 方法控制的屬性的任何操作都會(huì)被這兩個(gè)函數(shù)檢測(cè)到,而 getter和setter 方法形成的屬性是虛擬屬性,真實(shí)并不存在,因此如果用戶想私自不經(jīng)過代理 vm 直接修改 data{} 數(shù)據(jù)對(duì)象的屬性也獲取不到對(duì)應(yīng)的實(shí)體屬性,只能通過 getter和setter 方法修改,那么其修改就必定被 vm 檢測(cè)到。
因此 vm 為了實(shí)現(xiàn)對(duì) data{} 數(shù)據(jù)對(duì)象里數(shù)據(jù)的全部控制,就必須在 Vue實(shí)例 創(chuàng)建的時(shí)候?qū)鬟M(jìn)來(lái)的 data{} 數(shù)據(jù)對(duì)象做一些處理,做的處理就是將 data{} 數(shù)據(jù)對(duì)象里的屬性都變成了 getter和setter 方法控制的虛擬屬性,并保存在代理數(shù)據(jù)對(duì)象 obj 并返回。
但為了不讓用戶直接修改原來(lái)的 data{} 屬性,也將原來(lái)的 data{} 對(duì)象的實(shí)體屬性全改變了,添加的虛擬屬性名字和實(shí)體屬性名一樣,就會(huì)用虛擬屬性覆蓋原來(lái)的實(shí)際屬性,用戶在修改屬性值是就是通過 getter和setter 方法修改的虛擬屬性。這樣一來(lái) data{} 數(shù)據(jù)對(duì)象的全部屬性的任何變化都會(huì)被 Vue實(shí)例vm 檢測(cè)到。
let myData = {n:0} let data = proxy({ data:myData }) // 類似于 let vm = new Vue({data: myData}) function proxy({data}/* 解構(gòu)賦值*/){ let _n = data.n Object.defineProperty(data, 'n', { //覆蓋原來(lái)的data.n屬性 get(){ return _n }, set(newValue){ if(newValue<0)return _n = newValue } })// 改變data{}數(shù)據(jù)對(duì)象本身屬性,可通過閉包形成上下文,讓原來(lái)的實(shí)際屬性值存在閉包的上下文_n中 const obj = {} Object.defineProperty(obj, 'n', { get(){ return data.n }, set(value){ data.n = value } }) //添加data{}數(shù)據(jù)對(duì)象的代理,對(duì)data{}數(shù)據(jù)對(duì)象操作 return obj // obj 就是data{}的代理 }
所謂響應(yīng)式就是當(dāng)事物發(fā)生變化時(shí)會(huì)根據(jù)變化做出相應(yīng)的反映。
Vue 中的數(shù)據(jù) data 是響應(yīng)式的,由上述 Vue 通過 Object.defineProperty()函數(shù) 來(lái)用 getter和setter方法 對(duì) data 數(shù)據(jù)做了代理和監(jiān)聽,一旦數(shù)據(jù)發(fā)生變化,Vue 就會(huì)改變數(shù)據(jù)對(duì)應(yīng)的 UI 視圖,這就是 Vue的數(shù)據(jù)響應(yīng)式
但是 Vue 使用 Object.defineProperty 來(lái)設(shè)置監(jiān)聽,就只能對(duì)在 Vue實(shí)例化 時(shí) data 對(duì)象里已經(jīng)存在的屬性設(shè)置監(jiān)聽,而對(duì)不存在的或者后來(lái)添加進(jìn)去的屬性沒有進(jìn)行監(jiān)聽。
為了解決這個(gè)問題,有兩種方法:
1. 將所有屬性都提前聲明好
2. 使用 Vue.set 和 this.$set 添加屬性
使用 Vue.set 和 this.$set 添加屬性是會(huì)通知 Vue 對(duì)這后添加的屬性也設(shè)置監(jiān)聽操作。
Vue.set('this.data','m','10') this.$set('this.data','m','10')//為vm的data對(duì)象添加屬性m值為10
3.數(shù)組變異
對(duì)于數(shù)組的數(shù)據(jù)增加,無(wú)法控制其新增個(gè)數(shù)因此不能提前聲明所有數(shù)據(jù)值,而一個(gè)一個(gè) set 又太麻煩,而且數(shù)組是常用的對(duì)象數(shù)據(jù)類型中的一種,因此 vue 的作者就對(duì)數(shù)組的增刪函數(shù)如 push 和 pop 等進(jìn)行了篡改,用戶在使用 vue 中數(shù)組增刪時(shí)仍是用 push 和 pop ,但是里面進(jìn)行了額外的處理,這幾個(gè)被篡改的 API 會(huì)對(duì)數(shù)組新增是數(shù)據(jù)代理監(jiān)聽并根據(jù)數(shù)據(jù)響應(yīng)改變 UI 視圖。
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架,Vue與其它大型框架的區(qū)別是,使用Vue可以自底向上逐層應(yīng)用,其核心庫(kù)只關(guān)注視圖層,方便與第三方庫(kù)和項(xiàng)目整合,且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開發(fā)復(fù)雜的單頁(yè)應(yīng)用。
關(guān)于“Vue中數(shù)據(jù)響應(yīng)式是什么”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。