vue中组合式 API-依赖注入之provide和inject的用法——添加响应性 & 污染全局数据、破坏了单向数据流,vuex可追踪数据 & 三种通信方式之父子通信、兄弟通信、跨级通信
<script setup lang="ts">
import { provide, inject, ref, watchEffect } from 'vue';
// 创建响应式数据
const theme = ref('light');
// 提供theme变量的响应式响应能力
provide('theme', theme);
// 监听theme变量的变化，并作出响应
watchEffect(() => {
console.log(`当前主题是：${theme.value}`);
});
// 假设有一个函数需要通过theme变量进行响应式响应
function updateThemeBasedOnExternalCondition(newTheme: string) {
theme.value = newTheme;
}
// 测试函数
updateThemeBasedOnExternalCondition('dark');
</script>这段代码展示了如何在Vue 3的setup script中使用provide和ref来创建响应式数据，并使用watchEffect来监听这些数据的变化。同时，演示了如何在组件树中的任何子组件中注入并使用这些响应式数据。这个例子中的theme变量是全局的，并且是响应式的，这意味着任何依赖于它的计算或副作用函数都会在它发生变化时更新。
评论已关闭