Vue 3.0 响应性基础 API

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.pingtaimeng.com/article/detail/578/Vue 3.0