脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3响应式API

vue3响应式转换常用API操作示例代码

 更新时间：2024年08月03日 09:36:27   作者：今天你有学习吗  
在Vue 3中,响应式系统得到了显著改善,包括使用Composition API时更加灵活的状态管理,这篇文章主要介绍了vue3响应式转换常用API操作示例代码,需要的朋友可以参考下

响应式常用API

  • ref 相关：toRef、toRefs、unRef
  • 只读代理：readonly
  • 判断相关：isRef、isReactive、isProxy、isReadonly
  • 3.3新增API：toValue

ref相关

toRef：基于响应式对象的某一个属性，将其转换为 ref 值

import { reactive, toRef } from 'vue'
const state = reactive({
  count: 0
})
const countRef = toRef(state, 'count')
// 这里其实就等价于 ref(state.count)
console.log(countRef)
console.log(countRef.value)
import { reactive, isReactive, toRef } from 'vue'
const state = reactive({
  count: {
    value: 0
  }
})
console.log(isReactive(state)) // true
console.log(isReactive(state.count)) // true
const countRef = toRef(state, 'count')
// 相当于 ref(state.count)
console.log(countRef)
console.log(countRef.value)
console.log(countRef.value.value)

toRefs：将一个响应式对象转为一个普通对象，普通对象的每一个属性对应的是一个 ref 值

import { reactive, toRefs } from 'vue'
const state = reactive({
  count: 0,
  message: 'hello'
})
const stateRefs = toRefs(state)
console.log(stateRefs) // {count: RefImpl, message: RefImpl}
console.log(stateRefs.count.value)
console.log(stateRefs.message.value)

unRef: 如果参数给的是一个 ref 值，那么就返回内部的值，如果不是 ref，那么就返回参数本身

这个 API 实际上是一个语法糖： val = isRef(val) ? val.value : val

import { ref, unref } from 'vue'
const countRef = ref(10)
const normalValue = 20
console.log(unref(countRef)) // 10
console.log(unref(normalValue)) // 20

只读代理

接收一个对象（不论是响应式的还是普通的）或者一个 ref，返回一个原来值的只读代理。

import { ref, readonly } from 'vue'
const count = ref(0)
const count2 = readonly(count) // 相当于创建了一个 count 的只读版本
count.value++;
count2.value++; // 会给出警告

在某些场景下，我们就是希望一些数据只能读取不能修改

const rawConfig = {
  apiEndpoint: 'https://api.example.com',
  timeout: 5000
};
// 例如在这个场景下，我们就期望这个配置对象是不能够修改的
const config = readonly(rawConfig)

判断相关

isRef 和 isReactive

import { ref, shallowRef, reactive, shallowReactive, isRef, isReactive } from 'vue'
const obj = {
  a:1,
  b:2,
  c: {
    d:3,
    e:4
  }
}
const state1 = ref(obj)
const state2 = shallowRef(obj)
const state3 = reactive(obj)
const state4 = shallowReactive(obj)
console.log(isRef(state1)) // true
console.log(isRef(state2)) // true
console.log(isRef(state1.value.c)) // false
console.log(isRef(state2.value.c)) // false
console.log(isReactive(state1.value.c)) // true
console.log(isReactive(state2.value.c)) // false
console.log(isReactive(state3)) // true
console.log(isReactive(state4)) // true
console.log(isReactive(state3.c)) // true
console.log(isReactive(state4.c)) // false

isProxy: 检查一个对象是否由 reactive、readonly、shallowReactive、shallowReadonly 创建的代理

import { reactive, readonly, shallowReactive, shallowReadonly, isProxy } from 'vue'
// 创建 reactive 代理对象
const reactiveObject = reactive({ message: 'Hello' })
// 创建 readonly 代理对象
const readonlyObject = readonly({ message: 'Hello' })
// 创建 shallowReactive 代理对象
const shallowReactiveObject = shallowReactive({ message: 'Hello' })
// 创建 shallowReadonly 代理对象
const shallowReadonlyObject = shallowReadonly({ message: 'Hello' })
// 创建普通对象
const normalObject = { message: 'Hello' }
console.log(isProxy(reactiveObject)) // true
console.log(isProxy(readonlyObject)) // true
console.log(isProxy(shallowReactiveObject)) // true
console.log(isProxy(shallowReadonlyObject)) // true
console.log(isProxy(normalObject)) // false

3.3新增API

toValue

这个 API 和前面介绍的 unref 比较相似

import { ref, toValue } from 'vue'
const countRef = ref(10)
const normalValue = 20
console.log(toValue(countRef)) // 10
console.log(toValue(normalValue)) // 20

toValue 相比 unref 更加灵活一些，它支持传入 getter 函数，并且返回函数的执行结果

import { ref, toValue } from 'vue'
const countRef = ref(10)
const normalValue = 20
const getter = ()=>30;
console.log(toValue(countRef)) // 10
console.log(toValue(normalValue)) // 20
console.log(toValue(getter)) // 30

-EOF-

到此这篇关于vue3响应式转换常用API的文章就介绍到这了,更多相关vue3响应式常用API内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue里使用create,mounted调用方法的正确姿势说明

    vue里使用create,mounted调用方法的正确姿势说明

    这篇文章主要介绍了vue里使用create,mounted调用方法的正确姿势，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • vue+Element-ui实现分页效果

    vue+Element-ui实现分页效果

    这篇文章主要为大家详细介绍了vue+Element-ui实现分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • vue中计算属性和方法的区别及说明

    vue中计算属性和方法的区别及说明

    这篇文章主要介绍了vue中计算属性和方法的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • vue3 使用 vue3-video-play实现在线视频播放

    vue3 使用 vue3-video-play实现在线视频播放

    这篇文章主要介绍了vue3 使用 vue3-video-play 进行在线视频播放,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-06-06
  • Vue.js 中 ref 和 reactive 的区别及用法解析

    Vue.js 中 ref 和 reactive 的区别及用法解析

    在Vue.js中,ref主要用于创建响应式的引用,通过.value属性来访问和修改值,特别适用于需要频繁更改整个值的场景,而reactive则用于创建深度响应的对象或数组,本文给大家介绍Vue.js 中 ref 和 reactive 的区别及用法,感兴趣的朋友跟随小编一起看看吧
    2024-09-09
  • vue中阻止click事件冒泡,防止触发另一个事件的方法

    vue中阻止click事件冒泡,防止触发另一个事件的方法

    下面小编就为大家分享一篇vue中阻止click事件冒泡,防止触发另一个事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • VUE3之Non-Props属性的具体使用

    VUE3之Non-Props属性的具体使用

    本文主要介绍了VUE3之Non-Props属性的具体使用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-01-01
  • vue 怎么创建组件及组件使用方法

    vue 怎么创建组件及组件使用方法

    vue中的核心就是组件，组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码，下面通过本文重点给大家介绍vue 创建组件及组件使用方法，感兴趣的朋友一起看看吧
    2017-07-07
  • vue基于element的区间选择组件

    vue基于element的区间选择组件

    这篇文章主要介绍了vue基于element的区间选择组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • mpvue 项目初始化及实现授权登录的实现方法

    mpvue 项目初始化及实现授权登录的实现方法

    这篇文章主要介绍了mpvue 项目初始化及实现授权登录的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07

最新评论