ToB企服应用市场:ToB评测及商务社交产业平台

标题: Vue 3 组合式 API 指南：相应式状态管理与跨组件通信 [打印本页]

作者: 麻花痒 时间: 2024-7-14 23:09
标题: Vue 3 组合式 API 指南：相应式状态管理与跨组件通信
引言

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

setup 函数的概念和作用

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

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

复制代码

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

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

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

import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
// 通过 .value 访问和修改响应式值
console.log(count.value); // 输出 0
count.value++;
console.log(count.value); // 输出 1
return {
count
};
}
};

复制代码

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

import { reactive } from 'vue';
export default {
setup() {
const state = reactive({ count: 0 });
// 直接访问和修改响应式对象的属性
console.log(state.count); // 输出 0
state.count++;
console.log(state.count); // 输出 1
return {
state
};
}
};

复制代码

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

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

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

import { ref, computed } from 'vue';
export default {
setup() {
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
// 访问计算属性
console.log(doubleCount.value); // 输出 0
return {
count,
doubleCount
};
}
};

复制代码

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

import { ref, watch } from 'vue';
export default {
setup() {
const count = ref(0);
watch(count, (newValue, oldValue) => {
console.log(`Count changed from ${oldValue} to ${newValue}`);
});
return {
count
};
}
};

复制代码

provide 和 inject

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

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

import { provide } from 'vue';
export default {
setup() {
// 提供一个响应式对象
const state = reactive({ count: 0 });
// 提供一个方法
const increment = () => {
state.count++;
};
// 使用 provide 函数提供数据
provide('state', state);
provide('increment', increment);
// ...
}
};

复制代码

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

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

import { inject } from 'vue';
export default {
setup() {
// 注入 'state' 和 'increment'
const state = inject('state');
const increment = inject('increment');
// 使用注入的数据和方法
console.log(state.count); // 输出 0
increment(); // 增加计数
// ...
}
};

复制代码

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

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

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

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

// 祖先组件
import { provide, reactive } from 'vue';
export default {
setup() {
const state = reactive({ count: 0 });
provide('state', state);
// ...
}
};
// 子孙组件
import { inject } from 'vue';
export default {
setup() {
const state = inject('state');
// 修改注入的响应式数据
state.count++;
// ...
}
};

复制代码

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

// 祖先组件
import { provide } from 'vue';
export default {
setup() {
const state = reactive({ count: 0 });
const increment = () => {
state.count++;
};
provide('state', state);
provide('increment', increment);
// ...
}
};
// 子孙组件
import { inject } from 'vue';
export default {
setup() {
const increment = inject('increment');
// 调用注入的方法来修改数据
increment();
// ...
}
};

复制代码

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

// 祖先组件
import { provide, reactive, readonly } from 'vue';
export default {
setup() {
const state = reactive({ count: 0 });
provide('state', readonly(state));
// ...
}
};
// 子孙组件
import { inject } from 'vue';
export default {
setup() {
const state = inject('state');
// 尝试修改注入的值将会失败
// state.count = 1; // 这将不会工作
// ...
}
};

复制代码

总结

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

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

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)