7_vue的数据代理，双向绑定( 二 ) _生活百科

文章插图

文章插图

age 属性是有的
但是 value 是多少，目前不知道（...）
想知道怎么办？点进去嘛

文章插图
get函数

文章插图
写个代码测试一下，打印一句话

文章插图

文章插图
看样子是的，我前面的措辞有问题
number与age进行关联

文章插图
对number值进行修改

文章插图
那么对age修改呢？

文章插图
问题所在

一定是先访问age
再调用getter
当number的value发生改变的时候
再次访问age，那么就重新调用了getter函数
重新调用getter ，会返回number，而这个number是修改过的，所以这边数据是同步了

修改age；失败

文章插图
修改number，再访问age；成功

文章插图
set（setter）配置项同理，既然有get ，那么与之相辅相成的就是set
当你对age属性进行修改的时候，set（setter）函数就被调用
且，调用的时候，会收到具体修改的值

/*** 需要传递一个参数value* 被调用的时候 ， 会收到具体修改的值*/set(value){// 当你对age属性进行修改的时候，set（setter）函数就被调用// 被调用的时候，会收到具体修改的值console.log("pseron.age属性发生修改，修改的值是",value);}

测试

文章插图
实现双向绑定

get函数
- 实现了 number 与 age 的绑定，number发生修改的时候，age会发生变化
- 当 age的值发生变化的时候， number值不变，所以无论怎么修改，age的值 === number
set函数
- 实现了 age 与 number 的绑定，age的值发生变化的时候，number的值也会跟着变化
- set函数会接到 age所修改的value，将value 赋值给 number ，完成双向绑定