Vue 的数据代理与数据劫持

数据劫持:通过Object.defineProperty()

图片来源:尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili

Vue 的数据代理与数据劫持

想访问一个vm实例的data里面的属性,例如data里面有name,address两个属性,如果没有数据代理,我们就要写{{_data.name}},{{_data.address}}。但Vue可以在div 里面直接写{{name}},{{address}},也就是说,Vue通过Object.defineProperty()里面的getter函数把原本在"_data"里面的属性劫持到了外面一层"data"里面,使我们可以通过{{name}}{{address}}读到name,adrress,同理,修改的时候通过Object.defineProperty()里面的setter函数。

Vue 的数据代理与数据劫持

 

上一篇:defineProperty 和 Proxy 的区别


下一篇:Vue响应式数据原理