1. vue3中的ref、toRef、toRefs

ref： 用于创建一个包装对象，将普通 JavaScript 值转换为响应式对象。通常用于定义组件内部的响应式数据。

import { ref } from 'vue';
const count = ref(0); // 创建一个包装对象，初始值为 0
console.log(count.value); // 访问响应式数据时需要使用 .value 属性

toRef： 用于创建一个基于响应式对象的引用。当我们需要在组件内将一个响应式对象的属性传递给另一个函数或组件时，可以使用 toRef 创建一个基于响应式对象属性的引用，而不是直接将属性值传递。

import { toRef } from 'vue';
const state = reactive({ count: 0 });
// 创建一个基于 state.count 的引用
const countRef = toRef(state, 'count');
console.log(countRef.value); // 访问引用的值

toRefs： 用于将一个响应式对象的所有属性转换为引用。通常在组件的 setup 函数中使用，将响应式对象解构为多个引用，方便在模板中使用。

import { reactive, toRefs } from 'vue';
const state = reactive({ count: 0, name: 'Vue' });
// 将 state 的所有属性转换为引用
const { count, name } = toRefs(state);
console.log(count.value); // 访问引用的值
console.log(name.value); // 访问引用的值

总之，ref 用于创建一个包装对象，将普通值转换为响应式对象；toRef 用于创建一个基于响应式对象的引用；toRefs 用于将一个响应式对象的所有属性转换为引用。

2. provide/inject如何实现跨层传递数据

定义

provide和inject用来实现组件之间的数据传递，它们更适用跨多个层级的组件传递数据，而不仅仅是父子组件之间的通信。

实现

新建项目 App.js 代码如下：

import { h, provide, inject } from "vue";

const Provider = {
  name: "provider",
  setup() {
    provide("foo", "fooVal");
    provide("bar", "barVal");
    return {};
  },
  render() {
    return h("div", {}, [h("p", {}, "provider"), h(Consumer)]);
  },
}; 

const Consumer = {
  name: "consumer",
  setup() {
    const foo = inject("foo");
    const bar = inject("bar");
    return {
      foo,
      bar
    };
  },
  render() {
    return h("div", {}, [
      h("p", {}, `consumer：${this.foo} - ${this.bar}`),
    ]);
  },
};

export const App = {
  name: "app",
  render() {
    return h("div", {}, [h("p", {}, "app"), h(Provider)]);
  },
  setup() {
    return {};
  },
};