DefineProperty & Vue2

Vue 使用發布訂閱模式達到監聽數據效果

在使用Vue3 composition API 時，會碰到很多proxy，在深入了解之前，先來回顧一下Vue2是怎麼達到數據監聽效果，這就要來深入了解一下JS的defineProperty。

Vue2利用defineProperty的get & set進行數據攔截
，但因為有諸多限制，Vue3改成以Proxy來包裝。

一起來看看吧！
也在為之後進入Vue做準備囉！

環遊非洲第05天：非洲101 之Q

猜猜非洲的平均年齡是幾歲？(順帶猜一下台灣、日本、美國的平均年齡吧！)
A. 16-25歲
B. 26-35歲
C. 36-45歲
D. 46-55歲

啥是DefineProperty

defineProperty用來新增或修改物件的屬性
來看defineProperty的用法

//1.Object-->目標對象
//2.Property-->要改變的屬性
//3.Descriptor-->你想要屬性幹嘛，有點像Option，可以定義或是修改屬性
defineProperty(object, prop, descriptor)

Vue 使用場景: 監聽物件

⚠️一般情況下，我們無法立即知道物件的屬性是不是被讀取或修改

let myObject = {
    name: "Nigeria"
}
console.log(myObject.name); //我們不知道物件被讀取了
myObject.name = "South Africa" //我們不知道物件屬性的值被修改了

(引用修改於：使用object.defineProperty()方法监听属性变化)

✅️使用defineProperty來監聽物件

const myObject = {}

let country = "Nigeria";
Object.defineProperty(myObject, "name", {
  get() { 
    console.log("有人讀取了");
    return country; 
  },
  set(newValue) { country = newValue; },
  enumerable: true,
  configurable: true
});

console.log(country.name); //return "Nigeria" && console log "有人讀取了"
myObject.name = "South Africa";
console.log(country.name) //return "South Africa" && console log "有人讀取了"

DefineProperty的限制

實際操作哪有一個物件那麼簡單!

想像一下下面情況, 和用defineProperty的結果

1.有多Key-->要遍歷所有對象，很麻煩

2.Object的刪除和新增屬性-->無法監聽

3.Array添加數據或是移除(push & shift)-->無法監聽

來看看1 & 2例子:

let myObject = {
    name: "Nigeria",
    flagCode: "NG",
}

//1.有多Key-->要遍歷所有對象，很麻煩
function addDefineProperty(obj, key, val){
    Object.defineProperty(myObject, key, {
        get() {
            console.log("有人讀取了");
            return val;
        },
        set(newValue) { val = newValue; },
        enumerable: true,
        configurable: true
    });
}

Object.keys(myObject).forEach(key=>{
    addDefineProperty(myObject, key, myObject[key])
})

//2.Object的刪除和新增屬性-->無法監聽
myObject.population = "206,000,000"
delete myObject.flagCode

下一篇在看Proxy如何解決這些問題之前，
先來看看和Proxy搭配的Reflect~~

環遊非洲第05天：非洲101 之A

揭曉答案之前先來看看其他國家的平均年齡(我直接google然後給第一個答案唷)
美國 38y (比我想像中的還要老，但也許沒有移民的話，平均會再高一點？)
日本 48y (恩...預料之中)
台灣 42y (居然比我想像中的還要老!!)
然後是媒體喜歡說的東南亞新興市場
越南 29.7y
印尼 32.5y
真的是滿年經的！

恩，非洲呢
19.7y
不到20歲，你相信嗎？
這邊擁有大量充沛的年輕人和勞動力，
後面代表了驚人的消費力和潛力。
非洲是各國積極想要布局的市場、也是下一個重點戰場。
想要再多了解一點非洲，就繼續看下去吧~

參考

• 使用object.defineProperty()方法监听属性变化
• Object.defineProperty和Proxy详细解析
• 面试官：Vue3.0里为什么要用 Proxy API 替代 defineProperty API ？
• DefineProperty in MDN
• 不只懂 Vue 語法：Vue 3 如何使用 Proxy 實現響應式（Reactivity）？
• Proxy 用法詳解