Vue 3 组合式 API 指南：相应式状态管理与跨组件通信

引言

随着 Vue 3 的发布，Vue 引入了一个新的编程范式——组合式 API（Composition API）。这一新特性旨在办理 Options API 在处理复杂逻辑时的一些局限性，并提供了一种更灵活、更可重用的方式来组织和重用代码
组合式 API 基础

setup 函数的概念和作用

在 Vue 组合式 API 中，setup 函数是组件的入口点，它在组件实例被创建时调用，但在任何生命周期钩子之前执行。setup 函数的告急作用是初始化相应式状态、计算属性、方法和侦听器，并将它们暴露给模板和组件的其他部门。

1. import { ref, reactive, computed, watch } from 'vue';
3. export default {
4.   setup() {
5.     // 初始化响应式状态和功能
6.     return {
7.       // 暴露给模板和组件其他部分的响应式状态和功能
8.     };
9.   }
10. };

复制代码

相应式引用 ref 和相应式对象 reactive 的使用方法

在 Vue 3 中，ref 和 reactive 是创建相应式状态的两个告急工具。

• ref 用于创建单个相应式值，它返回一个相应式的引用对象。当引用的值是基本数据类型时，Vue 会主动将其包装在对象中。
  

1. import { ref } from 'vue';
3. export default {
4.   setup() {
5.     const count = ref(0);
7.     // 通过 .value 访问和修改响应式值
8.     console.log(count.value); // 输出 0
9.     count.value++;
10.     console.log(count.value); // 输出 1
12.     return {
13.       count
14.     };
15.   }
16. };

复制代码

• reactive 用于创建一个相应式对象。它返回一个相应式的代理对象，该对象的属性访问和修改都是相应式的。（现实上，ref底层就是reactive实现的，现实开发中一般ref用的多）
  

1. import { reactive } from 'vue';
3. export default {
4.   setup() {
5.     const state = reactive({ count: 0 });
7.     // 直接访问和修改响应式对象的属性
8.     console.log(state.count); // 输出 0
9.     state.count++;
10.     console.log(state.count); // 输出 1
12.     return {
13.       state
14.     };
15.   }
16. };

复制代码

使用 computed 和 watch 创建计算属性和侦听器

computed 和 watch 是 Vue 组合式 API 中用于处理计算属性和侦听器的工具。

• computed 用于创建计算属性，它担当一个 getter 函数，并返回一个只读的相应式引用。
  

1. import { ref, computed } from 'vue';
3. export default {
4.   setup() {
5.     const count = ref(0);
6.     const doubleCount = computed(() => count.value * 2);
8.     // 访问计算属性
9.     console.log(doubleCount.value); // 输出 0
11.     return {
12.       count,
13.       doubleCount
14.     };
15.   }
16. };

复制代码

• watch 用于创建侦听器，它监视一个或多个相应式引用的变化，并在变化时执行一个回调函数。
  

1. import { ref, watch } from 'vue';
3. export default {
4.   setup() {
5.     const count = ref(0);
7.     watch(count, (newValue, oldValue) => {
8.       console.log(`Count changed from ${oldValue} to ${newValue}`);
9.     });
11.     return {
12.       count
13.     };
14.   }
15. };

复制代码

provide 和 inject

在 Vue.js 中，provide 和 inject 是两个用于实现跨组件依靠注入的 API。它们答应一个先人组件定义可供其所有子孙组件使用的数据或方法，而无需通过逐层通报 props 或使用事件发射器。
provide

provide 函数答应你在组件内部提供一个值，这个值可以被其所有子孙组件注入。provide 可以在组件的 setup 函数中使用，也可以在组件的 methods、computed 或 watch 中使用。

1. import { provide } from 'vue';
3. export default {
4.   setup() {
5.     // 提供一个响应式对象
6.     const state = reactive({ count: 0 });
8.     // 提供一个方法
9.     const increment = () => {
10.       state.count++;
11.     };
13.     // 使用 provide 函数提供数据
14.     provide('state', state);
15.     provide('increment', increment);
17.     // ...
18.   }
19. };

复制代码

在上面的例子中，state 和 increment 方法被提供给所有子孙组件。
inject

inject 函数用于在子孙组件中注入由先人组件提供的数据或方法。inject 可以在组件的 setup 函数中使用，也可以在组件的 methods、computed 或 watch 中使用。

1. import { inject } from 'vue';
3. export default {
4.   setup() {
5.     // 注入 'state' 和 'increment'
6.     const state = inject('state');
7.     const increment = inject('increment');
9.     // 使用注入的数据和方法
10.     console.log(state.count); // 输出 0
11.     increment(); // 增加计数
13.     // ...
14.   }
15. };

复制代码

在上面的例子中，state 和 increment 被注入到子孙组件中，并可以像本地数据一样使用。
留意事项

• provide 和 inject 是成对使用的，只有当先人组件提供了某个值，子孙组件才华注入这个值。
  
• provide 和 inject 提供的值是相应式的，这意味着假如提供的值发生变化，所有注入了这个值的子孙组件都会主动更新。
  
• provide 和 inject 可以在组件的任何生命周期钩子中使用，但通常在 setup 函数中使用，以确保在组件初始化时提供和注入值。
  

通过使用 provide 和 inject，开发者可以更灵活地管理组件之间的依靠关系，特别是在大型应用中，这有助于淘汰组件之间的耦合度，进步代码的可维护性。
 子孙组件能改动inject注入的值吗

孙组件不能直接修改通过 inject 注入的相应式数据。这是为了保持数据流的清楚和组件之间的独立性，克制潜伏的副作用和难以追踪的错误。
然而，假如你确实须要在子孙组件中修改注入的值，你可以通过以下方法实现：
1.使用 ref 或 reactive 提供相应式数据：
假如你使用 ref 或 reactive 提供相应式数据，那么子孙组件可以通过 .value 属性来修改这个值。

1. // 祖先组件
2. import { provide, reactive } from 'vue';
4. export default {
5.   setup() {
6.     const state = reactive({ count: 0 });
8.     provide('state', state);
10.     // ...
11.   }
12. };
14. // 子孙组件
15. import { inject } from 'vue';
17. export default {
18.   setup() {
19.     const state = inject('state');
21.     // 修改注入的响应式数据
22.     state.count++;
24.     // ...
25.   }
26. };

复制代码

2.提供一个方法来修改数据：
你可以在先人组件中提供一个方法，该方法可以修改相应式数据。然后，这个方法可以被子孙组件注入并调用。

1. // 祖先组件
2. import { provide } from 'vue';
4. export default {
5.   setup() {
6.     const state = reactive({ count: 0 });
7.     const increment = () => {
8.       state.count++;
9.     };
11.     provide('state', state);
12.     provide('increment', increment);
14.     // ...
15.   }
16. };
18. // 子孙组件
19. import { inject } from 'vue';
21. export default {
22.   setup() {
23.     const increment = inject('increment');
25.     // 调用注入的方法来修改数据
26.     increment();
28.     // ...
29.   }
30. };

复制代码

3.使用 readonly 创建只读引用：
假如你不希望子孙组件修改注入的值，可以使用 readonly 创建一个只读引用。

1. // 祖先组件
2. import { provide, reactive, readonly } from 'vue';
4. export default {
5.   setup() {
6.     const state = reactive({ count: 0 });
8.     provide('state', readonly(state));
10.     // ...
11.   }
12. };
14. // 子孙组件
15. import { inject } from 'vue';
17. export default {
18.   setup() {
19.     const state = inject('state');
21.     // 尝试修改注入的值将会失败
22.     // state.count = 1; // 这将不会工作
24.     // ...
25.   }
26. };

复制代码

总结

Vue 3 的组合式 API 通过 setup 函数提供相应式状态管理，支持使用 ref 和 reactive 创建相应式数据，computed 和 watch 处理计算属性和侦听器。同时，provide 和 inject 答应跨组件进行依靠注入，实现数据和方法的共享。这些特性提升了代码的组织性、可重用性以及组件间的解耦。
希望这篇文章能资助到你

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。