Vue 3.0 引入了一些新的响应性基础 API,这些 API 与 Vue 2.x 中的响应性系统有一些不同。以下是 Vue 3.0 中的一些主要响应性 API:

1. ref 函数:
   import { ref } from 'vue';

   const myVar = ref(initialValue);

   ref 函数用于创建一个响应式对象。myVar 是一个包含 .value 属性的对象,该属性持有变量的当前值。这是因为在 Vue 3.0 中,直接使用 myVar 会得到一个包装对象,实际的值位于 .value 属性中。

2. reactive 函数:
   import { reactive } from 'vue';

   const myObject = reactive({
     key: 'value'
   });

   reactive 函数用于创建一个响应式的对象。与 ref 不同,reactive 可以用于创建包含多个属性的对象。

3. toRef 和 toRefs 函数:
   import { toRef, toRefs } from 'vue';

   const obj = reactive({
     a: 1,
     b: 2
   });

   const aRef = toRef(obj, 'a');
   const { a, b } = toRefs(obj);

   toRef 用于创建一个 ref 对象,其值绑定到原始对象的指定属性。toRefs 则可以将整个响应式对象转换为一个包含 ref 的对象。

4. computed 函数:
   import { computed } from 'vue';

   const result = computed(() => {
     return myVar.value * 2;
   });

   computed 函数用于创建计算属性。传入的函数中的任何 ref 或 reactive 对象的变化都会触发重新计算。

这些是 Vue 3.0 中的一些响应性基础 API。使用这些 API,你可以更灵活地处理状态和数据的响应性。


转载请注明出处:http://www.zyzy.cn/article/detail/578/Vue 3.0