Vue中學到的功夫，隔山打牛大法

王興欣發表於2018-01-31
Vue

疑問

在初學Vue的時候，我發現了一個神奇的事情，在props和data裡的屬性、methods裡面的方法，居然能夠通過this.xx直接使用。

new Vue({
   data:{
       words:'hello'
   },
   created(){
       console.log(this.words); //居然可以列印出hello來
   }
});
複製程式碼

這特麼是一種武功？在下第一個不服，打算一探究竟。

Vue中學到的功夫，隔山打牛大法

偷師學藝

熟話說，知己知彼才能百戰不殆，待在下偷看一下Vue的武功祕籍，想好對策，再去上門踢館。然後當上總經理，出任CEO，迎娶白富美，走上人生的巔峰。

Object.defineProperty 是Vue中重要的組成部分，不瞭解的童鞋先檢視一下文件，Object.defineProperty()。

我把這一招稱作隔山打牛大法，果然是奇妙無窮，在下偷學了他的武功心法，為了讓更多的人學會這一招，在下演練一下低配版的隔山打牛。

function proxy (target, source){
    for(let key in source){
        Object.defineProperty(target,key,{
            enumerable: true,
            configurable: true,
            get:function() {
                return source[key];
            },
            set:function(val) {
                source[key] = val;
            }
    	});
    }
}
const father = {};
const child = {
    money:100
}
proxy(father, child);

father.money // 100
複製程式碼

招式其實很簡單，在呼叫proxy方法之後，每次去獲取father的money的時候，return的是child的money，設定的時候也是這樣的。

擴充

Vue中的Props、data、methods都是使用的這一招定義到vm上的。那麼在元件中，data必須使用函式和這貨有沒有關係呢？

Vue中學到的功夫，隔山打牛大法

其實並沒有什麼關係，但是我們可以通過proxy反推。

在構建元件例項的時候會傳入option，裡面有一系列的屬性與方法。

Vue.component('my-component',{
    template:'<span>{{ message }}</span>' ,
    data:{
        message:'hello'
    }
});
複製程式碼

每次例項化元件的時候，都會使用這個引用地址相同的data來傳入proxy中。那麼雖然有多個例項，但實際上隔山打的都是同一個牛。

如果data是一個函式，那麼就會執行函式，返回一個新的data物件，這樣隔山打牛就是不同的牛了。

data = vm._data = typeof data === 'function' ? getData(data, vm) : data || {}
複製程式碼

登門踢館

Vue中學到的功夫，隔山打牛大法
在下也學會了隔山打牛，Vue你就等死吧。（當上總經理，出任CEO，迎娶白富美，走上人生的巔峰。）

Vue：？？？

Vue中學到的功夫，隔山打牛大法

Vue：隔山打牛隻是Object.defineProperty用法的一種，雖然你知道了可以直接用this.xx來訪問屬性與方法，但是你知道我是如何做到響應式的嗎？你個辣雞。

Vue：來吧，在下不動，讓你三招。

我：（怎麼辦，不是對手啊，慌的一批）

Vue中學到的功夫，隔山打牛大法

我：我媳婦昨天出門做頭髮回來了，這次在下就放你一馬。（跑跑跑）

哎，居然不是對手，還是繼續回去修習吧。 我還是去修習那啥，他說的那個啥，Vue的響應式原力？？？

Vue響應式----資料響應式原理。

相關文章