数据如何深度监视 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第2天

在做青训营的监控项目时，想实现对数组对象数据的监视，想通过Watch发现对象数组的值改变并不会触发Watch查阅网站也是完成了记录个笔记

项目是通过Vue实现的，vue的watch默认是不会监听到数组对象属性值的变化，vue的watch提供了一个deep属性

watch(
  () => tableData,
  (newValue: any) => {
   console.log(newValue)
  },
  { deep: true, immediate: true }
)

deep设为True后数组对象变化便可监视到

如何通过Js来实现深度监听

Object.defineProperty() 我们可以使用它来实现对对象属性的监听 他有三个参数分别是对象、参数名、属性描述符

在属性描述符中可以设置set和get方法 在属性修改的时候就会触发set方法我们就可以在这监视到修改的值

let data = {
  soccer: 1,
};
 let tem = data.soccer
Object.defineProperty(data, 'soccer', {
  configurable: true, 
  set: function (newValue) {
    console.log(newValue);
    tem= newValue;
  },
  get: function () {
    return tem;
  },
});

for (let i=0;i<100;i++){
    data.soccer = i;
}

这样便可以监视到对象属性的变化 Vue2的响应式原理也是利用了Object.defineProperty() 劫持数据当数据变化便对视图进行更新

我们还可以使用Proxy对对象进行代理通过设置其set方法实现监视 通过proxy不是在原来的对象上进行修改，而是通过一个新的对象对其进行代理

let data = {
  soccer: 1,
};
let proxy = new Proxy(data,{
    set(targetObj, property, value, receiver) {
       console.log(targetObj);
       console.log(value);
    }
})
for (let i=0;i<100;i++){
    proxy.soccer = i;
} 

相较于Object.defineProperty() proxy可以监视数组的变化也更加的灵活可以操作的范围很广 Object.defineProperty()就有较多的局限性

Vue3便将Vue2使用的Object.defineProperty()替换成了Proxy来实现响应式proxy可以监听整个对象更加的方便

记录一下对数据监视的笔记如有错误可以纠正一下