vue3中toRef、toRefs和toRaw的使用
更新时间：2024年05月13日 11:59:29 作者：猛扇赵四那半好嘴
本文主要介绍了vue3中toRef、toRefs和toRaw的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
1.toRef
toRef 的作用是将一个响应式对象中的属性转换成单独的响应式引用。转换后的响应式引用会跟踪原始属性的变化。转换后的响应式可以被用于计算属性及监听器中。
如果原始对象是非响应式的则不会更新视图，数据会改变。
接收两个参数：
- 参数一：原始对象；
- 参数二：属性。
<template>
<div>
{{ man }}
</div>
<br />
<div>
<button @click="change">点击</button>
</div>
</template>
<script setup lang="ts">
import { toRef, toRefs, reactive, toRaw } from 'vue'
const man = reactive({ name: '张三', age: 18, like: '唱' })
const like = toRef(man, 'like')
const change = () => {
man.age = 19
like.value = '跳'
console.log(man)
}
</script>点击前页面：
点击后结果：
2.toRefs
toRefs 将一个对象的所有属性变成响应式引用，追踪原对象的引用关系。
原始对象如果是响应式的，则当修改属性值时，数据和视图都会更新；原对象如果非响应式，则修改属性值时，数据会更新，视图不更新。
接收一个参数：原始对象。
<template>
<div>
{{ man }}
</div>
<br />
<div>
<button @click="change2">点击2</button>
</div>
</template>
<script setup lang="ts">
import { toRef, toRefs, reactive, toRaw } from 'vue'
const man = reactive({ name: '张三', age: 18, like: '唱' })
const { name, age } = toRefs(man)
const change2 = () => {
name.value = '李四'
age.value = 20
}
</script>
<style scoped></style>点击前页面：
点击后结果：
3.toRaw
toRaw 将一个响应式对象变成非响应式。修改属性值时，数据会改变，视图不会更新。
接受一个参数：原始对象。
<template>
<div>
{{ man }}
</div>
<br />
<div>
<button @click="change3">点击3</button>
</div>
</template>
<script setup lang="ts">
import { toRef, toRefs, reactive, toRaw } from 'vue'
const man = reactive({ name: '张三', age: 18, like: '唱' })
const change3 = () => {
// 手写toRaw
console.log(man['__v_raw'])
// 调用toRaw
console.log(toRaw(man))
}
</script>点击前与点击后页面：
点击后结果：
到此这篇关于vue3中toRef、toRefs和toRaw的使用的文章就介绍到这了,更多相关vue3 toRef toRefs toRaw内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在Vue项目中,Axios是一个非常流行的HTTP客户端,用于发送请求和接收响应,Axios拦截器是Axios的一个强大功能,它允许你在请求发送之前和响应返回之后对请求和响应进行处理和拦截,本文将结合实际案例,详细介绍如何在Vue中使用Axios拦截器,需要的朋友可以参考下2024-12-12
vue+element-ui JYAdmin后台管理系统模板解析
这篇文章主要介绍了vue+element-ui JYAdmin后台管理系统模板解析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了vue常用高阶函数及综合案例，文章内容讲解的很清晰，有对于这方面感兴趣的同学可以研究下2021-02-02
Vue POST请求头'Content-Type':'application/j
这篇文章主要介绍了Vue POST请求头'Content-Type':'application/json;',data上传过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家详细介绍了Vue实现手机计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要介绍了Vue filter介绍及详细使用,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-04-04
近期在做ve3的项目时因为功能需要,需要获取当前路由的地址,下面这篇文章主要给大家介绍了关于vue3获取当前路由地址的两种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
前端插件库之vue3使用vue-codemirror插件的步骤和实例
CodeMirror是一款基于JavaScript、面向语言的前端代码编辑器,下面这篇文章主要给大家介绍了关于前端插件库之vue3使用vue-codemirror插件的步骤和实例,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了 Vue 中 title 的动态修改问题，文中通过两种方案给大家介绍了title的传递问题 ,需要的朋友可以参考下2019-06-06
vue如何使用html2canvas和JsPDF导出pdf组件
这篇文章主要介绍了vue如何使用html2canvas和JsPDF导出pdf组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-09-09
最新评论