这是我参与2022首次更文挑战的第13天，活动详情查看：2022首次更文挑战

前言

大家好，我是不吃鱼d猫，今天是周末，而且天气非常好，适合出去春游，不过掘金的文章咱还是得更的，今天咱说说vue中数据代理用到的方法。

Object.defineProperty()

前提

我么现在有一个对象person

 let person = {
            name: "不吃鱼d猫",
            tall: 180,
        }

我们需要给person添加一个属性age，方法有很多种，但是我们可以用Object.defineProperty()来添加。

语法

Object.defineProperty()有三个参数，第一个参数为想要添加属性的对象，第二个是想要添加的属性名，第三个就是配置项了。

应用

我们来看上面的例子，添加一个属性

Object.defineProperty(person, 'age', {
            value: 18
        })

我们可以看到，浏览器解析的，由Object.defineProperty()方法添加上去添加上去的颜色都不一样。这表示该属性不能被遍历。我们可以来打印看看。我们可以通过keys()方法遍历一下。

  console.log(Object.keys(person));

我们对比后可以看到，age属性没有被遍历出来。而且该属性不能被修改。

如下图，我们可以看到该属性不能被删除，神奇的地方在这里。不过还是有解决方法的，修改我们Object.defineProperty()的方法的配置项。

enumerable:true 控制属性是否可以被遍历，默认值是false。
writable:true 控制属性是否可以被修改，默认值是false。
configurable:true 控制属性是否可以被删除，默认值是false。

高级配置项

其实Object.defineProperty()远不止如此 getter:当有人读取用Object.defineProperty()添加的属性时，get函数（getter）就会调用,且返回值就是该属性的值

 let person = {
            name: "不吃鱼d猫",
            tall: 180,
        }
        Object.defineProperty(person, 'age', {
            get() {
                console.log('有人读取了');
                return 18
            }
        })

我们可以看到age属性哪里的值是三个点，当我们点击后，表示读取了，将会调用getter. 当然还有setter,表示有人修改该属性时，setter函数就会被调用，且会收到修改的属性值。

  set(value) {
                console.log('有人修改了值为' + value);
            }

总结

在vue中，vue底层做了这样一个操作，将data中所有的属性都指定了getter和setter，在getter和setter内部去操作属性，然后反馈给data。

Vue数据代理用到的方法

前言

Object.defineProperty()

前提

语法

应用

高级配置项

总结