专栏首页前端说吧【每日一题】【vue2源码学习】对VUE响应式数据的理解

【每日一题】【vue2源码学习】对VUE响应式数据的理解

数组和对象类型当值变化时如何劫持到?

对象类型数据的劫持

是内部通过defineReactive方法。使用Object.defineProperty将属性进行劫持(只会劫持已经存在的属性),多层对象是通过递归来实现的劫持。(详细还要看Object.defineProperty实现观察者模式的代码思路)。而到了vue3.x中时使用Proxy来实现响应式数据的。proxy提升性能但是兼容性不太好。

数组类型数据的劫持

则是通过重写数组的方法来实现的。这是因为因为defineProperty会依次的给对象的属性增加get和set方法来进行监听。但数组长度不定且可能数值项很多。每一项都监听性能特别差。所以不使用defineProperty的方式实现监听。(具体重写了哪些方法以及怎么重写的见后期第2题)

内部依赖收集是怎么做到的?

每个属性都拥有自己的dep属性,存放他所依赖的watcher,当属性变化后会通知自己对应的watcher去更新(其实后边每个对象类型自己本身也拥有一个dep属性,后期第九题$set也有涉及)。

性能优化相关:

• 每一个属性都要重定义,对象层级过深会递归劫持,性能就会变差 • 不需要响应数据的内容不要放到data中(即后续新增的新值不会被监听,不能实现响应式数据,只能用vue.$set) • Object.freeze()可以冻结数据。冻结后的数据就不能用defineProperty重定义。

vue【对象】响应式数据原理mock

源码地址

源码位置:

github:src/core/observer/index.js:135

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【python系统学习13】类(class)与对象(object)

    整数、字符串、浮点数等,不同的数据类型就属于不同的类。 想想看当初学数据类型,我们用type验证数据类型后打印的结果

    xing.org1^
  • HTML5 - Websocket

    Websocket是一种在单个TCP连接上进行全双工通讯的协议,他能够允许服务端主动向客户端推送数据。

    xing.org1^
  • html2canvas - 项目中遇到的那些坑点汇总

    因为css里的只是展示画布显示的大小,不像这样是canvas真正的内里图画分辨率的大小。

    xing.org1^
  • BOOtstrap源码分析之 tooltip、popover

    一、tooltip(提示框) 源码文件: Tooltip.js Tooltip.scss 实现原理: 1、获取当前要显示tooltip的元素的定位信息(top...

    sam dragon
  • 类和对象

    (1) 静态的特征称为属性,动态的动作称为方法。对象中的属性和方法,在编程中实际是变量 (属性) 和函数 (方法) 。

    清菡
  • 从PHP代码的细节说起

    因为一个BUG, 我在一个摇摇欲坠,几乎碰一下就会散架的项目中某一个角落中发现下面这样一段代码 ? 这段程序与那个BUG有密切的关系。 我来回反复的捉摸这段代码...

    用户1608022
  • Qt程序继承QApplication发生崩溃的原因

    QApplication是Qt开发中经常用到的一个类,用来管理应用程序的生命周期。跟其相关的类还有QCoreApplication和QGuiAppli...

    24K纯开源
  • [Flutter Widget]Chip

    在前面的文章中我们看了下Tooltip的用法,在文章的最后也给大家留了一个问题,自定义自己的Tooltip。

    flyou
  • 【iOS】基于Realm数据库的记账软件--时间线模块(三)

    接下来,我们将开始搭建时间线界面。该模块是界面展示中最大的难点--时间线布局。那么,我们先来看看效果图,因为gif上传后,动不了。所以在这里用几张截图和文字简单...

    MapleYe
  • CNV分析该如何选取对照样本

    分析CNV的技术越来越多,除了核型、FISH、aCGH、SNParray、CNVseq、BOBS、WES、WGS等,还有基于cell free ...

    用户7625144

扫码关注云+社区

领取腾讯云代金券