亲宝软件园·资讯

展开

Vue3 shallowRef shallowReactive

ed。 人气:0

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

shallowRef 和 shallowReactive

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

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

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

深度监听的问题:

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

使用 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: "我是

加载全部内容

相关教程
猜你喜欢
用户评论