为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)


Posted in Javascript onOctober 14, 2019

导 读

vue3.0中,响应式数据部分弃用了 Object.defineProperty ,使用 Proxy 来代替它。本文将主要通过以下方面来分析为什么vue选择弃用 Object.defineProperty

  • Object.defineProperty 真的无法监测数组下标的变化吗?
  • 分析vue2.x中对数组 Observe 部分源码
  • 对比 Object.definePropertyProxy

一、无法监控到数组下标的变化?

在一些技术博客上看到过这样一种说法,认为 Object.defineProperty 有一个缺陷是无法监听数组变化:

无法监控到数组下标的变化,导致直接通过数组的下标给数组设置值,不能实时响应。所以vue才设置了7个变异数组( pushpopshiftunshiftsplicesortreverse )的 hack 方法来解决问题。

Object.defineProperty 的第一个缺陷,无法监听数组变化。 然而Vue的文档提到了Vue是可以检测到数组变化的,但是只有以下八种方法, vm.items[indexOfItem] = newValue 这种是无法检测的。

这种说法是有问题的,事实上, Object.defineProperty 本身是可以监控到数组下标的变化的,只是在 Vue 的实现中,从性能/体验的性价比考虑,放弃了这个特性。

下面我们通过一个例子来为 Object.defineProperty 正名:

function defineReactive(data, key, value) {
 Object.defineProperty(data, key, {
 enumerable: true,
 configurable: true,
 get: function defineGet() {
 console.log(`get key: ${key} value: ${value}`)
 return value
 },
 set: function defineSet(newVal) {
 console.log(`set key: ${key} value: ${newVal}`)
 value = newVal
 }
 })
}

function observe(data) {
 Object.keys(data).forEach(function(key) {
 defineReactive(data, key, data[key])
 })
}

let arr = [1, 2, 3]
observe(arr)

上面代码对数组arr的每个属性通过 Object.defineProperty 进行劫持,下面我们对数组arr进行操作,看看哪些行为会触发数组的 gettersetter 方法。

1. 通过下标获取某个元素和修改某个元素的值

为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)

可以看到,通过下标获取某个元素会触发 getter 方法, 设置某个值会触发 setter

方法。

接下来,我们再试一下数组的一些操作方法,看看是否会触发。

2. 数组的 push 方法

为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)

push 并未触发 settergetter 方法,数组的下标可以看做是对象中的 key ,这里 push 之后相当于增加了下索引为3的元素,但是并未对新的下标进行 observe ,所以不会触发。

3. 数组的 unshift 方法

为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)

我擦,发生了什么?

unshift 操作会导致原来索引为0,1,2,3的值发生变化,这就需要将原来索引为0,1,2,3的值取出来,然后重新赋值,所以取值的过程触发了 getter ,赋值时触发了 setter

下面我们尝试通过索引获取一下对应的元素:

为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)

只有索引为0,1,2的属性才会触发 getter

这里我们可以对比对象来看,arr数组初始值为[1, 2, 3],即只对索引为0,1,2执行了 observe 方法,所以无论后来数组的长度发生怎样的变化,依然只有索引为0,1,2的元素发生变化才会触发,其他的新增索引,就相当于对象中新增的属性,需要再手动 observe 才可以。

4. 数组的 pop 方法

为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)

当移除的元素为引用为2的元素时,会触发 getter

为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)

删除了索引为2的元素后,再去修改或获取它的值时,不会再触发 settergetter

这和对象的处理是同样的,数组的索引被删除后,就相当于对象的属性被删除一样,不会再去触发 observe

到这里,我们可以简单的总结一下结论。

Object.defineProperty 在数组中的表现和在对象中的表现是一致的,数组的索引就可以看做是对象中的 key

  • 通过索引访问或设置对应元素的值时,可以触发 gettersetter 方法
  • 通过 pushunshift 会增加索引,对于新增加的属性,需要再手动初始化才能被 observe
  • 通过 popshift 删除元素,会删除并更新索引,也会触发 settergetter 方法。

所以, Object.defineProperty 是有监控数组下标变化的能力的,只是vue2.x放弃了这个特性。

二、vue对数组的observe做了哪些处理?

vue的 Observer 类定义在 core/observer/index.js 中。

为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)

可以看到,vue的 Observer 对数组做了单独的处理。

为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)

hasProto 是判断数组的实例是否有 __proto__ 属性,如果有 __proto__ 属性就会执行 protoAugment 方法,将 arrayMethods 重写到原型上。 hasProto 定义如下。

为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)

arrayMethods 是对数组的方法进行重写,定义在 core/observer/array.js 中, 下面是这部分源码的分析。

/*
 * not type checking this file because flow doesn't play well with
 * dynamically accessing methods on Array prototype
 */

import { def } from '../util/index'

// 复制数组构造函数的原型,Array.prototype也是一个数组。
const arrayProto = Array.prototype
// 创建对象,对象的__proto__指向arrayProto,所以arrayMethods的__proto__包含数组的所有方法。
export const arrayMethods = Object.create(arrayProto)

// 下面的数组是要进行重写的方法
const methodsToPatch = [
 'push',
 'pop',
 'shift',
 'unshift',
 'splice',
 'sort',
 'reverse'
]

/**
 * Intercept mutating methods and emit events
 */
// 遍历methodsToPatch数组,对其中的方法进行重写
methodsToPatch.forEach(function (method) {
 // cache original method
 const original = arrayProto[method]
 // def方法定义在lang.js文件中,是通过object.defineProperty对属性进行重新定义。
 // 即在arrayMethods中找到我们要重写的方法,对其进行重新定义
 def(arrayMethods, method, function mutator (...args) {
 const result = original.apply(this, args)
 const ob = this.__ob__
 let inserted
 switch (method) {
 // 上面已经分析过,对于push,unshift会新增索引,所以需要手动observe
 case 'push':
 case 'unshift':
 inserted = args
 break
 // splice方法,如果传入了第三个参数,也会有新增索引,所以也需要手动observe
 case 'splice':
 inserted = args.slice(2)
 break
 }
 // push,unshift,splice三个方法触发后,在这里手动observe,其他方法的变更会在当前的索引上进行更新,所以不需要再执行ob.observeArray
 if (inserted) ob.observeArray(inserted)
 // notify change
 ob.dep.notify()
 return result
 })
})

三 Object.defineProperty VS Proxy

上面已经知道 Object.defineProperty 对数组和对象的表现是一致的,那么它和 Proxy 对比存在哪些优缺点呢?

1. Object.defineProperty只能劫持对象的属性,而Proxy是直接代理对象。

由于 Object.defineProperty 只能对属性进行劫持,需要遍历对象的每个属性,如果属性值也是对象,则需要深度遍历。而 Proxy 直接代理对象,不需要遍历操作。

2. Object.defineProperty对新增属性需要手动进行Observe。

由于 Object.defineProperty 劫持的是对象的属性,所以新增属性时,需要重新遍历对象,对其新增属性再使用 Object.defineProperty 进行劫持。

也正是因为这个原因,使用vue给 data 中的数组或对象新增属性时,需要使用 vm.$set 才能保证新增的属性也是响应式的。

下面看一下vue的 set 方法是如何实现的, set 方法定义在 core/observer/index.js ,下面是核心代码。

/**
 * Set a property on an object. Adds the new property and
 * triggers change notification if the property doesn't
 * already exist.
 */
export function set (target: Array<any> | Object, key: any, val: any): any {
 // 如果target是数组,且key是有效的数组索引,会调用数组的splice方法,
 // 我们上面说过,数组的splice方法会被重写,重写的方法中会手动Observe
 // 所以vue的set方法,对于数组,就是直接调用重写splice方法
 if (Array.isArray(target) && isValidArrayIndex(key)) {
 target.length = Math.max(target.length, key)
 target.splice(key, 1, val)
 return val
 }
 // 对于对象,如果key本来就是对象中的属性,直接修改值就可以触发更新
 if (key in target && !(key in Object.prototype)) {
 target[key] = val
 return val
 }
 // vue的响应式对象中都会添加了__ob__属性,所以可以根据是否有__ob__属性判断是否为响应式对象
 const ob = (target: any).__ob__
 // 如果不是响应式对象,直接赋值
 if (!ob) {
 target[key] = val
 return val
 }
 // 调用defineReactive给数据添加了 getter 和 setter,
 // 所以vue的set方法,对于响应式的对象,就会调用defineReactive重新定义响应式对象,defineReactive 函数
 defineReactive(ob.value, key, val)
 ob.dep.notify()
 return val
}

set 方法中,对 target 是数组和对象做了分别的处理, target 是数组时,会调用重写过的 splice 方法进行手动 Observe

对于对象,如果 key 本来就是对象的属性,则直接修改值触发更新,否则调用 defineReactive 方法重新定义响应式对象。

如果采用 proxy 实现, Proxy 通过 set(target, propKey, value, receiver) 拦截对象属性的设置,是可以拦截到对象的新增属性的。

为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)

不止如此, Proxy 对数组的方法也可以监测到,不需要像上面vue2.x源码中那样进行 hack

为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)

完美!!!

3. Proxy支持13种拦截操作,这是defineProperty所不具有的

get(target, propKey, receiver):拦截对象属性的读取,比如 proxy.fooproxy['foo']

set(target, propKey, value, receiver):拦截对象属性的设置,比如 proxy.foo = vproxy['foo'] = v ,返回一个布尔值。

has(target, propKey):拦截 propKey in proxy 的操作,返回一个布尔值。

deleteProperty(target, propKey):拦截 delete proxy[propKey] 的操作,返回一个布尔值。

ownKeys(target):拦截 Object.getOwnPropertyNames(proxy)Object.getOwnPropertySymbols(proxy)Object.keys(proxy)for...in 循环,返回一个数组。该方法返回目标对象所有自身的属性的属性名,而 Object.keys() 的返回结果仅包括目标对象自身的可遍历属性。

getOwnPropertyDescriptor(target, propKey):拦截 Object.getOwnPropertyDescriptor(proxy, propKey) ,返回属性的描述对象。

defineProperty(target, propKey, propDesc):拦截 Object.defineProperty(proxy, propKey, propDesc)Object.defineProperties(proxy, propDescs) ,返回一个布尔值。

preventExtensions(target):拦截 Object.preventExtensions(proxy) ,返回一个布尔值。

getPrototypeOf(target):拦截 Object.getPrototypeOf(proxy) ,返回一个对象。

isExtensible(target):拦截 Object.isExtensible(proxy) ,返回一个布尔值。

setPrototypeOf(target, proto):拦截 Object.setPrototypeOf(proxy, proto) ,返回一个布尔值。如果目标对象是函数,那么还有两种额外操作可以拦截。

apply(target, object, args):拦截 Proxy 实例作为函数调用的操作,比如 proxy(...args)proxy.call(object, ...args)proxy.apply(...)

construct(target, args):拦截 Proxy 实例作为构造函数调用的操作,比如 new proxy(...args)

4. 新标准性能红利

Proxy 作为新标准,长远来看,JS引擎会继续优化 Proxy ,但 gettersetter 基本不会再有针对性优化。

5. Proxy兼容性差

为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)

可以看到, Proxy 对于IE浏览器来说简直是灾难。

并且目前并没有一个完整支持 Proxy 所有拦截方法的Polyfill方案,有一个google编写的proxy-polyfill 也只支持了 get,set,apply,construct 四种拦截,可以支持到IE9+和Safari 6+。

四 总结

  • Object.defineProperty 对数组和对象的表现一直,并非不能监控数组下标的变化,vue2.x中无法通过数组索引来实现响应式数据的自动更新是vue本身的设计导致的,不是 defineProperty 的锅。
  • Object.defineProperty 和 Proxy 本质差别是,defineProperty 只能对属性进行劫持,所以出现了需要递归遍历,新增属性需要手动 Observe 的问题。
  • Proxy 作为新标准,浏览器厂商势必会对其进行持续优化,但它的兼容性也是块硬伤,并且目前还没有完整的polifill方案。

参考

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery Autocomplete 结合asp.net使用要点
Oct 29 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
Apr 29 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
May 28 Javascript
最棒的Angular2表格控件
Aug 10 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
jquery 正整数数字校验正则表达式
Jan 10 Javascript
基于vue组件实现猜数字游戏
May 28 Javascript
vue mounted组件的使用
Jun 18 Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 Javascript
vue el-table实现行内编辑功能
Dec 11 Javascript
vue实现广告栏上下滚动效果
Nov 26 Vue.js
Vue3.0中的monorepo管理模式的实现
Oct 14 #Javascript
Vue3 源码导读(推荐)
Oct 14 #Javascript
基于JS实现父组件的请求服务过程解析
Oct 14 #Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 #Javascript
vue循环数组改变点击文字的颜色
Oct 14 #Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 #Javascript
VUE+node(express)实现前后端分离
Oct 13 #Javascript
You might like
PHP下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
PhpStorm本地断点调试的方法步骤
2018/05/21 PHP
JS保留小数点(四舍五入、四舍六入)实现思路及实例
2013/04/25 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
js函数调用的方式
2014/05/06 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
简介BootStrap model弹出框的使用
2016/04/27 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
学习python的几条建议分享
2013/02/10 Python
python的即时标记项目练习笔记
2014/09/18 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
python3+PyQt5实现支持多线程的页面索引器应用程序
2018/04/20 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
个人求职简历中英文自我评价
2013/12/16 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
红头文件任命书范本
2014/06/05 职场文书
法人代表任命书范本
2014/06/05 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
安全教育主题班会总结
2015/08/14 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers
利用Redis实现点赞功能的示例代码
2022/06/28 Redis
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技