Vue3 中的`provide`和`inject`有什么作用？

在 Vue3 中，provide和inject用于实现组件之间的数据传递，尤其是在嵌套层级较深的组件间进行数据共享时非常有用。

1. provide的作用
   • provide选项用于在父组件中提供数据或方法，使得后代组件能够访问到这些数据或方法。
   • 例如，在一个根组件或者较高级别的组件中，可以使用provide来提供一个值：

        import { provide, ref } from 'vue';
        const app = {
          setup() {
            const theme = ref('dark');
            provide('theme', theme);
            return {
              theme
            };
          }
        };

   • 这里的provide('theme', theme)语句表示提供了一个名为theme的数据，其值为theme这个响应式对象（在这个例子中是一个ref创建的响应式变量）。这个提供的数据可以被后代组件获取到。
   • inject的作用
     • inject选项用于在后代组件中注入由父组件（或祖先组件）通过provide提供的数据或方法。
     • 继续上面的例子，在后代组件中可以这样使用inject： <