VuetoReftoRefstoRaw函数使用示例

Vue toRef函数 Vue toRefs函数 Vue toRaw函数 2023-03-09 17:03:15 328人浏览泡泡鱼

摘要

目录1. toRef2. toRefs3. toRaw1. toRef 将一个对象中的属性转换成单独的响应式引用接收两个参数：参数一 => 对象参数二 => 属性转换后

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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: VuetoReftoRefstoRaw函数使用示例

本文链接: https://www.lsjlt.com/news/199116.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341