详解Vue3中shallowRef和shallowReactive的使用

2024-04-02 19:04:59 310人浏览薄情痞子

摘要

目录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: "我是??.",
      news: {
        birthday: "2012-10-14",
        age: 10
      }
    });

    const btn = () => {
      boy.name = "??.";
    };

    const btn2 = () => {
      boy.news.age++;
    };

    return { ...toRefs(boy), btn, btn2 };
  }
};
</script>

我们分别点击两个按钮，看一下页面变化。

通过效果，我们稍微总结一下：

shallowReactive只会包装第一层的数据
默认情况它只能够监听数据的第一层。
如果想更改多层的数据，必须先更改第一层的数据，然后在去更改其他层的数据。这样视图上的数据才会发生变化。

使用 shallowRef 非深度监听

开头已经说过了，shallowRef 函数，只能处理基本类型数据，为啥呢，因为 shallowRef 函数监听的是.value 变化。并不是第一层的数据的变化。所以如果要更改 shallowRef 创建的数据，应该 xxx.value = XXX。

看代码：

<template>
  <div>
    <h1>姓名：{{boy}}</h1>
    <button @click="btn">修改boy</button>
  </div>
</template>

<script>
import { shallowRef } from "vue";
export default {
  name: "App",
  setup() {
    const boy = shallowRef("我是??.");

    const btn = () => {
      boy.value = "??.";
    };

    return { boy, btn };
  }
};
</script>

点击按钮，修改 boy 的值。

通过上面的截图可以看见，数据是可以正常修改的。

然后遗留了一个问题：shallowRef 函数，只处理基本类型数据吗？

看下面的案例：

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

<script>
import { shallowRef } from "vue";
export default {
  name: "App",
  setup() {
    const boy = shallowRef({
      name: "我是??.",
      news: {
        birthday: "2012-10-14",
        age: 10
      }
    });

    const btn = () => {
      boy.value.name = "??.";
    };

    const btn2 = () => {
      boy.value.news.age++;
    };

    return { boy, btn, btn2 };
  }
};
</script>

在这个代码里面，我们用 shallowRef 包裹了一个对象，然后在页面显示 name 和 age ，然后我们通过按钮修改 name 和 age，看一下页面的效果。

所以说呢，shallowRef 函数，只能处理基本类型数据。

好了，今天的内容大体就这么多，其实这两个函数不怎么用，知道就好，万一用到也好明白怎么用。

到此这篇关于详解vue3中shallowRef和shallowReactive的使用的文章就介绍到这了,更多相关Vue3 shallowRef shallowReactive内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 详解Vue3中shallowRef和shallowReactive的使用

本文链接: https://www.lsjlt.com/news/153955.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

详解Vue3中shallowRef和shallowReactive的使用

目录shallowRef 和 shallowReactive使用 shallowReactive 非深度监听使用 shallowRef 非深度监听嗯，怎么说呢，其实这两个函数并不是很...

99+

2024-04-02
Vue3中shallowRef和shallowReactive如何使用

shallowRef 和 shallowReactiveshallowRef 函数，只处理基本类型数据。shallowReactive 函数，只处理第一层数据。两个在使用的时候都需要引入才可以。上面说了是不是还是没看懂？没关系哈，先记住上面...

99+

2023-05-14

Vue3 shallowref shallowreactive
Vue3中的shallowRef 和shallowReactive对比分析

目录 shallowRefshallowReactive vue3的shallowRef()、shallowReactive()和shallowReadonly(...

99+

2023-01-05

Vue3中shallowRef 和shallowReactive Vue3 shallowRef 和shallowReactive
Vue中的shallowRef与shallowReactive函数怎么使用

这篇文章主要讲解了“Vue中的shallowRef与shallowReactive函数怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue中的shallowRef与shallowRe...

99+

2023-07-05
VueJs中的shallowRef与shallowReactive函数使用比较

目录前言shallowRefshallowReactive总结前言在vue3当中一些相似的组合式API,如果没有经常使用,就会混淆,对于初学者,很是迷惑，比如:shallowRe...

99+

2023-05-14

VueJs中的shallowRef与shallowReactive Vue shallowRef shallowReactive
详解Vue3中Teleport的使用

目录Teleport 的目的 Teleport 是怎样工作的在本文中，我们将介绍： Teleport 的目的 Teleport 的例子一些很有意思的代码...

99+

2024-04-02
详解Vue3中ref和reactive函数的使用

目录前言ref 函数介绍ref 函数使用ref 函数处理基本数据类型ref 函数处理复杂数据类型ref 函数获取单个DOM元素其他相关方法reactive 函数介绍reactive ...

99+

2024-04-02
Vue3中watch的使用详解

目录Vue3中watch的详解Vue2使用watchVue3使用watch情况1情况2情况3情况4情况5特殊情况Vue3中watch的详解 Vue2使用watch <templ...

99+

2022-11-16

Vue3 watch Vue3 中的watch Vue watch详解
VUE3中watch和watchEffect的用法详解

watch和watchEffect都是监听器，但在写法和使用上有所区别。 watch在监听 ref 类型时和监听reactive类型时watch函数的写发有所不一样。watch在监听...

99+

2024-04-02
Vue3中watch监听使用详解

目录Vue2使用watchVue3使用watch情况1情况2情况3情况4情况5特殊情况总结Vue2使用watch <template> <div&g...

99+

2022-11-13

vue3.0 watch vue3 watch vue中watch的使用
vue3中使用ref和emit来减少props的使用示例详解

目录前言示例示例1示例2前言在之前开发vue2项目中，props 属性在组件中经常使用来进行组件通信。现在在开发vue3项目的过程中，我们开发小组渐渐的减少props的使用，转而用...

99+

2024-04-02
vue3和vue2中mixins的使用解析

目录前言Vue21、封装的mixin方法2、具体页面引用 abc.vue3、具体页面使用 abc.vuevue3官方入口（个人建议，不要再mixin用setup）一、封装mixin里...

99+

2024-04-02
详解vue3中setUp和reactive函数的用法

1 setUp的执行时机我们都知道，现在vue3是可以正常去使用methods的。但是我们却不可以在setUp中去调用methods中的方法。为什么了？？？我们先了解一下下...

99+

2024-04-02
Vue3中使用Supabase Auth方法详解

目录引言安装Supabase设置Supabase创建一个AuthUser组合创建页面注册.vueEmailConfirmation.vue登录.vuForgotPassword.vu...

99+

2024-04-02
详解vue3中ref和reactive用法和区别

vue3中ref和reactive区别 1、前言2、基本用法2.1 ref2.2 reactive 3、ref和reactive定义数组对比3.1 ref定义数组3.1 reactive定义数组 4、ref 和reactiv...

99+

2023-08-30

vue.js javascript ecmascript
详解vue3中如何使用youtube-player

目录正文开始使用做成组件youtubePlayer使用方式注意事项常用参数常用API正文 youtube-player 是 YouTube IFrame Player API&nbs...

99+

2024-04-02
详解Vue3+Vite中怎么使用JSX

虽然 jsx 最早是由 React 引入，但实际上 JSX 语法并没有定义运行时语义，并且能被编译成各种不同的输出形式。如果你之前使用过 JSX 语法，那么请注意 Vue 的 JSX 编译方式与 React 中 JSX 的编译方式不同，因此...

99+

2023-05-14

Vue vue3 vite JSX
vue3中defineComponent 的作用详解

vue3中，新增了 defineComponent ，它并没有实现任何的逻辑，只是把接收的 Object 直接返回，它的存在是完全让传入的整个对象获得对应的类型，它的存在就是完全为了...

99+

2024-04-02
vue3中的watch和watchEffect实例详解

目录首先总结一下两者的区别：下面是根据上面的第三点做的一些小实验：总结闲来无事，比较了一下 vue3 中的 watch 和 watchEffect，总觉得官方文档没咋说清楚，今天就小...

99+

2024-04-02
一文详解vue3中使用JSX的方法

在 Vue 3 的项目开发中，template 是 Vue 3 默认的写法。虽然 template 长得很像 HTML，但 Vue 其实会把 template 解析为 render 函数，之后，组件运行的时候通过 render 函数去返回虚...

99+

2022-11-25

JSX Vue vue3