Vue3.0里为什么要用 Proxy API 替代 defineProperty API 原因？

最新推荐文章于 2024-05-27 09:37:33 发布

jcat_李小黑

最新推荐文章于 2024-05-27 09:37:33 发布

阅读量449

点赞数 2

分类专栏： Vue 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_43216105/article/details/120000999

版权

原理

Object.defineProperty只能遍历对象属性进行劫持；
Proxy直接可以劫持整个对象，并返回一个新对象，我们可以只操作新的对象达到响应式目的；
Proxy可以直接监听数组的变化（push、shift、splice）；
Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等，这是Object.defineProperty不具备的；
Proxy 不兼容IE，也没有 polyfill, defineProperty 能支持到IE9；
因为defineProperty自身的缺陷，导致Vue2在实现响应式过程需要实现其他的方法辅助（如重写数组方法、增加额外set、delete方法）

// 数组重写
const originalProto = Array.prototype;
const arrayProto = Object.create(originalProto);
['push', 'pop', 'shift', 'unshift', 'splice', 'reverse', 'sort'].forEach(method => {
   
  arrayProto[method] = function () {
   
    originalProto[method].apply(this.arguments)
    dep.notice()//增加表阿基
  }
});
// Vue.set(obj,'bar','newbar')
// Vue.delete(obj,'bar')

代码

index.html

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>vue2 vue3响应式分析</title>
</head>

<body>
    <div id="app">vue2</div>
    <div id="proxy">vue3</div>

    <script src="defineReactive.js">

最低0.47元/天解锁文章

jcat_李小黑

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue3.0里为什么要用 Proxy API 替代 defineProperty API 原因？

原理Object.defineProperty只能遍历对象属性进行劫持；Proxy直接可以劫持整个对象，并返回一个新对象，我们可以只操作新的对象达到响应式目的；Proxy可以直接监听数组的变化（push、shift、splice）；Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等，这是Object.defineProperty不具备的；Proxy 不兼容IE，也没有 polyfill, defineProperty 能支持到IE9；因为
复制链接

扫一扫