您好,登錄后才能下訂單哦!
本篇文章為大家展示了怎么在Vue中對數(shù)據(jù)進(jìn)行劫持,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
Vue會對我們在data中傳入的數(shù)據(jù)進(jìn)行攔截:
對象:遞歸的為對象的每個屬性都設(shè)置get/set方法
數(shù)組:修改數(shù)組的原型方法,對于會修改原數(shù)組的方法進(jìn)行了重寫
在用戶為data中的對象設(shè)置值、修改值以及調(diào)用修改原數(shù)組的方法時,都可以添加一些邏輯來進(jìn)行處理,實(shí)現(xiàn)數(shù)據(jù)更新頁面也同時更新。
Vue中的響應(yīng)式(reactive): 對對象屬性或數(shù)組方法進(jìn)行了攔截,在屬性或數(shù)組更新時可以同時自動地更新視圖。在代碼中被觀測過的數(shù)據(jù)具有響應(yīng)性
我們先讓代碼實(shí)現(xiàn)下面的功能:
<body> <script> const vm = new Vue({ el: '#app', data () { return { age: 18 }; } }); // 會觸發(fā)age屬性對應(yīng)的set方法 vm.age = 20; // 會觸發(fā)age屬性對應(yīng)的get方法 console.log(vm.age); </script> </body>
在src/index.js中,定義Vue的構(gòu)造函數(shù)。用戶用到的Vue就是在這里導(dǎo)出的Vue:
import initMixin from './init'; function Vue (options) { this._init(options); } // 進(jìn)行原型方法擴(kuò)展 initMixin(Vue); export default Vue;
在init中,會定義原型上的_init方法,并進(jìn)行狀態(tài)的初始化:
import initState from './state'; function initMixin (Vue) { Vue.prototype._init = function (options) { const vm = this; // 將用戶傳入的選項(xiàng)放到vm.$options上,之后可以很方便的通過實(shí)例vm來訪問所有實(shí)例化時傳入的選項(xiàng) vm.$options = options; initState(vm); }; } export default initMixin;
在_init方法中,所有的options被放到了vm.$options中,這不僅讓之后代碼中可以更方便的來獲取用戶傳入的配置項(xiàng),也可以讓用戶通過這個api來獲取實(shí)例化時傳入的一些自定義選選項(xiàng)。比如在Vuex 和Vue-Router中,實(shí)例化時傳入的router和store屬性便可以通過$options獲取到。
除了設(shè)置vm.$options,_init中還執(zhí)行了initState方法。該方法中會判斷選項(xiàng)中傳入的屬性,來分別進(jìn)行props、methods、data、watch、computed 等配置項(xiàng)的初始化操作,這里我們主要處理data選項(xiàng):
import { observe } from './observer'; import { proxy } from './shared/utils'; function initState (vm) { const options = vm.$options; if (options.props) { initProps(vm); } if (options.methods) { initMethods(vm); } if (options.data) { initData(vm); } if (options.computed) { initComputed(vm) } if (options.watch) { initWatch(vm) } } function initData (vm) { let data = vm.$options.data; vm._data = data = typeof data === 'function' ? data.call(vm) : data; // 對data中的數(shù)據(jù)進(jìn)行攔截 observe(data); // 將data中的屬性代理到vm上 for (const key in data) { if (data.hasOwnProperty(key)) { // 為vm代理所有data中的屬性,可以直接通過vm.xxx來進(jìn)行獲取 proxy(vm, key, data); } } } export default initState;
在initData中進(jìn)行了如下操作:
data可能是對象或函數(shù),這里將data統(tǒng)一處理為對象
觀測data中的數(shù)據(jù),為所有對象屬性添加set/get方法,重寫數(shù)組的原型鏈方法
將data中的屬性代理到vm上,方便用戶直接通過實(shí)例vm來訪問對應(yīng)的值,而不是通過vm._data來訪問
新建src/observer/index.js,在這里書寫observe函數(shù)的邏輯:
function observe (data) { // 如果是對象,會遍歷對象中的每一個元素 if (typeof data === 'object' && data !== null) { // 已經(jīng)觀測過的值不再處理 if (data.__ob__) { return; } new Observer(data); } } export { observe };
observe函數(shù)中會過濾data中的數(shù)據(jù),只對對象和數(shù)組進(jìn)行處理,真正的處理邏輯在Observer中:
/** * 為data中的所有對象設(shè)置`set/get`方法 */ class Observer { constructor (value) { this.value = value; // 為data中的每一個對象和數(shù)組都添加__ob__屬性,方便直接可以通過data中的屬性來直接調(diào)用Observer實(shí)例上的屬性和方法 defineProperty(this.value, '__ob__', this); // 這里會對數(shù)組和對象進(jìn)行單獨(dú)處理,因?yàn)闉閿?shù)組中的每一個索引都設(shè)置get/set方法性能消耗比較大 if (Array.isArray(value)) { Object.setPrototypeOf(value, arrayProtoCopy); this.observeArray(value); } else { this.walk(); } } walk () { for (const key in this.value) { if (this.value.hasOwnProperty(key)) { defineReactive(this.value, key); } } } observeArray (value) { for (let i = 0; i < value.length; i++) { observe(value[i]); } } }
需要注意的是,__ob__屬性要設(shè)置為不可枚舉,否則之后在對象遍歷時可能會引發(fā)死循環(huán)
Observer類中會為對象和數(shù)組都添加__ob__屬性,之后便可以直接通過data中的對象和數(shù)組vm.value.__ob__來獲取到Observer實(shí)例。
當(dāng)傳入的value為數(shù)組時,由于觀測數(shù)組的每一個索引會耗費(fèi)比較大的性能,并且在實(shí)際使用中,我們可能只會操作數(shù)組的第一項(xiàng)和最后一項(xiàng),即arr[0],arr[arr.length-1],很少會寫出arr[23] = xxx的代碼。
所以我們選擇對數(shù)組的方法進(jìn)行重寫,將數(shù)組的原型指向繼承Array.prototype新創(chuàng)建的對象arrayProtoCopy,對數(shù)組中的每一項(xiàng)繼續(xù)進(jìn)行觀測。
創(chuàng)建data中數(shù)組原型的邏輯在src/observer/array.js中:
// if (Array.isArray(value)) { // Object.setPrototypeOf(value, arrayProtoCopy); // this.observeArray(); // } const arrayProto = Array.prototype; export const arrayProtoCopy = Object.create(arrayProto); const methods = ['push', 'pop', 'unshift', 'shift', 'splice', 'reverse', 'sort']; methods.forEach(method => { arrayProtoCopy[method] = function (...args) { const result = arrayProto[method].apply(this, args); console.log('change array value'); // data中的數(shù)組會調(diào)用這里定義的方法,this指向該數(shù)組 const ob = this.__ob__; let inserted; switch (method) { case 'push': case 'unshift': inserted = args; break; case 'splice': // splice(index,deleteCount,item1,item2) inserted = args.slice(2); break; } if (inserted) {ob.observeArray(inserted);} return result; }; });
通過Object.create方法,可以創(chuàng)建一個原型為Array.prototype的新對象arrayProtoCopy。修改原數(shù)組的7個方法會設(shè)置為新對象的私有屬性,并且在執(zhí)行時會調(diào)用arrayProto 上對應(yīng)的方法。
在這樣處理之后,便可以在arrayProto中的方法執(zhí)行前后添加自己的邏輯,而除了這7個方法外的其它方法,會根據(jù)原型鏈,使用arrayProto上的對應(yīng)方法,并不會有任何額外的處理。
在修改原數(shù)組的方法中,添加了如下的額外邏輯:
const ob = this.__ob__; let inserted; switch (method) { case 'push': case 'unshift': inserted = args; break; case 'splice': // splice(index,deleteCount,item1,item2) inserted = args.slice(2); break; } if (inserted) {ob.observeArray(inserted);}
push、unshift、splice會為數(shù)組新增元素,對于新增的元素,也要對其進(jìn)行觀測。這里利用到了Observer中為數(shù)組添加的__ob__屬性,來直接調(diào)用ob.observeArray ,對數(shù)組中新增的元素繼續(xù)進(jìn)行觀測。
對于對象,要遍歷對象的每一個屬性,來為其添加set/get方法。如果對象的屬性依舊是對象,會對其進(jìn)行遞歸處理
function defineReactive (target, key) { let value = target[key]; // 繼續(xù)對value進(jìn)行監(jiān)聽,如果value還是對象的話,會繼續(xù)new Observer,執(zhí)行defineProperty來為其設(shè)置get/set方法 // 否則會在observe方法中什么都不做 observe(value); Object.defineProperty(target, key, { get () { console.log('get value'); return value; }, set (newValue) { if (newValue !== value) { // 新加的元素也可能是對象,繼續(xù)為新加對象的屬性設(shè)置get/set方法 observe(newValue); // 這樣寫會新將value指向一個新的值,而不會影響target[key] console.log('set value'); value = newValue; } } }); } class Observer { constructor (value) { // some code ... if (Array.isArray(value)) { // some code ... } else { this.walk(); } } walk () { for (const key in this.value) { if (this.value.hasOwnProperty(key)) { defineReactive(this.value, key); } } } // some code ... }
檢測變化的注意事項(xiàng)
我們先創(chuàng)建一個簡單的例子:
const mv = new Vue({ data () { return { arr: [1, 2, 3], person: { name: 'zs', age: 20 } } } })
對于對象,我們只是攔截了它的取值和賦值操作,添加值和刪除值并不會進(jìn)行攔截:
vm.person.school = '北大' delete vm.person.age
而對于數(shù)組,用索引修改值以及修改數(shù)組長度不會被觀測到:
vm.arr[0] = 0 vm.arr.length--
為了能處理上述的情況,Vue為用戶提供了$set和$delete方法:
$set: 為響應(yīng)式對象添加一個屬性,確保新屬性也是響應(yīng)式的,因此會觸發(fā)視圖更新
$delete: 刪除對象上的一個屬性。如果對象是響應(yīng)式的,確保刪除觸發(fā)視圖更新。
上述內(nèi)容就是怎么在Vue中對數(shù)據(jù)進(jìn)行劫持,你們學(xué)到知識或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識儲備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。