vue 监听表格里的数据变化_【前端面试】监听对象数据变化的方法

最新推荐文章于 2024-08-21 18:59:25 发布

Charming-MYX

最新推荐文章于 2024-08-21 18:59:25 发布

阅读量617

点赞数

文章标签： vue 监听表格里的数据变化

本文链接：https://blog.csdn.net/weixin_30652105/article/details/112281622

版权

本文探讨了两种在Vue中监听对象数据变化的方法：一是利用ES5的getter和setter进行深度拷贝和属性监听；二是使用ES6的Proxy，创建处理对象以拦截和处理属性访问与修改。通过示例代码详细解释了这两种方法的工作原理和应用场景。

摘要由CSDN通过智能技术生成

本篇文章会介绍两种监听对象数据变化的方法。

一、利用 ES5 的 getter 和 setter

侦听一个对象的属性有无变化时，首先，我们可以通过深拷贝的方法作为数据缓存：

举例：

        let obj={
    
            name:''
        }
        let newObj = JSON.parse(JSON.stringify(obj));

set 时，通过 Object.defineProperty，把传进来的 val 赋给 newObj 的 name 属性，get 时，把 newObj 里面缓存的值取出。

        Object.defineProperty(obj,'name',{
    
            get(){
    
                console.log(newObj.name)
                return newObj.name;
            },
            set(val){
    
                if(val===newObj)return;
                console.log('new name is',val);
                newObj.name=val;
            }
        })
        obj.name='Fat Trump';

上面这种情况的输出结果为：