vue3中的reactive、readonly和shallowReactive使用详解

 更新时间:2024年04月29日 10:08:21   作者:猛扇赵四那半好嘴  
在 Vue3 中,可以使用 shallowReactive 函数创建一个浅层响应式对象,它接收一个普通对象作为参数,返回一个浅层响应式代理对象,本文给大家介绍vue3中的reactive、readonly和shallowReactive使用,感兴趣的朋友跟随小编一起看看吧

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

1. reactive 与 readonly 使用

readonly:拷贝一份 proxy 对象将其设置为只读。

使用 readonly 时, 变量里的属性不可改变。

需要注意的是:

当原本数据改变时,使用了 readonly 函数的值也会发生改变。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <div>
    <form>
      <input v-model="obj.name" type="text" />
      <br />
      <input v-model="obj.age" type="text" />
      <br />
      <button @click.prevent="submit">提交</button>
    </form>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, readonly, shallowReactive } from 'vue'
const obj = reactive({
  name: '张三',
  age: 23
})
const copy = readonly(obj)
const submit = () => {
  obj.age++
  console.log(copy)
}
</script>

在这个例子中,修改响应式对象中的 age 属性, readonly 中的 age 属性也会随之更改。

2. shallowReactive

  • 创建浅层响应式对象
  • 修改内部属性时,只改变值不更新视图

在 Vue3 中,可以使用 shallowReactive 函数创建一个浅层响应式对象。它接收一个普通对象作为参数,返回一个浅层响应式代理对象。这个代理对象只能处理对象的一级属性,不能处理嵌套在对象中的属性的响应式更新。当我们读取代理对象的属性时,会触发依赖收集;当我们修改代理对象的属性时,会触发相应的依赖更新。在调用 shallowReactive 函数时, Vue3 会使用 Proxy 对象对传入的对象进行代理,从而实现浅层响应式特性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
  <div>{{ state }}</div>
  <br />
  <button @click="change1">test1</button>
  <br />
  <button @click="change2">test2</button>
</template>
<script setup lang="ts">
import { ref, reactive, readonly, shallowReactive } from 'vue'
const state = shallowReactive({
  a: 1,
  first: {
    b: 2,
    second: {
      c: 3
    }
  }
})
const change1 = () => {
  state.a = 7
}
const change2 = () => {
  state.first.b = 8
  state.first.second.c = 9
  console.log(state)
}
</script>

点击 test1 后: state.a 的值变为 7 

点击 test2 后:视图没有发生改变,控制台如下

到此这篇关于vue3中的reactive、readonly和shallowReactive的文章就介绍到这了,更多相关vue3 reactive、readonly和shallowReactive内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://blog.csdn.net/m0_60189088/article/details/138160676

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • vue实现动态表格提交参数动态生成控件的操作

    vue实现动态表格提交参数动态生成控件的操作

    这篇文章主要介绍了vue实现动态表格提交参数动态生成控件的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue+three.js实现炫酷的3D登陆页面示例详解

    vue+three.js实现炫酷的3D登陆页面示例详解

    这篇文章主要为大家介绍了vue+three.js实现炫酷的3D登陆页面示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue2使用 element表格展开功能渲染子表格的方式

    vue2使用 element表格展开功能渲染子表格的方式

    这篇文章主要介绍了vue2使用 element表格展开功能渲染子表格的方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • vue3 自定义loading的操作方法

    vue3 自定义loading的操作方法

    这篇文章主要介绍了vue3 自定义loading的操作方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-11-11
  • Vue3中ref的用法举例总结(避免混淆)

    Vue3中ref的用法举例总结(避免混淆)

    这篇文章主要给大家介绍了关于Vue3中ref的用法举例总结的相关资料,ref()接受一个内部值,返回一个响应式的可更改的ref对象,此对象只有一个指向其内部值的属性.value,需要的朋友可以参考下
    2023-10-10
  • vue如何实现对请求参数进行签名

    vue如何实现对请求参数进行签名

    这篇文章主要介绍了vue如何实现对请求参数进行签名问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • Vue组件之间传值/调用几种方式

    Vue组件之间传值/调用几种方式

    这篇文章主要介绍了Vue组件之间传值/调用的几种方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • vue组件开发之用户无限添加自定义填写表单的方法

    vue组件开发之用户无限添加自定义填写表单的方法

    今天小编就为大家分享一篇vue组件开发之用户无限添加自定义填写表单的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue中的element tabs点击锚点定位,鼠标滚动定位

    Vue中的element tabs点击锚点定位,鼠标滚动定位

    这篇文章主要介绍了Vue中的element tabs点击锚点定位,鼠标滚动定位方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • vue中的.sync修饰符用法及原理分析

    vue中的.sync修饰符用法及原理分析

    这篇文章主要介绍了vue中的.sync修饰符用法及原理分析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论