typescript監(jiān)聽屬性變化，核心在于使用響應式編程的思想。 直接使用object.defineproperty或proxy來實現，這取決于你想要監(jiān)聽的對象類型以及你的需求。

讓我們從一個簡單的例子開始。假設你有一個對象，包含一個需要監(jiān)聽變化的屬性：

interface User {
  name: string;
}

let user: User = { name: 'John Doe' };

登錄后復制

如果你想在name屬性改變時得到通知，Object.defineProperty是一個不錯的選擇，尤其是在處理已有對象時：

Object.defineProperty(user, 'name', {
  set: (newValue) => {
    console.log('Name changed from', user.name, 'to', newValue);
    user.name = newValue; // 關鍵：賦值操作必須在setter內部進行
  },
  get: () => user.name
});

user.name = 'Jane Doe'; // 控制臺會輸出變化信息

登錄后復制

這里，我們重定義了name屬性的setter方法。每次user.name被賦值時，setter都會被執(zhí)行，打印出變化信息。 注意，賦值操作必須在setter內部進行，否則監(jiān)聽機制失效。 我曾經在項目中因為忘記這一點，debug了半天，最終才發(fā)現問題所在。

然而，Object.defineProperty只能監(jiān)聽已有的屬性。 如果你需要監(jiān)聽一個新屬性的添加，或者需要更靈活的處理，Proxy則更勝一籌：

const handler = {
  set: (target, prop, value) => {
    console.log(`Property '${prop}' changed to '${value}'`);
    target[prop] = value;
    return true;
  }
};

let userProxy = new Proxy({ name: 'Peter Pan' }, handler);

userProxy.name = 'Wendy Darling'; // 控制臺會輸出變化信息
userProxy.age = 30; // 控制臺會輸出新屬性添加的信息

登錄后復制

Proxy能夠攔截所有對對象的訪問，包括屬性的讀取、寫入、刪除等操作，提供了更全面的監(jiān)控能力。 我曾經用Proxy實現了一個數據狀態(tài)管理工具，極大地簡化了組件間的數據同步和更新邏輯，提升了代碼的可維護性。 當然，Proxy的兼容性需要考慮，在一些老舊瀏覽器環(huán)境中可能需要做polyfill處理。

選擇Object.defineProperty還是Proxy，取決于你的具體場景。 對于已有的對象，且只需要監(jiān)聽特定屬性，Object.defineProperty較為簡潔；而對于需要監(jiān)聽所有屬性變化，或者需要更靈活的控制，Proxy則更強大。 記住，實際應用中，需要根據項目需求選擇合適的方案，并注意處理潛在的兼容性問題。 仔細閱讀文檔，并進行充分的測試，才能確保你的監(jiān)聽機制可靠有效。

路由網(www.lu-you.com)您可以查閱其它相關文章！