vue中data的访问原理

在vue规范中data里定义的数据xx,可以直接通过this.xx直接访问。这是有原因的,下面截取部分源码

const sharedPropertyDefinition = {
  enumerable: true,
  configurable: true,
  get: null,
  set: null
}
function proxy (target, sourceKey, key) {
  sharedPropertyDefinition.get = function proxyGetter () {
    console.log(this)
    return this[sourceKey][key]
  }
  sharedPropertyDefinition.set = function proxySetter (val) {
    this[sourceKey][key] = val
  }
  Object.defineProperty(target, key, sharedPropertyDefinition)
}
// 以下为仿照
function vue() {
    this._data = {
        aa: 'aaa',
        bb: 'bb'
    }
}
const vm = new vue()
const keys = Object.keys(vm._data)
let i = keys.length
while(i--) {
    const key = keys[i]
    proxy(vm, '_data', key)
}
vm.aa = 'a-a'
console.log(vm.aa) // 打印结果为a-a

以访问aa为例子,上面的代码其实写成下面的形式也是一样的

const sharedPropertyDefinition = {
  enumerable: true,
  configurable: true,
  get: function proxyGetter () {
    return this['_data']['aa']
  },
  set:function proxySetter (val) {
    return this['_data']['aa'] =val
  }
}
function vue() {
    this._data = {
        aa: 'aaa',
        bb: 'bb'
    }
}
const vm = new vue()
  // 访问aa的时候就会走proxyGetter,拿到_data中的aa
Object.defineProperty(vm, 'aa', sharedPropertyDefinition)
vm.aa = 'a-a'  // 为aa赋值时,就会走proxyGetter
//上图的proxy函数,其实是循环data中的变量,反复通过defineProperty为vm定义属性
console.log(vm.aa) // 结果为a-a
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这个问题是在下在做一个 Vue 项目中遇到的实际场景,这里记录一下我遇到问题之后的思考和最后怎么解决的(老年程序员...
    前端js阅读 707评论 0 0
  • ## 经典bug:1.模板引擎的渲染## 难点:### 0.vue总结#### 指令:```jsVue.direc...
    x_ng阅读 313评论 0 0
  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 2,142评论 0 2
  • 前言 使用Vue在日常开发中会频繁接触和使用生命周期,在官方文档中是这么解释生命周期的: 每个 Vue 实例在被创...
    心_c2a2阅读 2,304评论 1 8
  • 物有本末,事有终始,知所先后,则近道矣 ---《大学》 在分析Vue初始化之前,我们先看看Vue源码的目录结构:...
    海洋之木阅读 8,102评论 13 46