vue 数据代理和数据监测

桃扇骨 2022-09-09 09:16 152阅读 0赞

### vue 数据代理和数据监测 ###

**数据代理**和**数据监测**是vue 里面一个很重要的概念，但是他们在vue中扮演什么角色，了解这些前得先了解 **数据代理**和**数据监测**的概念。

vue中双向绑定 v-model和v-bind 指令都能将模型数据反应到页面，而且每当模型页面数据改变时都能反馈到页面，v-model页面上的数据改变也能反映到模型 这里面就包含着 **数据代理**和**数据监测** 的使用。

**1.数据代理：**

通过一个对象去对另一个对象属进行操作

实现原理是通过 ES6语法中Object对象的defineProperties方法实现的。

Object.defineProperty(obj, prop, desc)

obj 需要定义属性的当前对象  
prop 当前需要定义的属性名  
desc 属性描述符

因为主要是讲数据代理和数据监测 所以主要讲下desc 里面的getter和setter配置项，其他的用法就省略了。

运行结果：

get
    lisi
    set
    get
    111

上面的案例实现了，当访问obj的name属性就触发get方法返回objName的值，给obj的name属性复制就触发set方法将值赋给objName，这样就实现了通过obj的name属性去操作objName对象，这就是**数据代理**，而当数据发生改变被set操作监测到更新值并重新渲染页面时这就是 **数据监测**。

定义一个简单的vue对象去看vue中data属性里面的值

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXVfTXXmmK_kuIDlj6rlsI_nmb0_size_16_color_FFFFFF_t_70_g_se_x_16]  
可以看到 vue为data属性里面的name和id都生成了get，set方法。

通过生成的 name，id属性去代理data中的name，id属性。

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXVfTXXmmK_kuIDlj6rlsI_nmb0_size_16_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/e821b81d4d914fa7997a92e8dec1af70.png