一、前言

在"模擬Vue之?dāng)?shù)據(jù)驅(qū)動2"中,我們實(shí)現(xiàn)了個(gè)Observer構(gòu)造函數(shù),通過它可以達(dá)到監(jiān)聽已有數(shù)據(jù)data中的所有屬性。

但,倘若我們想在某個(gè)對象中,新增某個(gè)屬性呢?

如下:

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

那么豈不是,新增的infor屬性,以及它的對象屬性,沒有得到監(jiān)聽。

此時(shí),應(yīng)該怎么處理呢?

通過走讀Vue源碼,發(fā)現(xiàn)他是采用另增屬性方法$set實(shí)現(xiàn)的。

就是說,如果我們采用常規(guī)方法為對象增加屬性(如上),我們沒法得知并監(jiān)控它,所以,我們?yōu)槊總€(gè)對象擴(kuò)展一個(gè)$set方法,用于另增屬性使用,即可,如下:

data.user.$set('infor', {msg: 'happy'});

好了,下面,我們就一同實(shí)現(xiàn)這個(gè)$set方法吧。

二、$set方法實(shí)現(xiàn)

首先,我們得創(chuàng)建一個(gè)恒定extendObj對象,用于將$set方法綁定在其中。

你可能會想,為什么我們需要一個(gè)extendObj對象呢?直接將$set函數(shù)賦值給每個(gè)需要監(jiān)聽的對象不就完了么?

是的,這樣也可以,但是隨著需求增長,倘若我們又想為每個(gè)監(jiān)聽對象擴(kuò)展其他方法呢?難道又要去Observer里面為對象,一一賦值?

so,創(chuàng)建恒定extendObj對象,如下:

const extendObj = {};

因?yàn)?,我們?set綁定到extendObj中,且讓$set為不可枚舉型,所以會用到Object.defineProperty,固將其提取出來,作為一個(gè)

網(wǎng)友評論