Vue3 使用 toRef toRefs toRaw

最新推荐文章于 2023-10-09 13:59:01 发布

是小张呀！

最新推荐文章于 2023-10-09 13:59:01 发布

阅读量230

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_52099965/article/details/127437996

版权

本文介绍了Vue中toRef、toRefs和toRaw的使用，详细解释了如何将非响应式对象转换为响应式，以及在模板和脚本中如何操作响应式数据。通过示例展示了它们在实际开发中的应用，帮助理解Vue的响应式机制。

摘要由CSDN通过智能技术生成

toRef

如果原始对象是非响应式的就不会更新视图数据是会变的
如果原始对象是响应式的是会更新视图并且改变数据的

<template>
   <div>
      <button @click="change">按钮</button>
      {{state}}
   </div>
</template>
 
<script setup lang="ts">

import { toRef } from 'vue'
 
const obj = {
   zs: 1,
   ls: 1
}
 
const state = toRef(obj, 'zs')  //zs 转化为响应式对象

const change = () => {
   state.value++
   console.log(obj, state);
}
</script>

toRefs

可以批量创建ref对象主要是方便解构使用


<template>
   <div>
      <button @click="change">按钮</button>
      {{state}}
   </div>
</template>
 
<script setup lang="ts">

import { reactive, toRefs } from 'vue'

const obj = reactive({
   zs: 1,
   ls: 1
})
 
let { zs, ls } = toRefs(obj)
 
ls.value++

console.log(zs, ls);

</script>

toRaw

将响应式对象转化为普通对象


<template>
   <div>
      <button @click="change">按钮</button>
   </div>
</template>
 
<script setup lang="ts">

import { reactive, toRaw } from 'vue'
 
const obj = reactive({
   zs: 1,
   ls: 1
})
 
 
const state = toRaw(obj)
// 响应式对象转化为普通对象
 
const change = () => {
   console.log(obj, state);
}

</script>