脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue toRef toRefs toRaw

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

您可能感兴趣的文章:

相关文章

  • vue中实现动态生成二维码的方法

    vue中实现动态生成二维码的方法

    这篇文章主要介绍了vue中实现动态生成二维码的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • vue基础ESLint Prettier配置教程详解

    vue基础ESLint Prettier配置教程详解

    这篇文章主要介绍了vue基础ESLint Prettier配置教程详解，本文使用VsCode + Vue + ESLint + Prettier 实现代码格式规范 + 保存自动修复代码js+vue
    2022-07-07
  • vue父子组件的嵌套的示例代码

    vue父子组件的嵌套的示例代码

    本篇文章主要介绍了vue父子组件的嵌套的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 在vue框架下使用指令vue add element安装element报错问题

    在vue框架下使用指令vue add element安装element报错问题

    这篇文章主要介绍了在vue框架下使用指令vue add element安装element报错问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue学习记录之动态组件浅析

    vue学习记录之动态组件浅析

    动态组件指的是动态切换组件的显示与隐藏,这篇文章主要给大家介绍了关于vue学习记录之动态组件的相关资料,本文通过示例代码介绍介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • 使用Vue.js创建一个时间跟踪的单页应用

    使用Vue.js创建一个时间跟踪的单页应用

    这篇文章主要介绍了使用Vue.js创建一个时间跟踪的单页应用的相关资料,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2016-11-11
  • Vue开发项目中如何使用Font Awesome 5

    Vue开发项目中如何使用Font Awesome 5

    Font Awesome是一套流行的图标字体库,我们在实际开发的过程中会经常遇到需要使用图标的场景,对于一些常用的图标,我们可以直接在Font Awesome中找到并且使用,这篇文章主要给大家介绍了关于Vue开发项目中如何使用Font Awesome5的相关资料,需要的朋友可以参考下
    2021-11-11
  • vue递归生成树状结构的示例代码

    vue递归生成树状结构的示例代码

    这篇文章主要介绍了vue递归生成树状结构的示例,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-07-07
  • vue elementui 实现搜索栏公共组件封装的实例代码

    vue elementui 实现搜索栏公共组件封装的实例代码

    这篇文章主要介绍了vue elementui 搜索栏公共组件封装,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-01-01
  • Vue3项目中引入html页面的方法举例

    Vue3项目中引入html页面的方法举例

    这篇文章主要给大家介绍了关于Vue3项目中引入html页面的相关资料,Vue3是一个JavaScript框架,通常我们使用它来构建单页应用程序(SPA),如果你想在HTML页面中使用Vue3,可以参考这篇文章,需要的朋友可以参考下
    2023-09-09

最新评论