详解Vue3中shallowRef和shallowReactive的使用

目录
  • shallowRef 和 shallowReactive
  • 使用 shallowReactive 非深度监听
  • 使用 shallowRef 非深度监听

嗯，怎么说呢，其实这两个函数并不是很常用，在开发过程中基本上用不到，但是呢，我不写我又感觉少点啥，所以说就简单的说一下吧，其实不看也可以哈。

shallowRef 和 shallowReactive

  • shallowRef 函数，只处理基本类型数据。
  • shallowReactive 函数，只处理第一层数据。
  • 两个在使用的时候都需要引入才可以。

上面说了是不是还是没看懂？没关系哈，先记住上面三条，然后详细的说一下。

我们在之前的博客讲过 ref 函数和 reactive 函数，他们的作用是将数据转换成响应式的数据，在修改数据的时候，可以将数据实时展示在页面上，基本数据也好，对象也好，都是这样。

但是有一个问题呀，我们在把数据改为响应式数据的时候，不管是用 ref 函数还是使用 reactive 函数，他俩都是深度监听，啥意思呢？就是 reactive 包裹的对象，就算有100层，也就是连续点一百个属性那种，去修改最深层的数据，也是可以监听到的，这样的话就会存在问题了。

深度监听的问题：

  • 无论 ref 函数还是 reactive 函数都是深度监听。
  • 如果数据量过大，超级超级消耗性能。
  • 如果我们不需要对数据进行深度监听的时候，就可以使用 shallowRef 函数和 shallowReactive 函数。

明白了吗？不明白没关系，我们通过几个案例就知道了。

使用 shallowReactive 非深度监听

记住一点，shallowReactive 函数，只能处理第一层数据。

假设我们页面有一个个人信息展示，有名字、有年龄需要展示，我们数据是存在 boy 对象里面，然后 age 是在 boy 对象的 news 属性下面，也就是深层，但是 name 是在 boy 对象下面，也就是第一层，我们有两个按钮，分别修改 name 和 age，看一下会有什么效果。

<template>
  <div>
    <h1>姓名：{{name}}</h1>
    <h1>年龄：{{news.age}}</h1>
    <button @click="btn">修改name</button>
    <button @click="btn2">修改age</button>
  </div>
</template>

<script>
import { shallowReactive, toRefs } from "vue";
export default {
  name: "App",
  setup() {
    const boy = shallowReactive({
      name: "我是
赞 (0)

相关推荐

  • 一文搞懂Vue3中toRef和toRefs函数的使用

    目录 toRef 函数 toRef 函数使用 ref 函数验证 toRefs 函数 toRefs 函数使用 总结 上一篇博文介绍了vue3 里面的 ref 函数和 reactive 函数,实现响应式数据,今天主要来说一下 toRef 函数和 toRefs 函数的基本使用. toRef 函数 通过上一篇博客,我们知道,ref 函数可以创建一个响应式的数据,那 toRef 函数同样也是创建一个响应式的数据,那么他们之间的区别是什么呢? 首先一点,ref 函数他的本质其实是去拷贝一份数据,脱离了与源数

  • 详解Vue3中setup函数的使用教程

    目录 vue2 和 vue3 开发的区别 使用 setup 原因 setup 用法 setup 可以接受哪些参数 setup 详解 setup 函数自动执行 setup 函数定义变量 setup 创建方法 动态更新数据 vue2 和 vue3 开发的区别 首先,目前来说 vue3 发布已经有一段时间了,但是呢,由于还处于优化完善阶段,对于 vue3 开发项目的需求不是很高,主要还是以 vue2 开发为主,但是相信,vue3 进行项目开发是大势所趋. vue2 开发项目过程中,会存在代码冗余和结构

  • 详解Vue3中侦听器watch的使用教程

    详解Vue3中侦听器watch的使用教程

    目录 watch 侦听器使用. 侦听器监听 reactive 监听多个参数执行各自逻辑 监听多个参数执行相同逻辑 上一节我们简单的介绍了一下vue3 项目中的计算属性,这一节我们继续 vue3 的基础知识讲解. 这一节我们来说 vue3 的侦听器. 学过 vue2 的小伙伴们肯定学习过侦听器,主要是用来监听页面数据或者是路由的变化,来执行相应的操作,在 vue3里面呢,也有侦听器的用法,功能基本一样,换汤不换药的东西. 侦听器是常用的 Vue API 之一,它用于监听一个数据并在数据变动时做一些

  • 一文搞懂Vue3.2中setup语法糖使用

    目录 前言 一.如何使用setup语法糖 二.data数据的使用 三.method方法的使用 四.watchEffect的使用 五.watch的使用 六.computed计算属性的使用 七.props父子传值的使用 八.emit子父传值的使用 九.获取子组件ref变量和defineExpose暴露 十.路由useRoute和useRouter的使用 十一.store仓库的使用 十二.await 的支持 十三.provide 和 inject 祖孙传值 前言 提示:Vue3.2 版本开始才能使用语

  • Vue3 计算属性的用法详解

    Vue3 计算属性的用法详解

    目录 computed 计算属性说明 计算属性使用 总结 注意 上一篇博文说了 vue3 项目的 toRefs 函数和 toRef 函数,今天就稍微总结一下 vue3 的计算属性,其实学过 vue2 的宝子们应该都清楚,计算属性这个东西在项目开发过程中使用的还是比较频繁的,使用频率相对来说比较高,所以说咱今天稍微总结一下 vue3 项目中的计算属性,下面开始. computed 计算属性说明 computed 表示计算属性,通常的作用是用来进行数据处理,方便在末班中简化书写. 比如日常在模板中我

  • 详解Vue3中ref和reactive函数的使用

    目录 前言 ref 函数介绍 ref 函数使用 ref 函数处理基本数据类型 ref 函数处理复杂数据类型 ref 函数获取单个DOM元素 其他相关方法 reactive 函数介绍 reactive 函数使用 ref 函数处理对象 ref 函数处理数组 前言 上一篇博文介绍 setup 函数的时候,最后出现一个问题,就是在 setup 函数中,编写一个事件,直接去修改定义的变量,发现页面上没有更新成功,并且控制台报错,那这篇博客就是讲解遇到的这个问题应该如何处理. ref 函数介绍 ref 作用

  • 一文搞懂Vue3中watchEffect侦听器的使用

    目录 watchEffect 侦听器 watchEffect 侦听器使用 watchEffect 监听基本数据 watchEffect 监听复杂数据 watchEffect 啥时候执行 关闭 watchEffect 监听 上一节我们学习了 watch 侦听器的基础用法,用来监听页面数据的变化,那么今天呢,我们来学习一下 watch 侦听器的好兄弟 watchEffect 侦听器.这个相对来说比较简单,用的不是很多,当然了,根据自己的项目情况自行决定使用.这个就不详细说了,简单过一下子. watc

  • 详解Vue3中shallowRef和shallowReactive的使用

    目录 shallowRef 和 shallowReactive 使用 shallowReactive 非深度监听 使用 shallowRef 非深度监听 嗯,怎么说呢,其实这两个函数并不是很常用,在开发过程中基本上用不到,但是呢,我不写我又感觉少点啥,所以说就简单的说一下吧,其实不看也可以哈. shallowRef 和 shallowReactive shallowRef 函数,只处理基本类型数据. shallowReactive 函数,只处理第一层数据. 两个在使用的时候都需要引入才可以. 上

  • 一文详解Vue3中使用ref获取元素节点

    目录 静态绑定 onMounted nextTick watchEffect watch v-for中使用 动态绑定 ref设置函数 通过getCurrentInstance方法 获取vue实例 前言: 本文介绍在vue3的setup中使用composition API获取元素节点的几种方法: 静态绑定 仅仅需要申明一个ref的引用,用来保存元素,在template中,不必bind引用(:ref="domRef"),只需要声明一个同名的ref属性(ref="domRef&qu

  • 详解Vue3中对VDOM的改进

    前言 vue-next 对virtual dom的patch更新做了一系列的优化,从编译时加入了 block 以减少 vdom 之间的对比次数,另外还有 hoisted 的操作减少了内存的开销.本文写给自己看,做个知识点记录,如有错误,还请不吝赐教. VDOM VDOM的概念简单来说就是用js对象来模拟真实DOM树.由于MV**的架构,真实DOM树应该随着数据(Vue2.x中的data)的改变而发生改变,这些改变可能是以下几个方面: v-if v-for 动态的props(如:class,@cl

  • 详解vue3中组件的非兼容变更

    函数式组件 functional attribute 在单文件组件 (SFC) <template> 已被移除 { functional: true } 选项在通过函数创建组件已被移除 // 使用 <dynamic-heading> 组件,负责提供适当的标题 (即:h1,h2,h3,等等),在 2.x 中,这可能是作为单个文件组件编写的: // Vue 2 函数式组件示例 export default { functional: true, props: ['level'], re

  • 详解Vue3中Teleport的使用

    详解Vue3中Teleport的使用

    在本文中,我们将介绍: Teleport 的目的 Teleport 的例子 一些很有意思的代码交互 Teleport 的目的 首先是什么时候以及使用这个 Teleport 功能. 在开发较大的 Vue 项目时应该以可重用的逻辑去组织代码.但是当处理某些类型的组件(如模式.通知或工具提示)时,模板 HTML 的逻辑可能不会和我们希望渲染元素处于相同的文件中. 实际上在大多数情况下,与 Vue 的 DOM 完全分开处理相比,处理这些元素要容易得多.因为嵌套组件的位置.z-index 和样式等这些东西

  • 详解vue3中渲染函数的非兼容变更

    目录 渲染函数API变更 Render函数参数 渲染函数签名更改 VNode Props 格式化 slot统一 移除$listeners $attrs现在包括class和style 渲染函数API变更 此更改不会影响到<template>用户 h现在全局导入,而非作为参数传递给渲染函数 渲染函数参数更改为在有状态组件和函数组件之间更加一致 vnode现在又一个扁平的prop结构 Render函数参数 // 2.0 渲染函数 export default { render(h) { return

  • 详解Vue3 中的计算属性及侦听器

    目录 计算属性 缓存 getter 和 setter 侦听器 配置选项 其它写法 计算属性 我们知道,在模板中可以直接通过插值语法显示一些data中的数据,但是在某些情况,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示 在模板中使用表达式,可以非常方便的实现,但是设计它们的初衷是用于简单的运算,在模板中放入太多的逻辑会让模板过重和难以维护,并且如果多个地方都使用到,那么会有大量重复的代码 所以我们希望将业务逻辑和UI界面进行分离,其中一种方式就是将逻辑抽取到一个met

  • 一文详解Vue3中简单diff算法的实现

    一文详解Vue3中简单diff算法的实现

    目录 简单Diff算法 减少DOM操作 例子 结论 实现 DOM复用与key的作用 例子 虚拟节点的key 实现 找到需要移动的元素 探索节点顺序关系 实现 如何移动元素 例子 实现 添加新元素 例子 实现 移除不存在的元素 例子 实现 总结 简单Diff算法 核心Diff只关心新旧虚拟节点都存在一组子节点的情况 减少DOM操作 例子 // 旧节点 const oldVNode = { type: 'div', children: [ { type: 'p', children: '1' },

  • 详解vue3中如何使用youtube-player

    目录 正文 开始使用 做成组件youtubePlayer 使用方式 注意事项 常用参数 常用API 正文 youtube-player 是 YouTube IFrame Player API (YIPA) 的封装.可以在自己网站上播放YouTube视频. 开始使用 使用 npm 下载 npm i youtube-player 做成组件youtubePlayer <script setup> import { ref, watch, onMounted, onBeforeUnmount } fr

  • 详解vue3中如何使用shaka-player

    详解vue3中如何使用shaka-player

    目录 正文 开始使用 做成组件shakaPlayer 使用方式 注意事项 正文 Shaka Player 是谷歌公司对外开源的一款 JavaScript 类库,详细请看谷歌官方API文档. 开始使用 我们可以使用 npm 下载 npm i shaka-player 做成组件shakaPlayer <script setup> import { ref, watch, onMounted, onBeforeUnmount } from "vue"; import shaka

随机推荐