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. VEMap.DeleteAllShapeLayers 方法

    来源:https://msdn.microsoft.com/zh-cn/library/bb412514.aspx <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  2. HDU 1851 (N个BASH博弈子游戏)

    题意:n堆石子,分别有M1,M2,·······,Mn个石子,各堆分别最多取L1,L2,·····Ln个石头,两个人分别取,一次只能从一堆中取,取走最后一个石子的人获胜.后选的人获胜输出Yes,否则输 ...

  3. [转] 通过jQuery Ajax使用FormData对象上传文件

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...

  4. Jmeter如何提取响应头部的JSESSIONID

    近期有柠檬班的学生找到华华,问了一个问题,就是利用Jmeter做接口测试的时候,如何提取头部的JSESSIONID然后传递到下一个请求,继续完成当前用户的请求. 其实,关于这个问题有三种种解决方法: ...

  5. BZOJ1845 [Cqoi2005] 三角形面积并 扫描线 计算几何

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1845 题意概括 给出n个三角形,求其面积并. 题解 有一个很经典的扫描线题目:矩形面积并.那个比较 ...

  6. Immediate Decodability HDU1305

    类似phonelist  一次ac 判断失败主要有两个要点 1. 是否包含了某段的结尾结点   说明某段被此段包含 2.此段的结尾结点是否为某段的痕迹   说明此段被包含 #include<bi ...

  7. Nightmare HDU1072

    非常标准的BFS 第一次写错了很多 1.到达4时设置为墙就好了  避免了死循环 2.不用开d数组   在结构体里面就行了 3.结构体初始化函数的写法: Node(int x=0,int y=0,int ...

  8. VUE 2.x SEO 优化问题 vue-meta-info && prerender-spa-plugin 配合使用

    VUE 2.x  SEO  优化问题,以及预渲染问题 1.新建项目可以采用nuxt.js , 配置meta.以及预渲染 都很方便,官网文档都很详细: 2.对于已有项目: vue-meta-info & ...

  9. ASP.net MVC把Html Table导出Excel

    [HttpPost] public ActionResult ExportExcel(FormCollection form) { string strHtml = form["hHtml& ...

  10. Web大前端面试题-Day12

    1.前端需要注意哪些SEO? 合理的title.description.keywords: 搜索对着三项的权重逐个减小, title值强调重点即可, 重要关键词出现不要超过2次, 而且要靠前, 不同页 ...