vue3学习——Ref全家桶

在Vue 3中，ref是一个用于创建响应式引用对象的API。ref可以用于跟踪单个响应式值。ref是reactive对象的一个轻量版本，适用于跟踪单个值。

ref在Vue 3中的使用场景主要是在组件内部管理状态。

以下是一个使用ref的基本示例：

<template>
  <div>
    <input v-model="message" />
    <p>Message: {{ message }}</p>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const message = ref('');
    return { message };
  }
};
</script>

在这个例子中，我们创建了一个响应式的ref，它被初始化为空字符串。v-model用于双向绑定输入框的值到message。

ref全家桶是指一系列相关的API，如toRef、toRefs和customRef，它们用于在不同的场景下对ref进行扩展或自定义。

例如，toRef可以用来创建一个响应式引用，该引用是另一个响应式对象的特定属性：

import { reactive, toRef } from 'vue';
 
const state = reactive({
  foo: 'bar',
  baz: 'qux'
});
 
const fooRef = toRef(state, 'foo');
 
// 现在 fooRef 是一个响应式引用，它跟踪 state.foo 的变化

toRefs可以用来将reactive对象的属性转换为ref对象：

import { reactive, toRefs } from 'vue';
 
const state = reactive({
  foo: 'bar',
  baz: 'qux'
});
 
const stateRefs = toRefs(state);
 
// stateRefs 现在是一个带有 foo 和 baz 属性的对象，
// 每个属性都是指向 state 中相应属性的 ref

customRef可以用来创建自定义的ref，它可以定义在属性被读取和更改时执行的自定义行为：

import { customRef } from 'vue';
 
const myRef = customRef((track, trigger) => {
  return {
    get() {
      // 当值被读取时执行
      track();
      return theValue;
    },
    set(newValue) {
      // 当值被更改时执行
      theValue = newValue;
      trigger();
    }
  };
});
 
// 使用 myRef 就像使用普通 ref 一样

这些是ref全家桶的基本概念和使用方法。