vue2与vue3实现响应式数据的原理对比

你的名字 2022-09-09 04:50 176阅读 0赞

## vue2 ##

*  实现原理：
    
     *  对象类型：通过`Object.defineProperty()`对属性的读取、修改进行拦截（数据劫持）。
     *  数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。
        
            Object.defineProperty(data, 'count', { 
                get () { }, 
                set () { }
            })
 *  存在问题：
    
     *  新增属性、删除属性, 界面不会更新。
     *  直接通过下标修改数组, 界面不会自动更新。

## vue3 ##

*  实现原理:
    
     *  通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。
     *  通过Reflect（反射）: 对源对象的属性进行操作。
     *  MDN文档中描述的Proxy与Reflect：
        
         *  Proxy：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/Proxy
         *  Reflect：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/Reflect
            
                new Proxy(data, { 
                	// 拦截读取属性值
                    get (target, prop) { 
                    	return Reflect.get(target, prop)
                    },
                    // 拦截设置属性值或添加新属性
                    set (target, prop, value) { 
                    	return Reflect.set(target, prop, value)
                    },
                    // 拦截删除属性
                    deleteProperty (target, prop) { 
                    	return Reflect.deleteProperty(target, prop)
                    }
                })
                
                proxy.name = 'tom'

发表评论取消回复

表情：

评论列表（有 0 条评论，176人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue响应式原理

//响应式原理 let obj = { name: 'yangedong', age: 12 } O

我不是女神ヾ/ 2022年12月29日 09:45/ 0 赞/ 245 阅读

相关 Vue2和Vue3响应式原理对比剖析

响应式原理实现逻辑 1.监听对象数组变化 2.设置拦截，读取的时候进行依赖收集，设置的时候进行派发更新操作 Vue2响应式原理简化 1.对象响应化：递归遍历每

Dear 丶/ 2022年12月09日 02:45/ 0 赞/ 230 阅读

相关实现Vue响应式原理

Vue的数据双向绑定，响应式原理，其实就是通过Object.defineProperty()结合发布者订阅者模式来实现的。我们可以先试着拆分一下Vue的核心模块。 1.

我不是女神ヾ/ 2022年11月14日 00:49/ 0 赞/ 252 阅读

相关 Vue数据响应式原理

响应式数据的最终目标，是当对象本身或对象属性发生变化时，将会运行一些函数，最常见的就是render函数。在具体实现上，vue用到了几个核心部件： 1. Observer

灰太狼/ 2022年10月16日 09:53/ 0 赞/ 285 阅读

相关 vue2与vue3实现响应式数据的原理对比

vue2 实现原理：对象类型：通过`Object.defineProperty()`对属性的读取、修改进行拦截（数据劫持）。

你的名字/ 2022年09月09日 04:50/ 0 赞/ 177 阅读

相关 vue2.0与vue3的响应式

vue2的响应式核心：对象: 通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截) 数组: 通过重写数组更新数组一系列更

布满荆棘的人生/ 2022年09月04日 08:57/ 0 赞/ 184 阅读

相关 Vue2、Vue3响应式数据原理实现(双向绑定)

Vue2 // 在对象中添加一个属性与存取描述符的示例 var bValue = {name:"zs",age:18}; var o = {};

我不是女神ヾ/ 2022年09月03日 15:16/ 0 赞/ 204 阅读

相关 vue.js响应式原理解析与实现

从很久之前就已经接触过了angularjs了，当时就已经了解到，angularjs是通过脏检查来实现数据监测以及页面更新渲染。之后，再接触了vue.js，当时也一

深藏阁楼爱情的钟/ 2022年05月04日 03:00/ 0 赞/ 213 阅读

相关 vue响应式原理

vue的响应式，数据模型仅仅是普通的Javascript对象。当你修改它们时，视图会进行更新那么如何追踪变化：当把普通的js对象传给vue实例的data选项，Vue将遍

布满荆棘的人生/ 2021年09月30日 10:02/ 0 赞/ 413 阅读

相关 vue数据响应式原理

数据变化: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

╰+攻爆jí腚メ/ 2021年07月24日 20:32/ 0 赞/ 444 阅读