当前位置：首页 > article >正文

toRef，toRefs，toRaw

article 2024/11/14 20:22:54

假设有一个响应式对象 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，因为修改了非响应式对象，不会影响响应式状态