Vue2和Vue3数据响应式原理以及区别 (详解含代码)

1.vue2中的数据响应式原理

 要想了解响应式原理就需要先了解vue中的数据劫持和数据代理

  1. 数据代理:data中的写入的数据都会通过加工再生成一份,组件实例对象vm._data中存储的就是data中的每个属性 get 和 set。然后name属性一改set就调,set的原理就是重新再解析模板,模板一解析就生成新的虚拟dom,然后新旧dom进行对比,然后更新页面 响应式原理
  2. 数据劫持:就是get和set每个数据身上都有一个get和set就是为了实现数据的响应式,getter 就是有人读取data中的属性就调用getter,进行数据劫持监视这个属性,set就是有人修改了_data中的数据然后就调用set
  3. vue2中data中定义得数组,并且没有键,那么他的_data中数据劫持是劫持不到的就是没有get 和 set ,你修改值是改变不了的,那么怎么解决,vue2中初始化的时候没有给数据,后续添加的都是没有get和set的,如果想拯救一下需要通过vue.set及另一个方法来解决,vue2对数组的push,pop,splice等等,进行了二次封装,使他重新调用解析模板...然后走页面更新流程
  4. 数据代理和数据劫持都离不开,object.definepropty
  5. 数据劫持就是getter和setter 如果有人改了data中的属性就会调用setter,收到了你要修改的数据,并且修改原来的数据,然后重新解析模板

2.vue3中的数据响应式原理

 vue3中数据响应式原理,是通过ref和reactive来实现响应式数据的

vue3中的通过ref来实现响应式对象跟vue2中的响应式原理是一样的,ref适合存放一些基本数据类型,那么他就会通过object.definepropty来进行数据劫持实现响应式原理,你如果存放的是对象或数组这些复杂数据类型,那么他也能解决只不过是去让proxy来进行解决。

reactive数据响应式理解:

  1. 他是vue3中的数据响应式原理,和object.definepropty区别不是很大,只不过是get和set接收到的参数都是一整条数据而不是vue2中的单条数据,并且set比vue中的set多接收一个数据,proxy中修改和添加都是使用一个set,proxy中提供了删除的api。
  2. 最重要的是通过Reflect来修改源数据,这是和vue2中数据响应式最大的区别。
  3. vue3reactive中使用proxy响应式原理中的Reflect就是为了使你的代码更加健壮,如果传统的数据劫持编译中出现错误就会直接停止,不会再执行后面的代码,因为js是单线程,而Reflect就是为了解决这种情况,就算出现了错误也会执行下面的代码。操作源数据

 确实挺苦涩。

  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值