美文网首页
代理data中的属性

代理data中的属性

作者: JX灬君 | 来源:发表于2021-08-17 00:31 被阅读0次

将data中所有属性代理到vm上

arr:{a:1,b:2}
实现vm._data.arr = vm.arr = {a:1,b:2}

  • 遍历data所有数据,调用代理函数
//将data中的属性代理到vm  上
for(let key in data){
    proxy(vm,"_data",key)
}
  • 代理函数proxy
function proxy(vm,data,key){
  // 将key代理到vm的属性上,实现vm._data.arr = vm.arr
  Object.defineProperty(vm,key{
    get(){
        return vm[data][key]
     },
     set(newValue){
        vm[data][key] = newValue
      }
  })
}

相关文章

  • 代理data中的属性

    将data中所有属性代理到vm上 arr:{a:1,b:2}实现vm._data.arr = vm.arr = {...

  • Vue中的data属性

    Vue 中的data Vue实例会代理data对象的属性, vm.$data.a相等于vm.a 以-和$开头的属性...

  • 5.Vue中computed实现原理

    1.初始化 data 和 computed,分别代理其 set 和 get 方法,对 data 中的所有属性生成唯...

  • Vue.js 1.0 Official Guide Note

    Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...

  • Vue实例

    属性与方法: 每个 Vue 实例都会代理其data对象里所有的属性: 注意只有这些被代理的属性是响应的,也就是说值...

  • 01_双向数据绑定原理

    双向数据绑定原理:1)Vue实例上的所有data属性都会被Vue实例代理,而且是严格相等2)这些data属性在Vu...

  • vue 中script 标签 有哪些属性 (vue实例有哪些属性

    <1>数据访问 (1) $data: vue实例观察的数据对象,Vue实例代理了对其data对象属性的访问 (2)...

  • Vue 构建单页应用 2

    绑定属性 v-bind:属性="data中定义的数据" v-bind:属性="data" 可以简写为 :属性="d...

  • $

    除了 data 属性, Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $,以便与代理的 da...

  • vue学习笔记

    Vue学习笔记 Vue初始化对象 data和methods里面的属性都是Vue这个实例对象的代理属性,例:vm.m...

网友评论

      本文标题:代理data中的属性

      本文链接:https://www.haomeiwen.com/subject/xthbbltx.html