Vue3的reactive、ref、toRef、toRefs用法以及区别

在 Vue3 中,reactive, ref, toRef, toRefs 都是用于创建响应式数据的方法。它们之间的主要区别在于它们的使用方式和返回值类型。

  1. reactive:用于将一个普通对象转换为响应式对象。当对象的属性发生变化时,视图会自动更新。
import { reactive } from 'vue';

const state = reactive({
  count: 0,
  info: {
    name: '张三',
    age: 18
  }
});
  1. ref:用于创建一个响应式的引用对象。它接受一个参数,可以是基本类型(如数字、字符串等),也可以是对象。当引用的值发生变化时,视图会自动更新。
import { ref } from 'vue';

const count = ref(0);
const info = ref({
  name: '张三',
  age: 18
});
  1. toRef:用于创建一个响应式的引用对象,与 ref 类似,但它接受一个对象作为参数。当对象的属性发生变化时,视图会自动更新。
import { toRef } from 'vue';

const state = reactive({
  info: {
    name: '张三',
    age: 18
  }
});

const nameRef = toRef(state, 'info.name');
const ageRef = toRef(state, 'info.age');
  1. toRefs:用于将一个响应式对象的所有属性转换为单独的响应式引用对象。这样可以让代码更易于理解和维护。
import { reactive, toRefs } from 'vue';

const state = reactive({
  count: 0,
  info: {
    name: '张三',
    age: 18
  }
});

const { count, info } = toRefs(state);

总结:reactive 用于创建响应式对象,可以包含嵌套的对象;reftoRef 用于创建响应式的引用对象,只能包含基本类型或对象的某个属性;toRefs 用于将响应式对象的所有属性转换为单独的响应式引用对象。

你可能感兴趣的:(Vue3,vue.js,javascript,前端)