vite+ts+vue3 知识点（toRef，toRefs，toRaw）

微光无限

已于 2023-03-27 23:30:11 修改

阅读量582

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue3 文章标签： javascript 前端 vue.js

于 2022-12-04 13:44:22 首次发布

本文链接：https://blog.csdn.net/sdhshsjh/article/details/128162513

vue3 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了Vue中toRef、toRefs及toRaw的功能与用法。toRef用于单个属性的响应式处理；toRefs则适用于多个属性的操作；toRaw可以将响应式对象转换为普通对象。文章通过具体示例展示了这些API的使用方法。

toRef（只能修改响应式对象的值，适合单个属性操作）

import { toRef, reactive } from "vue";

let person = reactive({ name: "老天师", age: 123, like: "雷法" });

const toRefLike = toRef(person, "like");

const btn = () => {
  toRefLike.value = "金光咒";
};

toRefs（只能修改响应式对象的值，适合多个属性解构）

import { toRefs, reactive } from "vue";

let person = reactive({ name: "老天师", age: 123, like: "雷法" });

const { name, age, like } = toRefs(person);

const btn = () => {
  name.value = "天通道人";
  age.value = 108;
  like.value = "金光咒";
};

toRaw（将proxy响应式对象变为普通对象）

import { toRef, toRaw, toRefs, reactive } from "vue";

let person = reactive({ name: "老天师", age: 123, like: "雷法" });

const btn = () => {
  console.log(person, toRaw(person)); 
  // Reactive<Object> {name: '老天师', age: 123, like: '雷法'}
};