Vue3.x响应式数据原理

最新推荐文章于 2024-08-16 15:01:15 发布
最新推荐文章于 2024-08-16 15:01:15 发布
阅读量616 收藏
点赞数 2
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LuckXinXin/article/details/108576713
版权

Vue3.x改用Proxy替代Object.defineProperty。因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。

  • Proxy只会代理对象的第一层，那么Vue3又是怎样处理这个问题的呢？

判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理， 这样就实现了深度观测。

  • 监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？

我们可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger

LuckXinXin
关注
专栏目录
请简述Vue3.x 响应式数据原理是什么？
youhebuke225的博客
05-25 562
Vue3.x 的响应式数据原理主要基于 ES6 的。对象来实现，与 Vue2.x 使用的。
Vue2.x、Vue3.x的数据响应式核心原理
鸭绒的博客
04-28 808
文章目录1.概念2.Vue2.x数据响应式核心原理3. Vue 3.x数据响应式原理4. 发布/订阅模式4.1 发布/订阅模式在Vue中的应用场景4.2 封装一个简易版的发布/订阅类5.观察者模式5.1 观察者模式在Vue中应用场景5.2 封装一个简易版的观察者类 1.概念 在学习核心原理前，我们先了解两个概念： 数据响应式：数据模型仅仅是普通的JS对象，而我们修改数据时，视图会进行更新，避免了繁琐的DOM操作，提高开发效率。(内部操作DOM，我们只是修改数据) 双向数据绑定：数据改变，视图也改变；视图改
Vue 3.x响应式原理
小卡酷谋的博客
08-05 266
Vue 3.x中响应式原理 与Vue2.x响应式原理比较 使用ES6中新增的Proxy代理对象实现 直接监听对象，而非属性 （不需要循环，性能提升） ES6中新增，IE不支持，性能由浏览器优化 实现原理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&
vue3-03-创建响应式数据的几种方法
最新发布
m0_64150479的博客
08-16 754
本文章总结了vue3中创建 “响应式数据” 的几种方法，包含创建 “基本数据类型” 的数据 和 “对象类型” 的数据
Vue3.x响应式原理
qq_61153907的博客
10-29 278
2.Vue3.x中使用了ES6的一个API Proxy对数据进行代理，拦截对象中任意属性的变化，他是Window内置的一个构造函数，包括增删改查，然后通过Reflect(反射)，对源对象进行操作。据说：ECMA正在尝试着把Object很多有用的API移植到 Reflect 上，后续我们可以多了解一下Reflect。
Vue.js 3.x 响应式系统原理
qq_32090185的博客
08-22 274
Vue.js 3.x 响应式系统原理
Vue3 数据响应式
hx_1551的博客
05-07 9722
在vue3中一般返回的数据是不响应的，如果需要响应式需要在定义时声明 方法1：reactive（）： 定义：reactive（）是一个函数，可以用来定义复杂数据类型完成响应式 案例： <div>{{userInfo.name}}</div> //4，结果打印Cat <button @click="userNameUpdate"><button> <script lang='setup'...
Vue3.0数据响应式原理详解
10-16
当响应式数据发生变化时，与之关联的`ReactiveEffect`会被调度执行，从而触发视图的更新。 4. **Dep和KeyToDepMap**: `Dep`是一个Set对象，用于存储所有依赖于某个响应式对象的`ReactiveEffect`。`KeyToDepMap`则是...
Vue2.X和Vue3.0数据响应原理变化的区别
10-16
在Vue2.x的响应式系统中，当实例化一个Vue实例时，所有传入的数据对象会通过`observe`函数进行深度遍历，为每个属性创建getter和setter。当通过setter修改属性时，会触发视图的更新，因为setter内部会调用`render`...
VUE学习(三) 响应式原理
w499198977的博客
02-04 130
数据驱动 1.数据响应式 数据模型是普通的JS对象,而当我们修改数据时,视图会进行更新,避免DOM操作 2.双向绑定 数据改变,视图改变;视图改变,数据也随之改变(玩过Angular的不会陌生) 3.数据驱动 Vue最独特的特性之一,开发过程中仅需关注数据本身,不需要关心数据是如何渲染到视图 ...
VUE3.X——响应数据原理
B_rabbit_d的博客
04-15 298
VUE2.X双向绑定是通过数据劫持结合发布-订阅者模式实现的，核心是通过 Object.defineProperty() 劫持各个属性值的 getter 和 setter，在数据变动时发布消息给订阅者，从而触发相应的监听回调，而VUE3.X则是通过ES6的 Proxy 对象实现的。 什么是 Proxy Proxy 意为代理，它是 js 的内置对象，用于拦截和更改对象相关的不同操作行为，不支持 IE 和 Safari <10 的版本。 let obj = {name: 'zs', age: 18};
Vue实现双向绑定的原理以及响应式数据的方法
12-12
一、vue中的响应式属性 Vue中的数据实现响应式绑定 1、对象实现响应式： 是在初始化的时候利用definePrototype的定义set和get过滤器，在进行组件模板编译时实现water的监听搜集依赖项，当数据发生变化时在set中通过调用dep.notify进行发布通知，实现视图的更新。 2、数组实现响应式： 对于数组则是通过继承重写数组的方法splice、pop、push、shift、unshift、sort、reverse、等可以修改原数组的方式实现响应式的，但是通过length以及直接利用item[index]方式修改数组是不能实现响应式的改变dom（这种两种方式涉及到数组的内部实现
你了解vue3.0响应式数据怎么实现吗？
weixin_33675507的博客
06-06 325
从 Proxy 说起 什么是Proxy proxy翻译过来的意思就是”代理“，ES6对Proxy的定位就是target对象(原对象)的基础上通过handler增加一层”拦截“，返回一个新的代理对象，之后所有在Proxy中被拦截的属性，都可以定制化一些新的流程在上面，先看一个最简单的例子 consttarget={};//要被代理的原对象//用于描述代理过程的handlerconsth...
Vue3——响应式实现（ref、reactive）
mantou_riji的博客
07-24 4332
setup是Vue3中一个新的配置项，值为。eg：返回一个对象: App.vue eg2： 返回的是 在vue2中中的属性会通过原理最终包装成响应式数据_data。 vue3中为我们提供了两种包装响应式数据的方法：ref和reactive注意这里的ref和vue2中的ref不一样，这里是一个。上面使用setup包裹页面数据，但是这样编写出的数据不是响应式的，即数据改变页面不会被重新加载。从vue2中我们知道一个数据要实现响应式一定有对应的响应式得getter和setter方法，在vue3中通过帮我们生成响
Vue3.x快速上手（二）Vue3.x的生命周期和响应式原理
qq_33070437的博客
11-05 193
Vue2.0和Vue3.x的生命周期对比 Vue2.0 Vue3.x Vue3.x生命周期钩子函数 <div id="app"> <input type="number" v-model='num'> <button @click='handleUnmount'>销毁</button> </div> <script> const {createApp,reactive,...
Vue2.x和3.x的响应式原理
weixin_48786946的博客
09-15 375
vue2.x 数据响应式核心原理 官网描述：当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。 实现对一个属性进行监听转换 <script>
Vue 3 响应式数据原理：深入解析
My_wife_QBL的博客
07-02 1462
响应式数据（Reactive Data）是指数据模型和视图之间的自动同步机制。当数据模型发生变化时，视图会自动更新；反之，当用户在视图上进行输入时，数据模型也会自动更新。这种机制大大简化了开发者的工作，使得状态管理和用户界面更新变得更加直观和高效。在自定义组件中，响应式数据可以实现更复杂的双向绑定逻辑。通过props和$emit，可以灵活地处理数据和事件。return {state</script>自定义组件。
VUE3响应式数据
duzhe17629085113的博客
12-10 643
内存中两块空间一个数mydata储存空间，另一个节点对象，在文档树中用于页面显示的，里面有一个innerHTML属性，这个属性决定页面显示效果 前提设置了一个全局变量Let mydata={title:"我也是个数据容器"} 当mydata存储空间修改后，但是innerHTML没有运行，导致页面的mydata没有运行，页面首次加载innerHTML赋值,然后去了变量存储空间中的字符串，显示出来，innerHTML不会再运行，变量存储空间中的数据发生修改，由于innerHTML没有运行所...
Vue3数据响应式核心原理
随风浅入画
08-20 976
Vue3数据响应式核心原理 $ 定义 Proxy 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。 Proxy 比Object.defineProperty在语法上更加简单,在性能上更加优越 $ 语法 const p = new Proxy(target, handler) $ 参数 target:要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。 handler:一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值