[vueソースコード] データ初期化プロキシ関数 実装原理

はじめに

proxy()の説明では、プロキシ関数のコンテキストを理解してください。

proxy(vm, _data, key)

var vm = new Vue({
 data : {
 message: "hello vue",
 }
})

initData() 関数は、データを繰り返し処理し、データの各属性の走査に対してプロキシ処理を実行します。

vm._data = data || {};
const keys = Object.keys(data)
 let i = keys.length
 while (i--) {
 const key = keys[i]
 if (!isReserved(key)) {
 proxy(vm, `_data`, key)
 }
 }

ソースコード

const sharedPropertyDefinition = {
 enumerable: true,
 configurable: true,
 get: noop,
 set: noop
}
export function proxy (target: Object, sourceKey: string, key: string) {
 sharedPropertyDefinition.get = function proxyGetter () {
 return this[sourceKey][key]
 }
 sharedPropertyDefinition.set = function proxySetter (val) {
 this[sourceKey][key] = val
 }
 Object.defineProperty(target, key, sharedPropertyDefinition)
}