1. 首頁 > 生活百科 > >

7_vue的數據代理，雙向綁定( 二 )

生活百科


  • 7_vue的數據代理，雙向綁定

    文章插圖

7_vue的數據代理，雙向綁定

文章插圖
  • age 屬性 是有的
  • 但是 value 是多少，目前不知道（...）
  • 想知道怎么辦？點進去嘛

7_vue的數據代理，雙向綁定

文章插圖
get函數
7_vue的數據代理，雙向綁定

文章插圖
寫個代碼測試一下，打印一句話
7_vue的數據代理，雙向綁定

文章插圖

7_vue的數據代理，雙向綁定

文章插圖
看樣子是的 ， 我前面的措辭有問題
number與age進行關聯
7_vue的數據代理，雙向綁定

文章插圖
對number值進行修改
7_vue的數據代理，雙向綁定

文章插圖
那么對age修改呢？
7_vue的數據代理，雙向綁定

文章插圖
問題所在
  1. 一定是 先訪問age
  2. 再調用getter
  3. 當number的value發生改變的時候
  4. 再次訪問age，那么就重新調用了getter函數
  5. 重新調用getter ， 會返回number，而這個number是修改過的，所以這邊數據是同步了
修改age；失敗
7_vue的數據代理，雙向綁定

文章插圖
修改number，再訪問age；成功
7_vue的數據代理，雙向綁定

文章插圖
set（setter）配置項同理，既然有get ， 那么與之相輔相成的就是set
當你對age屬性進行修改的時候，set（setter）函數就被調用
且，調用的時候 ， 會收到具體修改的 值
/*** 需要傳遞一個參數value* 被調用的時候 ， 會收到具體修改的值*/set(value){// 當你對age屬性進行修改的時候，set（setter）函數就被調用// 被調用的時候，會收到具體修改的值console.log("pseron.age屬性發生修改，修改的值是",value);}測試
7_vue的數據代理，雙向綁定

文章插圖
實現雙向綁定
  1. get函數
    • 實現了 number 與 age 的綁定，number發生修改的時候，age會發生變化
    • 當 age的值發生變化的時候 ， number值不變，所以無論怎么修改，age的值 === number
  2. set函數
    • 實現了 age 與 number 的綁定，age的值發生變化的時候，number的值也會跟著變化
    • set函數會接到 age所修改的value，將value 賦值 給 number ， 完成雙向綁定

7_vue的數據代理，雙向綁定

文章插圖
測試
7_vue的數據代理，雙向綁定

文章插圖
總結通過案例
  1. number 與 person，是兩個東西
  2. 但是借助 Object.defineProperty，使二者進行了關聯
  3. person，確實是一個對象，age確實是person當中的屬性
  4. 但是值呢？你現用，我現去給你取
    • 靠誰?。?== get
    • 靠誰改？ == set
【7_vue的數據代理，雙向綁定】

推薦閱讀