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