1. 首頁 > 生活百科 > >

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

生活百科

回顧 object.defineProperty() 方法
區別defineProperty == 給對象定義屬性用的
需要傳遞三個基本參數

  1. 需要定義屬性的對象名
  2. 你要定義的屬性叫什么名字（比如給person這個實體添加一個age屬性）
  3. 配置項（對象類型的參數，里面存放鍵值對）

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

文章插圖
<script>// 創建一個對象，該對象有兩個基本屬性var person = {name:"張三",sex:"男"}// 為person對象添加屬性// 1、給那個對象添加？// 2、添加的屬性名是什么？// 3、這個屬性的基礎配置項（對象類型，鍵值對形式）Object.defineProperty(person,"age",{value:18, // 該屬性的值是})</script>需求1
  • 給 對象person，添加一個屬性age ， 有幾種方式？
  • 三種
    1. 直接在 person對象當中添加屬性；該屬性值可以修改

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

        文章插圖
    2. 通過 .屬性；對其設置；該屬性值可以修改

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

        文章插圖
    3. 通過 Object.finedProperty()進行添加；該屬性值不可枚舉（不可修改） 默認情況下

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

        文章插圖
不可枚舉性通過 defineProperty添加的屬性
7_vue的數據代理，雙向綁定

文章插圖
如果不設置配置項 ， 那么該屬性是不可枚舉的；在控制臺中可以看到 ， 顏色變淺了
7_vue的數據代理，雙向綁定

文章插圖
該屬性不參與遍歷 ， 我們可以測試下
7_vue的數據代理，雙向綁定

文章插圖
基本配置項value最開始配置的
7_vue的數據代理，雙向綁定

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

文章插圖
Object.defineProperty(person,"age",{value:18, // 該屬性的值是enumerable:true, // 該配置項控制添加的屬性是否參與枚舉})writable設置屬性是否可以被修改
7_vue的數據代理，雙向綁定

文章插圖
configurable控制屬性是否可以被刪除
沒有通過函數添加age屬性的person對象
7_vue的數據代理，雙向綁定

文章插圖
通過函數添加age屬性的person對象刪除屬性
7_vue的數據代理，雙向綁定

文章插圖
設置配置項刪除掉age屬性
7_vue的數據代理，雙向綁定

文章插圖
需求2
  • 準備一個變量 number，值為18
  • person當中有一個age屬性，這個屬性的value 是 number（不是手寫的18）

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

文章插圖
問題所在
  • 這個變量的值可能會發生改變，如果呢？

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

      文章插圖
  • 修改number ， person對象當中的age值并沒有發生改變
  • 同理，修改age，number也不會發生改變
這倆好像有點關系，但好像又沒有關系，就js代碼加載的時候這倆自頂而下有了這一層關系，但也僅僅只有這一層
7_vue的數據代理，雙向綁定

文章插圖
那怎么完成這個需求呢？
7_vue的數據代理，雙向綁定

文章插圖
請看下方的高級配置項
高級配置項get(getter)配置項
7_vue的數據代理，雙向綁定

文章插圖
解析
  1. 它的數據類型是一個對象
  2. 當 有人讀取 person當中的age屬性的時候，get就會被調用
  3. 且get的返回值就是age 的 value值
  4. 自定義get（getter函數）的時候，不能再使用基礎配置了

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

      文章插圖
那 返回一個 waves 字符串吧
7_vue的數據代理，雙向綁定

文章插圖
三個點兒
  1. invoke：映射
  2. property：屬性
  3. getter：get配置項 == 函數