vue3 ref,shallowRef,reactive,shallowReactive使用的简单异同点说明

1、这几个都是负责data的存储及读取的,我们常用的是ref,reactive。

2、看一下shallowRef这个,shallowReactive与其类似。

说明:以官网的说明,这个state.value.count = 2是不会触发视图更新的,但是如果直接在<script setup lang="ts"></script>中直接修改的时候,你会发现这个数据是更改了,并且视图也会更新,并不是原始值。

但是如果在onMounted里写,那么这个视图是不会被更新的。

3、那么我们增加一个按钮事件add来触发下,看看效果:

我们会发现,如果只是修改shallowRef的nested.count++,那么也是不会被更新。

有一点先重要,我们把上面的二行注解去掉,add中会同时去更新ref的变量值,再来看看效果:

4、完整代码:

复制代码
<template>
  <div>
    <h1>Ref</h1>
    {{ stateref }}
    <h1>Reactive</h1>
    {{ statereactive }}
    <h1>ShallowRef</h1>
    {{ state }}
    <input type="text" v-model="state.greet" />
    <h1>ShallowReactive</h1>
    {{ stater }}
    <br />
    <br />
    <button @click="add">add</button>
  </div>
</template>
<script setup lang="ts">
import {
  onMounted,
  reactive,
  ref,
  shallowReactive,
  shallowRef,
  unref,
} from "vue";
const statereactive = reactive({
  count: 1,
  greet: "Hello, world",
  nested: { count: 1 },
  list: [
    {
      id: 1,
      name: "a",
    },
    {
      id: 2,
      name: "b",
    },
  ],
});
const stateref = ref({
  count: 1,
  greet: "Hello, world",
  nested: { count: 1 },
  list: [
    {
      id: 1,
      name: "a",
    },
    {
      id: 2,
      name: "b",
    },
  ],
});
const stater = shallowReactive({
  count: 1,
  greet: "Hello, world",
  nested: { count: 1 },
  list: [
    {
      id: 1,
      name: "a",
    },
    {
      id: 2,
      name: "b",
    },
  ],
});
const state = shallowRef({
  count: 1,
  greet: "Hello, world",
  nested: { count: 1 },
  list: [
    {
      id: 1,
      name: "a",
    },
    {
      id: 2,
      name: "b",
    },
  ],
});

onMounted(() => {
  // stateref.value.count = 2;
  // stateref.value.greet = "Hello, Vue 3";
  // stateref.value.nested.count = 2;
  // stateref.value.list[0].name = "c";
  // console.log(JSON.stringify(unref(stateref))); // 2

  // statereactive.count = 2;
  // statereactive.greet = "Hello, Vue 3";
  // statereactive.nested.count = 2;
  // statereactive.list[0].name = "c";
  // console.log(JSON.stringify(unref(statereactive))); // 2

  // 不会触发更改
  state.value.count = 2;
  state.value.greet = "Hello, Vue 3";
  state.value.nested.count = 2;
  state.value.list[0].name = "c";
  console.log(JSON.stringify(unref(state))); // 2

  // stater.count = 2;
  // stater.greet = "Hello, Vue 3";
  // stater.nested.count = 2;
  // stater.list[0].name = "c";
  // console.log(JSON.stringify(unref(stater))); // 2
  // 会触发更改
  // state.value = { count: 2 }
  // console.log(state.value.count) // 2
});

function add() {
  state.value.nested.count++;
  console.log(state.value.nested.count);
  stateref.value.nested.count++;
  console.log(stateref.value.nested.count);
  //如果add中直接调用上面代码,内嵌模式不需要写.value
}
</script>

5、总结:

1)单独的去修改shallowRef,shallowReactive变量的值,值是变了,但是视图是不会被响应的,但是如果我们在<script>...</script>中直接改变量的值的时候,是会更改视图显示的,在onMounted中写是不会的,视图不会响应,但值是变了。

2)如果我们在shallowRef,shallowReactive变量的值改变后,再去修改ref,reactive定义的值的时候,视图变成响应式,这样shallowRef,shallowReactive的视图也会一并被更新。

所以如果有些场景考虑到大数据结构的效率的时候,我们要根据这些原理去使用,这样就简单明了了。如果只是console.log是测试不出来问题的,因为一直会改变的。区别只在视图有没有响应。

相关推荐
尘世中一位迷途小书童1 分钟前
VitePress 文档站点:打造专业级组件文档(含交互式示例)
前端·架构·前端框架
甜瓜看代码1 分钟前
666
前端
吃饺子不吃馅7 分钟前
【八股汇总,背就完事】这一次再也不怕webpack面试了
前端·面试·webpack
Amos_Web14 分钟前
Rust实战教程--文件管理命令行工具
前端·rust·全栈
li理23 分钟前
鸿蒙相机开发入门篇(官方实践版)
前端
菜狗的小小笔记_23 分钟前
Vue3 实用技巧
vue.js
webxin66624 分钟前
页面动画和延迟加载动画的实现
前端·javascript
逛逛GitHub36 分钟前
这个牛逼的股票市场平台,在 GitHub 上开源了。
前端·github
细节控菜鸡1 小时前
【排查实录】Web 页面能打开,服务器能通接口,客户端却访问失败?原因全在这!
运维·服务器·前端
duandashuaige1 小时前
解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED
javascript·typescript·electron·npm·vue·html