谈谈 Vue shallowRef 和 shallowReactive

Himmelbleu 2023-03-28 原文

深层次响应式

reactive 和 ref 创建的对象都是深层次的，对象的根属性和嵌套属性都是响应式的。

深层次转换是递归地转为响应式，对象里的每个属性访问都将触发代理的依赖追踪，这种性能负担通常这只有在处理超大型数组或层级很深的对象时才比较明显。例如，一次渲染需要访问 100000+ 个属性时，才会变得比较明显。因此，shallowRef 或 shalloReactive 只在少数特定的场景才会使用。

const state = reactive({
  foo: {
    bar: 1
  },
  foobar: 2
});

浅层次响应式

shallowReactive

shallowReactive 创建的响应式对象只在其根属性是响应式的，对所有深层的对象不会做任何的递归深层转换处理，否则和 reactive 没区别。

浅层响应式对深层级属性的访问会很快，但代价是，所有深层的对象视为非响应式的。

const state = shallowReactive({
  foo: {
    bar: 1
  },
  foobar: 2
});

上图中，state.foo.bar 没有发生改变，只有在其他响应式更新之后，才间接地更新它的状态。

替换顶级对象失去响应式

对于 reactive 和 shallowReactive，如果替换了顶级对象就会失去响应式：

let state = shallowReactive({
  foo: {
    bar: 1
  },
  foobar: 2
});

function changeState() {
  state = {
    foo: {
      bar: 1000
    },
    foobar: 2000
  };
}

如上图所示，state.foobar 在替换顶级对象之前，一直是有响应式的，但是被替换了之后，就失去了响应式。

需要思考的是，为什么替换了顶级对就失去了响应式，请先阅读 Vue 中的响应性是如何工作的，官方文档给了一个 reactive 和 ref 创建响应式的伪代码，不难看出，reactive 返回了一个 Proxy。在 getter/setter 上加上 Vue 的追踪代码，实现响应式。

一旦这个 Proxy 对象被替换了，就没有了 getter/setter，即失去了响应式。

shallowRef

与 shallowReactive 不同的是，shallowRef 创建的响应式对象都是浅层的，并不是说它不是响应式，因为有 triggerRef API 存在，即主动地通知更新。

let state = shallowRef({
  foo: {
    bar: 1
  },
  foobar: 2
});

function changeState() {
  state.value = {
    foo: {
      bar: 1000
    },
    foobar: 2000
  };
}

在替换顶层对象之前，点击按钮，state.foo.bar 和 state.foobar 都没有更新。强制通知浅层 ref 更新，可以使用 triggerRef，具体查看官方文档：triggerRef。

替换顶级对象不会失去响应式

shallowRef 和 ref 创建的响应式对象被替换了之后，依旧保留响应式。

let state = shallowRef({
  foo: {
    bar: 1
  },
  foobar: 2
});

function changeState() {
  // 自加不会触发页面更新
  state.value.foo.bar++;
  state.value.foobar++;

  // 替换 state.value 的顶级对象页面才会更新
  const replace = {
    foo: {
      bar: state.value.foo.bar
    },
    foobar: state.value.foobar
  };

  state.value = replace;
}

最好的做法是通过 triggerRef，改造一下代码：

function triggerUpdate() {
  state.value.foo.bar++;
  state.value.foobar++;

  triggerRef(state);
}

总结 shallowRef

shallowReactive 没有强制更新的 API，只有第一层属性是响应式的，且嵌套对象属性是间接触发更新的机制。

所以，想要一个浅层的响应式对象，建议使用 shallowRef，它有 triggerRef 这样的 API，使用起来灵活。

什么时候用到浅层响应式

在处理大量数据，需要提高性能（优化性能）时；
不希望立马更新，需要自定义更新时机时。

shallowReactive shallowRef code 浅层 state 前端开发

有关谈谈 Vue shallowRef 和 shallowReactive的更多相关文章

谈谈区块链入门技能（三）：Layer 2区块链浏览器如何使用？Tokenview - 2
继介绍了比特币以及EVM系列区块链浏览器使用指南，今天我们再来介绍一下Layer2系列浏览器如何使用？Layer1 是基础区块链。以太坊和比特币都是Layer1区块链因为它们是各种Layer2网络构建的底层基础。Layer2项目包括以太坊的“rollups”和比特币的闪电网络。Layer2项目上所有用户交易活动最终可以回到Layer1区块链。Layer2项目将把它们的交易数据发布到以太坊，依赖于以太坊的数据可用性。此数据可用于获取Layer2的状态，或对Layer2的交易提出质疑。总结来说，Layer2是扩展以太坊的独立区块链。以太坊的成功和使用它的需求导致Gas价格大幅上涨。因此，对扩展解决
谈谈如何高效使用搜索引擎找到自己想要的内容 - 2
tags:Tips写在前面最近有朋友问我如何快速找到一些编程问题的解决方案,当然也包括搜索一些网络资源(如书籍等),感觉自己用Google也有一段时间了,可以好好总结一下然后回答这个问题了.搜索引擎的话我现在肯定是只用Google的,当然一些情况下我也会用bing(毕竟广告还是要少一些),百度的话估计只用来找一些文库资源了(下载PPT模板),除此之外好像没什么能用到百度的地方…关于一些专业知识,除了看课本,Wikipedia也是不错的选择,虽然中文页面相对匮乏,但是其内容的高质量和准确性以及精美的插图还是让人赞不绝口.编程方面的问题,主要还是通过StackOverflow来查,虽然有时候遇到的
到底有几个鸿蒙OS? 谈谈我眼里的鸿蒙操作系统 - 2
为什么写本文最近看到两个跟鸿蒙操作系统相关的新闻，说的是龙芯适配了鸿蒙操作系统，还有一款使用紫光cpu的平板也支持了鸿蒙操作系统。具体见：历史性一刻！最强国产强强联合：龙芯支持开放鸿蒙的意义是什么？全球首款开源鸿蒙平板来了，但我劝你先别买很多人觉得有啥了不起呀，华为不是老早就宣布鸿蒙os的设备不是过亿了嘛。但是注意这里说的都是开源鸿蒙（OpenHarmony），和华为手机上的那个不是一回事。而且网上一直有各种骂战，有人说华为是国产希望，必须支持，也有人说华为鸿蒙就是安卓套壳，消费国人热情。最主要的是鸿蒙的各种讨论隔一阵就来一次，每一次华为发布新设备或者鸿蒙版本，都带起一阵对喷。那华为的鸿蒙os
谈谈线程安全问题及其解决方法 - 2
本文讲述一下线程的安全问题及解决方法。一线程安全问题举例说明在电影院售票的场景，假使有100张票待售，有3个窗口在售票，如图所示：三个窗口都卖出票1，一个票被卖了3次，多线程访问共享数据“票”，出现了线程安全问题。问题代码见下：publicclassSellTicketImpl1implementsRunnable{privateintticket=100;@Overridepublicvoidrun(){while(true){if(ticket>0){System.out.println(Thread.currentThread().getName()+"正在卖第"+ticket+"张票"
mysql - 我有一个要优化的 SQL 查询。让我们来谈谈它 - 2
所以，这里有一个问题可能会让SQL专家跳来跳去，说我懒惰，但我被难住了。今天早上我们的在线商店崩溃并被烧毁，这是可疑的查询。我想了一整天，并没有想出任何天才的优化。我能得到一些帮助吗？有什么关键指标？重组这个的方法？我意识到这就像问墙的另一边是什么，然后给你一个指向另一个方向的望远镜，但我认为值得一试:SELECTDISTINCT(SELECTfilenameFROM(SELECTDISTINCTy.valueASlabel,x.valueASfilenameFROM`catalog_product_super_link`ASzINNERJOIN`catalog_product_ent
谈谈对专有云和专属云的认识 - 2
云计算领域持续发展，各种云计算相关技术形态趋于成熟，为企业上云和数字化转型提供了可靠基座。但根据调查显示，政务、金融、传统工业在上云的过程中，偏爱非公有云的方式，选择公有云的企业以泛互联网为主。之所以产生这么的调查结果，也尽令人感到意外，“专有“的概念在这类行业的观念中尤为重要。同时上云企业不只是关注到云计算有更好的弹性伸缩、更简介的操作体验和更优质的服务质量；也关注到了上面面临的顾虑。总结下来分别四点：安全、合规、性能、IT成本。•在安全方面，上云企事业单位因数据主权、平台稳定运行等方面都会面临到这样那样的安全问题，如何保障上云企业的安全需求，是云服务商需要解决的头号难题，对于能够共享的计算
【周末闲谈】谈谈数学转码这一年来的体会与反思 - 2
——我们走了太远，以至于忘了为何出发前言笔者本科读的是数学专业，就是每天和数学分析、高等代数、概率论、随机过程等等这些理论打交道的专业，这个专业出来工作好像一般有两个方向就是金融和计算机，我选择了计算机方向。主要是学习的课程中有一些操作系统、cpp、数据库之类的课程，相比于金融我对计算机更熟悉一些，但比科班生是远远不及的。众所周知，数学专业其实是一个面向考试的专业，除了极少部分打算深入研究某一领域的学生，大部分学生都是为了应付考试而学习，但其实这种模式是对后面的就业不太友好的，因为没有任何相关经验，这就是基础学科的一个极大的劣势。笔者对这种面向考试的数学模式也曾经比较追崇，所以本科成绩还不错，
谈谈区块链入门技能（二）：以太坊区块链浏览器如何使用？ - 2
上一期我们介绍了比特币浏览器如何使用，本期我们来谈一谈什么是以太坊以及以太坊浏览器如何使用。什么是以太坊？以太坊是一个合作运行的、全球性的、透明的数据库。通过共同努力，来自世界各地的参与者维护了以太坊地址的公共记录，其中包括用户帐户和智能合约应用程序。这些记录像现代台式计算机的用户帐户和软件一起工作，除了以太坊是：合作运行：以太坊的基本运作来自其全球参与者的集体努力。没有任何一方可以改变以太坊的运作方式。可公开访问：世界上任何地方的任何人都可以与以太坊、其用户及其应用程序进行交互。透明：世界上任何地方的任何人都可以下载和查看以太坊数据库中的所有信息。任何人都可以成为以太坊的用户。创建帐户很简单
谈谈我对ai发展的看法 - 2
最近难得有时间，通过白话，聊聊我对AI的看法，仅代表个人观点首先表明我的观点：人类当前的人工智能成果，仍然停留在一知半解程度。技术的发展是需要长期的积累和进步，目前AI的发展仍处于入门阶段人类的发展必然离不开创新，未来革命性的五大核心技术，基因工程、核聚变、量子科学、人工智能和石墨烯技术，这五大技术极有可能成为推动人类进步，迈入第四次工业革命的核心技术小拾先生这次只给大家聊人工智能这块人工智能，英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学如果从1956年8月在美国汉诺斯小镇的达特茅斯学院举行的会议来计算(“人工智能”名词的起源年)，到
电脑硬盘文件数据误删除/格式化为什么可以恢复？怎么恢复？谈谈文件删除与恢复背后的原理 - 2
声明主页：元存储的博客_CSDN博客依公开知识及经验整理，如有误请留言。个人辛苦整理，付费内容，禁止私自转载。内容摘要1.硬盘数据丢失场景2.硬盘数据丢失可以恢复吗？3.数据丢失怎么恢复？3.1第一款、嗨格式数据恢复大师 3.2 第二款、360安全卫士3.3第三款、CoolmusterDataRecovery4.哪些存储器数据可以恢复5.怎么避免隐私数据被恢复？总结1.硬盘数据丢失场景我们在每天办公或是记录数据的时候，文件存储大多数都是通过硬盘进行存储的，因此，使用多了，各种问题就会出现，比如硬盘被格式化，数据损坏了等。造成硬盘数据丢失的场景有：误删除、格式化硬盘意外蓝屏断电硬盘中病毒固态硬