Object.defineProperty 虽然已经能够实现双向绑定了,但是他还是有缺陷的。

  1. 只能对属性进行数据劫持,所以需要深度遍历整个对象
  2. 对于数组不能监听到数据的变化

虽然 Vue 中确实能检测到数组数据的变化,但是其实是使用了 hack 的办法,并且也是有缺陷的。

const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)
// hack 以下几个函数
const methodsToPatch = [
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
]
methodsToPatch.forEach(function(method) {
// 获得原生函数
const original = arrayProto[method]
def(arrayMethods, method, function mutator(...args) {
// 调用原生函数
const result = original.apply(this, args)
const ob = this.__ob__
let inserted
switch (method) {
case 'push':
case 'unshift':
inserted = args
break
case 'splice':
inserted = args.slice(2)
break
}
if (inserted) ob.observeArray(inserted)
// 触发更新
ob.dep.notify()
return result
})
})

反观 Proxy 就没以上的问题,原生支持监听数组变化,并且可以直接对整个对象进行拦截,所以 Vue 也将在下个大版本中使用 Proxy 替换 Object.defineProperty

let onWatch = (obj, setBind, getLogger) => {
let handler = {
get(target, property, receiver) {
getLogger(target, property)
return Reflect.get(target, property, receiver)
},
set(target, property, value, receiver) {
setBind(value)
return Reflect.set(target, property, value)
}
}
return new Proxy(obj, handler)
} let obj = { a: 1 }
let value
let p = onWatch(
obj,
v => {
value = v
},
(target, property) => {
console.log(`Get '${property}' = ${target[property]}`)
}
)
p.a = 2 // bind `value` to `2`
p.a // -> Get 'a' = 2

vue Object.defineProperty Proxy 数据双向绑定的更多相关文章

  1. [vue]通过watch实现数据双向绑定

    modal:单向绑定 <head> <meta charset="UTF-8"> <title>test</title> <s ...

  2. Vue.js学习 Item4 -- 数据双向绑定

    Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. ...

  3. vue中v-model的数据双向绑定(重要)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. [vue]实现父子组件数据双向绑定

    参考: http://www.cnblogs.com/xxcanghai/p/6124699.html <!DOCTYPE html> <html lang="en&quo ...

  5. 真正的原生JS数据双向绑定(实时同步)

    真正的原生JS数据双向绑定(实时同步) 接触过vue之后我感觉数据双向绑定实在是太好用了,然后就想着到底是什么原理,今天在简书上看到了一位老师的文章 js实现数据双向绑定 然后写出了我自己的代码 wi ...

  6. 【Vue】-- 数据双向绑定的原理 --Object.defineProperty()

    Object.defineProperty()方法被许多现代前端框架(如Vue.js,React.js)用于数据双向绑定的实现,当我们在框架Model层设置data时,框架将会通过Object.def ...

  7. Vue的数据双向绑定和Object.defineProperty()

    Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...

  8. 深入理解Proxy 及 使用Proxy实现vue数据双向绑定

    阅读目录 1.什么是Proxy?它的作用是? 2.get(target, propKey, receiver) 3.set(target, propKey, value, receiver) 4.ha ...

  9. 深入理解 Object.defineProperty 及实现数据双向绑定

    Object.defineProperty() 和 Proxy 对象,都可以用来对数据的劫持操作.何为数据劫持呢?就是在我们访问或者修改某个对象的某个属性的时候,通过一段代码进行拦截行为,然后进行额外 ...

随机推荐

  1. Ext.Js核心函数( 三)

    ExtJs 核心函数简介 1.ExtJs提供的常用函数2.get.fly.getCmp.getDom.getBody.getDoc3.query函数和select函数4.encode函数和decode ...

  2. mybatis中的查询语句in用法的相关问题

    在开发的时候,mybatisl中使用in的时候会遇到一些问题,如果我们传的参数是String类型,以“,”来进行隔开的,例如:参数是0,1,2字符串,mybatis中的语句如下 <select ...

  3. spring配置redis注解缓存

    前几天在spring整合Redis的时候使用了手动的方式,也就是可以手动的向redis添加缓存与清除缓存,参考:http://www.cnblogs.com/qlqwjy/p/8562703.html ...

  4. #1 // BZOJ 4361 isn

    Description 给出一个长度为n的序列A(A1,A2...AN).如果序列A不是非降的,你必须从中删去一个数, 这一操作,直到A非降为止.求有多少种不同的操作方案,答案模10^9+7.   题 ...

  5. [NOI2012]骑行川藏(未完成)

    题解: 满分又是拉格朗日啥的 以后再学 自己对于n=2猜了个三分 然后对拍了一下发现是对的

  6. java:冒泡排序、选择排序、插入排序实现

    整数排序 给一组整数,按照升序排序,使用选择排序,冒泡排序,插入排序或者任何 O(n2) 的排序算法. 样例 样例 1: 输入: [3, 2, 1, 4, 5] 输出: [1, 2, 3, 4, 5] ...

  7. 【spring基础】spring声明式事务详解

    一.spring声明式事务 1.1 spring的事务管理器 spring没有直接管理事务,而是将管理事务的责任委托给JTA或相应的持久性机制所提供的某个特定平台的事务实现.spring容器负责事物的 ...

  8. 6-1 并行程序模拟 uva210

    用到了 deque 和queue 操作说明: queue  qu:      qu.push(x); int d=qu.front(); qu.pop();        和栈一样只有push和pop ...

  9. bootstrap table使用总结

    使用bootstrap table可以很方便的开发后台表格,对数据进行异步更新,编辑.下面就来介绍一下bootstrap table的详细使用方法: 因为之前在官网也找了很久的教程,源码感觉隐藏的比较 ...

  10. metasploit常见服务的漏点扫描模块

    弱点扫描 根据信息收集结果搜索漏洞利用模块 结合外部漏洞扫描系统对大IP地址段进行批量扫描 可以考虑对单个ip,单个服务进行扫描 NVC 密码破解端口:5900use auxiliary/scanne ...