深入浅出 Vue 系列 数据劫持实现原理

2020-06-14 06:28:58易采站长站整理

const result = originArrayMethod.apply(this, args)
let inserted
switch (method) {
case 'push':
case 'unshift':
inserted = args
break
case 'splice':
inserted = args.slice(2)
break
}
if (inserted) {
// 对于新增的元素,继续劫持
// ob.observeArray(inserted)
}
// 通知变化
return result
}
})

最后,更新劫持数组实例的原型,在 ES6 之前,可以通过浏览器私有属性 proto 指定原型,之后,便可以采用如下方法:


Object.setPrototypeOf(arr, injackingPrototype)

顺便提一下,采用 Vue.set() 方法设置数组元素时,Vue 内部实际上是调用劫持后的 splice() 方法来触发更新。

四、总结

由上述内容可知,Vue 中的数据劫持分为两大部分:

针对 Object 类型,采用 Object.defineProperty() 方法劫持属性的读取和设置方法;
针对 Array 类型,采用原型相关的知识劫持常用的函数,从而知晓当前数组发生变化。

并且 Object.defineProperty() 方法存在以下缺陷:

每次只能设置一个具体的属性,导致需要遍历对象来设置属性,同时也导致了无法探测新增属性;
属性描述符 configurable 对其的影响是致命的。

而 ES6 中的 Proxy 可以完美的解决这些问题(目前兼容性是个大问题),这也是 Vue3.0 中的一个大动作,有兴趣的读者可以查阅相关的资料。

以上所述是小编给大家介绍的数据劫持实现原理详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持!