Vue toRef toRefs toRaw函数使用示例
更新时间：2023年03月09日 09:33:36 作者：剑九 六千里
这篇文章主要介绍了Vue toRef toRefs toRaw函数使用示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
1. toRef
- 将一个对象中的属性转换成单独的响应式引用
- 接收两个参数：参数一 => 对象 参数二 => 属性
- 转换后的响应式引用会跟踪原始属性的变化
- 转换后的响应式可以被用于计算属性及监听器中
使用toRef函数
<template>
<div class="wrapper">
<button @click="handleClick">修改</button>
<div>countRef: {{ countRef }}</div>
</div>
</template>
<script setup lang="ts">
import { reactive, toRef } from 'vue';
let obj = {
name: '张三',
count: 0
}
let countRef = toRef(obj, 'count')
const handleClick = () => {
countRef.value++
console.log(countRef.value, 'countRef.value');
}
</script>
<style scoped>
div {
font-size: 28px;
}
</style>
原对象为非响应式，改变后，值会改变，但页面不会更新
原对象是响应式，改变后，值改变，页面也会更新
<template>
<div class="wrapper">
<button @click="handleClick">修改</button>
<div>countRef: {{ countRef }}</div>
</div>
</template>
<script setup lang="ts">
import { reactive, toRef } from 'vue';
let obj = reactive({
name: '张三',
count: 0
})
let countRef = toRef(obj, 'count')
const handleClick = () => {
countRef.value++
console.log(countRef.value, 'countRef.value');
}
</script>
<style scoped>
div {
font-size: 28px;
}
</style>
2. toRefs
- 将一个对象的所有属性变成响应式引用
- 接收一个对象
- 追踪原对象的引用关系
- 原对象如果是响应式的，那么修改值会更新，视图会刷新
- 原对象如果非响应式，那么修改值会更新，视图不会更新
使用toRefs函数
<template>
<div>
<button @click="handleClick">修改</button>
<div>num: {{ num }}</div>
<div>count: {{ count }}</div>
<div>age: {{ age }}</div>
</div>
</template>
<script setup lang="ts">
import { reactive, toRefs } from 'vue';
let obj = reactive({
num: 0,
count: 0,
age: 0
})
let { num, count, age } = toRefs(obj)
const handleClick = () => {
num.value++
console.log(num.value, 'num.value');
count.value++
console.log(count.value, 'count.value');
age.value++
console.log(age.value, 'age.value');
}
</script>
<style scoped>
div {
font-size: 28px;
}
</style>
3. toRaw
- 将一个响应式对象变成非响应式
- 修改值会更新，视图不会刷新
使用toRaw函数
<template>
<div>
<button @click="handleClick">修改</button>
<div>num: {{ num }}</div>
<div>count: {{ count }}</div>
<div>age: {{ age }}</div>
</div>
</template>
<script setup lang="ts">
import { reactive, toRaw } from 'vue';
let obj = reactive({
num: 0,
count: 0,
age: 0
})
let { num, count, age } = toRaw(obj)
const handleClick = () => {
num++
console.log(num, 'num');
count++
console.log(count, 'count');
age++
console.log(age, 'age');
}
</script>
<style scoped>
div {
font-size: 28px;
}
</style>
总结：这篇文章介绍了Vue3中将响应式对象的属性转换为响应式引用的toRef函数和用于将多个响应式对象的属性转换为响应式引用的toRefs函数，以及用于获取响应式对象的原始对象的toRaw函数。这些函数可以帮助我们快速创建响应式数据，实现数据的自动更新。需要注意的是，使用toRaw函数获取一个响应式对象的原始对象是不推荐的做法，因为原始对象不具备响应式的特性，对原始对象的修改不会触发相应的依赖更新。
到此这篇关于Vue toRef toRefs toRaw函数使用示例的文章就介绍到这了,更多相关Vue toRef toRefs toRaw内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了element-ui中按需引入的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要介绍了在Echarts图中给坐标轴加一个标识线markLine，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
vue3+vite使用vite-plugin-svg-icons插件显示本地svg图标的方法
这篇文章主要介绍了vue3+vite使用vite-plugin-svg-icons插件显示本地svg图标的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了使用vue如何构建一个自动建站项目，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
这篇文章主要为大家详细介绍了vue+element-ui+axios实现图片上传，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-08-08
vue中axios的封装问题(简易版拦截,get,post)
这篇文章主要介绍了vue中axios的封装问题(简易版拦截,get,post),需要的朋友可以参考下2018-06-06
这篇文章主要为大家详细介绍了Vue+Element实现表格单元格编辑，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要给大家介绍了关于vue实现多条件筛选的相关资料,随着数据的不断增多,我们往往需要在表格中进行多条件的筛选,以便快速定位符合我们需求的数据,需要的朋友可以参考下2023-09-09
今天小编就为大家分享一篇vue中更改数组中属性,在页面中不生效的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
本篇文章主要介绍了vue 运用mock数据的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
最新评论