首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >proxy实现Vue的数据绑定

proxy实现Vue的数据绑定

作者头像
用户3258338
发布2020-02-17 14:34:36
6580
发布2020-02-17 14:34:36
举报

嗨,各位宝宝,最近还好吗?最近我的生活和工作都有一些事情发生,不管怎样,保持内心平静就好了~

vue3.0将会通过Proxy来替换原本的Object.defineProperty来实现数据响应。so 让我们来看看Proxy是个啥?

语 法

let p = new Proxy(target, handler);

参数

target

用proxy包装的目标对象(可以是任何类型的对象,包括原生数组,函数甚至另一个代理)

ZZZhandle

一个对象,其属性是当执行一个操作时定义代理的行为的函数。 例子:

let handle = {
  get: function(target, name){
    return name in target ? target[name]:37
  }
}

let p = new Proxy({},handle);

p.a = 1
p.b = undefined;
console.log(p.a, p.b); //1 undefined
console.log('c' in p, p.c) //false

简单的数据响应

let onWatch = (obj, setBind, getLogger) =>{
  let handler = {
    get(target, property, receive){
      getLogger(target, property)
      if(typeof target[property] === 'object'
       && target[property]!== null){
         return new Proxy(target[property],handler)
       }else{
         return Reflect.get(target,property,receiver)
       }
    },
    set(target, property, receiver) {
      setBind(value, property)
      return Relect.set(target, property, value)
    }
  }
  return new Proxy(obj, handler)  
}
let obj = {a: 1}
let p = onWatch(
  obj,
  (v,property)=>{
    console.log(`监听到属性${property}改变为${v}`)
  },
  (target, property, value, receiver){
    console.log(`'${property}' = ${target[property]}`)
  }
)
p.a = 2 // 监听到属性a改变
p.a // 'a' = 2

愿我们有能力不向生活缴械投降---Lin

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-01-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 女程序员的日常 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档