响应式：声明响应式数据 ref &reactive & readonly

已于 2024-04-28 15:43:13 修改
阅读量871 收藏 9
点赞数 10
分类专栏： Vue3 文章标签： vue.js
于 2024-04-28 11:04:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/www0925/article/details/138271152
版权

文章目录

ref 系列

ref() 深层响应式

接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值

ref() 可以持有任何类型的值，包括深层嵌套的对象、数组或者 JavaScript 内置的数据结构，比如 Map。
用 ref() 去绑定对象 或者 数组 等复杂的数据类型，看源码其实也是去调用reactive

使用
<template>
  <!-- 在模板中使用 ref 时，我们不需要附加 .value。为了方便起见，当在模板中使用时，ref 会自动解包 -->
  <p>{{ count }}</p>
  <button @click="onAdd">add</button>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  const count = ref(0)

  // ref() 接收参数，并将其包裹在一个带有 .value 属性的 ref 对象中返回
  console.log(count) // { value: 0 }
  console.log(count.value) // 0

  const onAdd = () => {
    // 注意：被ref包装之后需要 .value 来进行赋值
    count.value = count.value + 1
  }
</script>
结合 TS
const str = ref('') // 会自动识别为 string 类似

const str:Ref<string> = ref('')

// 或
const str = ref<string>('')
自动解包场景
作为 文本插值
<template><p>{{ count }}</p></template>

<script setup lang="ts">
  import { ref } from 'vue'
  const count = ref(0)
</script>
作为顶级属性
const object = { id: ref(1) }
// object.id => [object Object] ref 对象

const { id } = object
id + 1  // => 2
作为 reactive 对象的属性

一个 ref 会在作为响应式对象的属性被访问或修改时自动解包：

const count = ref(0)
const state = reactive({
  count
})

console.log(state.count) // 0

// 注意：修改 state.count 会影响 count
state.count = 1
console.log(count.value) // 1

如果将一个新的 ref 赋值给一个关联了已有 ref 的属性，那么它会替换掉旧的 ref：

const otherCount = ref(2)

state.count = otherCount // 将一个新的 ref 赋值给一个关联了已有 ref 的属性
console.log(state.count) // 2

console.log(count.value) // 1，原始 ref count 与 state.count 失去联系

当 ref 作为响应式数组或原生集合类型(如 Map) 中的元素被访问时，它不会被解包：

const books = reactive([ref('Vue 3 Guide')])
// 这里需要 .value
console.log(books[0].value)

const map = reactive(new Map([['count', ref(0)]]))
// 这里需要 .value
console.log(map.get('count').value)

Ref

TS对应的接口

interface Ref<T> {
  value: T
}

import { ref, Ref } from 'vue'

let message: Ref<string | number> = ref("我是message")

isRef()

判断是不是一个ref对象

<template>
	<!-- template 中 count 自动识别为 count.value  -->
	<p>{{count}}</p>
</template>

<script setup lang="ts">
  import { ref, isRef } from 'vue'
  
  const count = ref(0)
  const num = 1

	console.log(isRef(count)) // true
	console.log(isRef(num)) // false
</script>

shallowRef() 浅层响应式

浅响应。创建一个跟踪自身 .value 变化的 ref，但不会使其值变成响应式的。

修改值不会触发视图更新

修改数据只会修改值得变更，不会影响视图。

<template>
  <p>{{ info.name }}--{{ info.age }}</p>
  <button @click="onChange">change</button>
</template>

<script setup lang="ts">
  import { shallowRef } from 'vue'

  const info = shallowRef({
    name: 'www',
    age: 18,
  })

  const onChange = () => {
    info.value.name = 'abc' // 不会进行响应式变更
    console.log(info)
  }
</script>

但是 重新赋值会触发更新

<template>
  <p>{{ info.name }}--{{ info.age }}</p>
  <button @click="onChange">change</button>
</template>

<script setup lang="ts">
  import { shallowRef } from 'vue'

  const info = shallowRef({
    name: 'www',
    age: 18,
  })

  const onChange = () => {
    info.value = { name: 'abc', age: 10 }
    console.log(info)
  }
</script>
shallowRef() 和 ref() 同时使用会强制更新视图

由于 ref() 底层会调用 triggerRef()，triggerRef() 会强制更新视图。所以 shallowRef() 和 ref 同时使用也会更新视图。

<template>
  <p>{{ info.name }}--{{ info.age }} --- {{ count }}</p>
  <button @click="onChange">change</button>
</template>

<script setup lang="ts">
  import { shallowRef, ref } from 'vue'

  const info = shallowRef({
    name: 'www',
    age: 18,
  })

  const count = ref(0)
  const onChange = () => {
    info.value.name = 'abc' // 不会进行响应式变更

    count.value++ // 响应式变更
    console.log(info)
  }
</script>

在这里插入图片描述

triggerRef()

强制更新页面DOM

<template>
	<p>{{info.name}}--{{info.age}}</p>
	<button @click="onChange">change</button>
</template>

<script setup lang="ts">
  import { shallowRef, triggerRef } from 'vue'
  
  const info = shallowRef({
    name: 'www',
    age: 18
  })
  const onChange = () => {
    info.value.name = 'abc' // 不会进行响应式变更
    triggerRef(info)
  }
</script>

customRef()

自定义ref

customRef 是个工厂函数要求我们返回一个对象 并且实现 get 和 set 适合去做防抖之类的

<template>
  <p>{{ message }}</p>
  <input type="text" v-model="message" />
</template>

<script setup lang="ts">
  import { customRef } from 'vue'

  function myRef<T>(value: T) {
    let timer: ReturnType<typeof setTimeout> | undefined
    return customRef((track, trigger) => {
      return {
        get() {
          track()
          return value
        },
        set(newVal) {
          // 采用防抖赋值的结果有问题，以下采用节流
          timer && clearTimeout(timer)
          timer = setTimeout(() => {
            trigger()
            value = newVal
            clearTimeout(timer)
            timer = undefined
          }, 1000)
        },
      }
    })
  }
  const message = myRef('123')
</script>

toRef()

应用场景：有个函数需要接收 ref 响应式数据，但是 值 却是 reactive 。这个时候就可将 reactive 转成 ref

将数据变成 Ref 响应式数据

<template>
  <p>info: {{ info.name }}--{{ info.age }}</p>
  <p>person: {{ personName }}</p>
  <button @click="onChange">change</button>
</template>

<script setup lang="ts">
  import { reactive, toRef } from 'vue'

  const info = reactive({
    name: 'www',
    age: 18,
  })
  const personName = toRef(info, 'name')

  const onChange = () => {
    personName.value = 'abc'
    console.log(info, personName)
  }
</script>

在这里插入图片描述

注意：如果原始对象是非响应式的就不会更新视图 数据是会变的

<template>
  <p>info: {{ info.name }}--{{ info.age }}</p>
  <p>person: {{ personName }}</p>
  <button @click="onChange">change</button>
</template>

<script setup lang="ts">
  import { toRef } from 'vue'

  const info = {
    name: 'www',
    age: 18,
  }
  const personName = toRef(info, 'name')

  const onChange = () => {
    personName.value = 'abc'
    console.log(info, personName)
  }
</script>

在这里插入图片描述

toRefs()

批量将数据变成 Ref 响应式数据

<template>
  <p>info: {{ info.name }}--{{ info.age }}</p>
  <p>person: {{ personName }}---{{ personAge }}</p>
  <button @click="onChange">change</button>
</template>

<script setup lang="ts">
  import { reactive, toRefs } from 'vue'

  const info = reactive({
    name: 'www',
    age: 18,
  })
  const { name: personName, age: personAge } = toRefs(info)

  const onChange = () => {
    personName.value = 'abc'
    personAge.value = 20
    console.log(info, personName)
  }
</script>

注意：如果原始对象是非响应式的就不会更新视图 数据是会变的

<template>
  <p>info: {{ info.name }}--{{ info.age }}</p>
  <p>person: {{ personName }}---{{ personAge }}</p>
  <button @click="onChange">change</button>
</template>

<script setup lang="ts">
  import { toRefs } from 'vue'

  const info = {
    name: 'www',
    age: 18,
  }
  const { name: personName, age: personAge } = toRefs(info)

  const onChange = () => {
    personName.value = 'abc'
    personAge.value = 20
    console.log(info, personName)
  }
</script>

reactive 系列

参考

reactive()

用来绑定复杂的数据类型，例如 对象 数组。

使用reactive 去修改值无须 .value

使用
<template>
  <button @click="state.count++">
    {{ state.count }}
  </button>
</template>

<script setup lang="ts">
  import { reactive } from 'vue'
	
  // reactive() 将对象本身具有响应性
  const state = reactive({ count: 0 })
</script>

响应式对象是 JavaScript 代理，其行为就和普通对象一样。不同的是，Vue 能够拦截对响应式对象所有属性的访问和修改，以便进行依赖追踪和触发更新。

结合 TS
interface Book {
  title: string
  year?: number
}

const str:Book = reactive({ title: '' })

// 或
const str = reactive<Book>({ title: '' })
局限性
不可以绑定普通的数据类型

它只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)。它不能持有如 string、number 或 boolean 这样的原始类型。

<template>
  <p>{{ count }}</p>
</template>

<script setup lang="ts">
  import { reactive } from 'vue'
  const count = reactive(2)
</script>

在这里插入图片描述

查看源码： reactive 继承与对象
在这里插入图片描述

不能重新赋值

reactive 数据 重新赋值会丢失响应式

由于 Vue 的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地 “替换” 响应式对象，因为这样的话与第一个引用的响应性连接将丢失：

<template>
  <p>{{ info.name }}--{{ info.age }}</p>
  <button @click="onChange">change</button>
</template>

<script setup lang="ts">
  import { reactive } from 'vue'

  let info = reactive({
    name: 'www',
    age: 18,
  })
  const onChange = () => {
    // 响应性连接已丢失！
    info = { name: 'abc', age: 20 }
    console.log(info)
  }
</script>

解决方法：

数组：

  • 使用数组方法
  • 将数组放到对象中，作为对象的属性去赋值
<template>
  <p>{{ arr }}</p>
  <button @click="onChange">change</button>
</template>

<script setup lang="ts">
  import { reactive } from 'vue'

  let arr = reactive<number[]>([])
  const onChange = () => {
    // arr = [1, 2, 3] // 不会进行响应式变更
    console.log(arr)

    // 解决方法：
    // 使用数组方法
    // arr.push(1, 2, 3)
    arr.splice(0, 0, 1, 2, 3)
  }
</script>

对象：

  • 一个个属性赋值
  • 在外层再包裹一层对象
<template>
  <p>{{ info.name }}--{{ info.age }}</p>
  <button @click="onChange">change</button>
</template>

<script setup lang="ts">
  import { reactive } from 'vue'

  let info = reactive({
    name: 'www',
    age: 18,
  })
  const onChange = () => {
    info = { name: 'abc', age: 20 } // 不会进行响应式变更
    console.log(info)
    
    // 解决方法
    info.name = 'abc'
    info.age = 20
  }
</script>
对解构操作不友好

当我们将响应式对象的原始类型属性解构为本地变量时，或者将该属性传递给函数时，我们将丢失响应性连接：

const state = reactive({ count: 0 })

// 当解构时，count 已经与 state.count 断开连接
let { count } = state
// 不会影响原始的 state
count++

// 该函数接收到的是一个普通的数字
// 并且无法追踪 state.count 的变化
// 我们必须传入整个对象以保持响应性
callSomeFunction(state.count)

由于这些限制，我们建议使用 ref() 作为声明响应式状态的主要 API。

注意
const raw = {} // 原始对象
const proxy = reactive(raw) // 代理对象：返回的是一个原始对象的 Proxy

// 代理对象和原始对象不是全等的
console.log(proxy === raw) // false

// 在同一个对象上调用 reactive() 会返回相同的代理
console.log(reactive(raw) === proxy) // true

// 在一个代理上调用 reactive() 会返回它自己
console.log(reactive(proxy) === proxy) // true

依靠深层响应性，响应式对象内的嵌套对象依然是代理：

const proxy = reactive({})

const raw = {}
proxy.nested = raw

console.log(proxy.nested === raw) // false

shallowReactive

只能对浅层的数据 如果是深层的数据只会改变值 不会改变视图

注意：shallowReactive 不能和 reactive 同时使用，否则 shallowReactive 也会更新视图。

官方回复：https://github.com/vuejs/core/issues/5623

<template>
  <p>{{ info.name }}--{{ info.score }}</p>
  <button @click="onChange">change</button>
</template>

<script setup lang="ts">
  import { shallowReactive } from 'vue'

  let info = shallowReactive({
    name: 'www',
    score: {
      math: 90,
      english: 80,
      chinese: 95,
    },
  })
  const onChange = () => {
    // 不会进行响应式变更
    info.score.math = 10
    console.log(info)
  }
</script>

在这里插入图片描述

readonly

接受一个对象 (不论是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理。

类型：

function readonly<T extends object>(
  target: T
): DeepReadonly<UnwrapNestedRefs<T>>

详细信息：

只读代理是深层的：对任何嵌套属性的访问都将是只读的。它的 ref 解包行为与 reactive() 相同，但解包得到的值是只读的。

要避免深层级的转换行为，请使用 shallowReadonly() 作替代。

示例：

<template>
  <p>{{ info.name }}--{{ info.age }}</p>
</template>

<script setup lang="ts">
  import { reactive, readonly } from 'vue'
  const info = reactive({
    name: 'www',
    age: 18,
  })
  const copy = readonly(info)

  // 用来做响应性追踪
  watchEffect(() => {
    console.log(copy.name)
  })

  // 更改源属性会触发其依赖的侦听器
  info.age = 20

  // 更改该只读副本将会失败，并会得到一个警告
  copy.name = 'abc'
</script>

在这里插入图片描述

toRaw

将响应式对象转化为普通对象

<template>
  <p>info: {{ info.name }}--{{ info.age }}</p>
  <p>person: {{ person }}</p>
  <button @click="onChange">change</button>
</template>

<script setup lang="ts">
  import { reactive, toRaw } from 'vue'

  const info = reactive({
    name: 'www',
    age: 18,
  })

  const person = toRaw(info)

  const onChange = () => {
    person.name = 'abc'
    person.age = 20
    console.log(info, person)
  }
</script>

在这里插入图片描述

wei-vivian
关注
  • 10
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Vue3 -- ref & reactive & toRefs & toRef响应式引用
Sun_blog
07-11 977
文章目录响应式原理refreactive数据未解构时尝试对数据进行解构toRefstoRefs响应式引用toRefs封装不存在数据toRefreadonly完整代码总结 响应式原理 通过 proxy 对数据进行封装，当数据变化时，触发模板内容更新。 ref 作用：接受一个内部值并返回响应式对象； 处理：一般用于处理基础数据类型； 引用：ref需要从Vue中引入才能使用； 使用：通过value属性获取，使用数据时不需要使用value； // 模板中使用时，vue底层自动调用 .value
Spring5 WebFlux响应式编程应用场景示例
12-25
结合Spring Data Reactive，WebFlux可以实现响应式的数据库访问，使得数据读写操作也具备非阻塞特性，进一步提升系统的整体性能。 8. **错误处理** WebFlux提供了反应式错误处理机制，允许错误信号沿着数据流传播...
setup 中响应式数据的两种实现方法 & reactive API, ref,ReadOnly
weixin_48702807的博客
08-06 408
我们通过reactive或者ref可以获取到一个响应式的对象，但是某些情况下，我们传入给其他地方（组件）的这个 响应式对象希望在另外一个地方（组件）被使用，但是不能被修改，这个时候如何防止这种情况的出现呢？readonly会返回原生对象的只读代理（也就是它依然是一个Proxy，这是一个proxy的set方法被劫持，并且不 能对其进行修改）；注意 传递给子组件父组件等的数据，也需要是响应式的才能联动。但是经过readonly处理的原来的对象是允许被修改的；readonly返回的对象都是不允许修改的；.....
Vue3源码【一】—— ref&reactive响应式原理及简单实现
共勉
06-14 1335
本文深入剖析了Vue3中ref和reactive的工作机制及背后的响应式原理。文章首先揭示了ref是如何将一个普通值封装成响应式的，并返回一个可访问该值的响应式对象。接着，详细讨论了reactive如何使用Proxy来实现对象的响应式转换，使其所有属性的变化都能被Vue3精确捕捉。文中进一步探讨了Vue3响应式系统的内核，即依赖追踪和派发更新机制，展示了它们如何确保界面与状态的一致性。
【Vue】ref，reactive 响应式引用的用法和原理 （2）
看花容易绣花难
10-31 294
ref，reactive 响应式引用的用法和原理 （2）
Vue3.0数据响应式原理详解
10-16
当响应式数据发生变化时，与之关联的`ReactiveEffect`会被调度执行，从而触发视图的更新。 4. **Dep和KeyToDepMap**: `Dep`是一个Set对象，用于存储所有依赖于某个响应式对象的`ReactiveEffect`。`KeyToDepMap`则是...
nsq-reactive:响应式NSQ Java客户端
04-30
NSQ JavaReact式客户端大量开发中。 NSQ客户端部分来自 。建立先决条件Gradle4.4 docker-compose可用测验./gradlew clean check仍然有TCK测试失败：
浅谈Spring5 响应式编程
08-28
Spring 5 中的响应式编程是指基于声明式编程的异步编程模型，它能够构建更加敏感和有弹性的应用程序。响应式编程的核心思想是管理数据生产者和消费者之间的异步数据流，以流畅的方式响应数据变化。这种编程模型可以...
【Vue】 style中的scoped
DX390609的博客
07-15 163
在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。
docker将Java、vue、nginx打进镜像（涉及容器打成镜像）
qq_37752382的博客
07-15 555
按照上文拉取centos7，然后将需要的东西直接打进脚本，这样最简单，但是在拉取过程中，初始镜像contos7安装nginx需要安装一些工具包，拉取的时候报错了，原因还是在镜像源上，并且还想在上面装一些工具，另外创建容器不应该在里面做很多初始化的东西，每次更新业务包就行，4）准备文件完成后执行下面的就行（如果配置文件不对，比如nginx的配置等先进入镜像手动调整好，没问题了，再删除掉容器和镜像重新制作镜像即可）本文不讲安装docker,安装好安装，镜像源稍微麻烦点。1）生成镜像并创建容器。
vuejs v-for和v-if同时使用报变量未定义
业余程序猿
07-14 319
vue3中v-if优先级高，v-if使用v-for循环体数据时数据还未加载，就报未定义了。vue2中v-for优先级高，同时使用v-if可以直接使用v-for的循环体数据。无论时vue2还是3，官方都不建议两者一起使用，建议通过template嵌套。vue3和vue2 v-if和v-for同时使用时渲染优先级变了。查了下官方文档才找到问题所在。风格指南 — Vue.js。
使用 Vue 和 ECharts 打造动态数据可视化图表
最新发布
liyananweb的博客
07-18 518
通过本文，我们了解了如何使用 Vue 和 ECharts 来创建一个简单的柱状图，并实现了动态数据更新。Vue 的响应式数据绑定和 ECharts 的强大图表功能相结合，使得我们可以轻松地构建出功能强大且美观的数据可视化应用。希望这篇文章对你有所帮助。如果你有任何问题或建议，欢迎在评论区留言。百万大学生都在用的AI论文写作工具，篇篇无重复👉:AI论文写作。
vue3 选项式生命周期API 和 组合式生命周期API 执行先后顺序
shengmeshi的博客
07-17 135
vue3 选项式生命周期API 和 组合式生命周期API 执行先后顺序
7.17（nodejs、vue、SSH服务、SSH免密登录）
m0_71589190的博客
07-17 884
nodejs、vue、SSH服务、SSH免密登录
vue搜索框过滤--- computed、watch区别
学习笔记分享给大家
07-16 340
计算属性computed适用于需要基于其他数据动态变化，并且需要缓存的场景。侦听器watch适用于需要响应数据变化，执行异步或开销较大操作的场景。方法methods适用于定义组件的具体行为，包括事件处理和业务逻辑等。
el-table表头使用el-dropdown出现两个下拉框
weixin_50606255的博客
07-17 309
1.只显示第一个下拉框，通过控制样式将其他的下拉框display:none;如有问题，欢迎讨论！
构建响应式应用：Reactive Design Patterns解析
它鼓励通过声明式编程方式来处理事件和数据流，使系统能够灵活应对变化，实现低延迟和高吞吐量。 2. RxJava：RxJava是Java平台的一个库，它实现了反应式编程的概念。它允许开发者使用可观察序列来处理事件，这些...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值