Vue3 中常用的API

1. vue3中的ref、toRef、toRefs

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

js 复制代码

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

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

js 复制代码

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

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

js 复制代码

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用来实现组件之间的数据传递，它们更适用跨多个层级的组件传递数据，而不仅仅是父子组件之间的通信。
provide：用于提供可以被后代组件注入的值。
provide 和 inject 通常成对一起使用，使一个祖先组件作为其后代组件的依赖注入方，无论这个组件的层级有多深都可以注入成功，只要他们处于同一条组件链上。
这个 provide 选项应当是一个对象或是返回一个对象的函数。这个对象包含了可注入其后代组件的属性。
inject：用于声明要通过从上层提供方匹配并注入进当前组件的属性。

实现

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

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 {};
  },
};

以上代码，定义了三个组件app， provide，consumer形成一个树状的层级关系。
app组件中引用了provide组件。provide组件中注入了foo和bar，并且引用了consumer组件。
consumer组件通过inject获取到foo和bar，并在组件内部渲染这两个值。