vue3.0响应式原理(超详细)_vue3.0响应式原理资源-CSDN下载

版权申诉

52 浏览量 2021-03-03 11:43:52 上传评论 1 收藏 697KB PDF 举报

资源推荐

资源详情

资源评论

vue3.0响应式原理响应式原理(超详细超详细)

一基于proxy的Observer

1 什么是proxy

Proxy 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。

proxy是es6新特性，为了对目标的作用主要是通过handler对象中的拦截方法拦截目标对象target的某些行为（如属性查找、赋

值、枚举、函数调用等）。

2 为什么要用proxy，改用proxy之后的利与弊

> 3.0 将带来一个基于 Proxy 的 observer 实现，它可以提供覆盖语言 (JavaScript——译注) 全范围的响应式能力，消除了当前

Vue 2 系列中基于 Object.defineProperty 所存在的一些局限，这些局限包括：1 对属性的添加、删除动作的监测； 2 对数组基

于下标的修改、对于 .length 修改的监测； 3 对 Map、Set、WeakMap 和 WeakSet 的支持；；

vue2.0 用Object.defineProperty 作为响应式原理的实现，但是会有它的局限性，比如无法监听数组基于下标的修改，不支持

Map、Set、WeakMap 和 WeakSet等缺陷，所以改用了proxy解决了这些问题，这也意味着vue3.0将放弃对低版本浏览器的

兼容（兼容版本ie11以上）。

3 proxy中hander对象的基本用法

vue3.0 响应式用到的捕获器（接下来会重点介绍）

handler.has() -> in 操作符的捕捉器。 (vue3.0 用到)

handler.get() -> 属性读取操作的捕捉器。 (vue3.0 用到)

handler.set() -> 属性设置操作的捕捉器。(vue3.0 用到)

handler.deleteProperty() -> delete 操作符的捕捉器(vue3.0 用到)

handler.ownKeys() -> Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法的捕捉器。(vue3.0 用

到)。

vue3.0 响应式没用到的捕获器（有兴趣的同学可以研究一下）

handler.getPrototypeOf() -> Object.getPrototypeOf 方法的捕捉器。

handler.setPrototypeOf() -> Object.setPrototypeOf方法的捕捉器。

handler.isExtensible() -> Object.isExtensible 方法的捕捉器。

handler.preventExtensions() -> Object.preventExtensions 方法的捕捉器。

handler.getOwnPropertyDescriptor()-> Object.getOwnPropertyDescriptor 方法的捕捉器。

handler.defineProperty() -> Object.defineProperty方法的捕捉器。

handler.apply() -> 函数调用操作的捕捉器。

handler.construct() -> new 操作符的捕捉器。

① has捕获器

has(target, propKey)

target:目标对象

propKey:待拦截属性名

作用: 拦截判断target对象是否含有属性propKey的操作

拦截操作：propKey in proxy 不包含for...in循环

对应Reflect: Reflect.has(target, propKey)

例子：

剩余10页未读，继续阅读

内容反馈

版权申诉

weixin_38621630

粉丝: 3

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip