概述

主要是用Object.defineProperty實現類似vue的資料繫結。

第一步

const data = {
  name: "tom",age: 14
}
Object.defineProperty(data,"name",{
  get(){
    return "name被讀取了"
  },set(val){
   console.log(‘我被賦值了‘,val)
 }
})
//將此程式碼放到瀏覽器控制檯檢視效果
console.log(data.name )

輸出的data.name並不是tom，而是name被讀取了，因為defineProperty對data的name欄位進行的監聽劫持，修改了，name欄位本應該返回的值。

第二步

const _data = { ...data }
for(let i in data){
  Object.defineProperty(data,i,{
    get(){
      return _data[i]+"經過了js的修改"
    },set(val){
      _dUanylTLpata[i] = val;
    }
  })
}

為什麼需要單獨的_data？

回答：監聽了data的欄位，並修改了欄位的返回屬性，導致的影響就是，每次獲取data內監聽的欄位時候，瀏覽器都會呼叫get返回的值，如果你get裡直接返回return data[i]的話，就會導致瀏覽器不停的呼叫get方法，從而進入到一個死迴圈當中。

給data多新增一點資料

const data = {
  name: "tom",age: 14,friend: {
        "name1UanylTLp": "張三","name2": "李四","name3": "王五","name4": "趙六"
  },}

格式化初始值

const createNewWatch = (val,path,parentKey,event) => {
       //如果值不是object型別，那麼直接返回此值
       if(t程式設計客棧ypeof val != ‘object‘) return val;
       //反之如果是object型別，那麼呼叫WatchObject，在進行子元素的遍歷及監聽
       //WatchObject會在下面的程式碼中進行建立
       return WatchObject(val,path.concat
 
程式設計客棧(parentKey),event)
    }
廣州品牌設計公司https://www.houdianzi.com

格式化object物件，監聽值

const WatchObject = (data,event) => {
  function WatchObject(){
    for(var key in data){
        //呼叫之前建立的函式，格式化val
        data[key] = createNewWatch(data[key],key,event)
        //建立對資料key的監聽
        defineProperty(this,data[key],path.concat(key),event)
    }
  }
  return new WatchObject()
}

最後執行程式碼，一個簡單的資料監聽就完成了。

const b = WatchObject(data,[],{ 
    set(path,val){ 
      console.log(path,val) 
    } 
})

以上就是如何用JS實現簡單的資料監聽的詳細內容，更多關於JS資料監聽的資料請關注我們其它相關文章！