相信很多程序员朋友对于vue应该都并不陌生了,毕竟平日里都经常使用他来进行一些操作,但是有些朋友对vue的一些相关知识可能了解的只是一小部分,今天小编就以vue数据的代理访问作为示例来给大家具体的讲解一下,希望对大家有所帮助。
概念解析:
1) 数据代理: 通过一个对象代理对另一个对象(在前一个对象内部)中属性的操作(读/写)
2) vue 数据代理: 通过 vm 对象(即this)来代理 data 对象中所有属性的操作
3) 好处: 更方便的操作 data 中的数据
4) 基本实现流程
a. 通过 Object.defineProperty()给 vm 添加与 data 对象的属性对应的属性描述符
b. 所有添加的属性都包含 getter/setter
c. getter/setter 内部去操作 data 中对应的属性数据
疑问
不知道你在使用Vue的时候有没有想过,为什么定义在 data 对象中的属性,可以用 Vue 的实例 this 进行访问?
我们来看看源码的实现。

比如有个如下demo

也就是说当我们这样 this.message 写的时候, Vue 通过 Object.defineProperty 给 this.message 设置一层代理,实际访问的是 this._data 里的 message 属性,而 this._data 指向的对象就是我们写的 data 对象。
好了,今天给大家介绍的vue源代码里的数据之间的代理访问过程就给大家介绍到这里了,是不是很简单清晰呢?如果大家对于这方面还想了解更多内容的话也可以自行搜索一番,小编这里就不一一进行讲解了。