toRef，toRefs，toRaw
假设有一个响应式对象 state，我们只想独立地访问和修改其中的某个属性，比如 count：
toRef
import { reactive, toRef } from 'vue';
// 创建一个响应式对象
const state = reactive({
count: 0,
message: "Hello Vue 3"
});
// 使用 toRef 创建 count 的引用
const countRef = toRef(state, 'count');
// 现在 countRef 是一个响应式的引用，修改它会更新 state.count
countRef.value++; // state.count 将变成 1
console.log(state.count); // 输出：1
toRefs
import { reactive, toRefs } from 'vue';
const state = reactive({
count: 0,
message: "Hello Vue 3"
});
// 使用 toRefs 将对象的属性全部转换为 ref
const { count, message } = toRefs(state);
count.value++; // state.count 也将更新
toRaw
import { reactive, toRaw } from 'vue';
// 创建一个响应式对象
const state = reactive({
count: 0,
message: "Hello Vue 3"
});
// 获取响应式对象的原始版本
const rawState = toRaw(state);
console.log(rawState); // 输出非响应式对象：{ count: 0, message: "Hello Vue 3" }
// 修改 rawState 的属性，不会触发响应性更新
rawState.count++;
console.log(state.count); // 输出 0，因为修改了非响应式对象，不会影响响应式状态
原文地址：https://blog.csdn.net/anxin_wang/article/details/143696020
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！