目录
6.watchPostEffect()和watchSyncEffect()
一、什么是组合式API？
在Vue 2中，我们主要使用选项式API（Options API）来组织组件。选项式API将组件的不同部分（如data、methods、computed等）按照特定的选项进行划分。然而，随着组件复杂度的提升，这种划分方式可能导致逻辑分散，难以维护。
组合式API则提供了一种新的方式来组织组件逻辑。它将组件的逻辑拆分成多个独立的函数（或称为“组合函数”），每个函数都负责处理组件的某个方面。这种方式使得逻辑更加集中，更易于复用和维护。
二、核心API介绍
1.setup()
setup()是组合式API的入口函数，它在组件创建之前被调用，用于初始化组件的状态和方法。在setup()中，我们可以使用其他组合式API来定义组件的逻辑。
示例：
import { ref, computed } from 'vue';
export default {
setup() {
const count = ref(0);
const doubled = computed(() => count.value * 2);
function increment() {
count.value++;
}
return {
count,
doubled,
increment,
};
},
};2.ref()和reactive()
ref()和reactive()是用于创建响应式数据的API。ref()用于创建单个响应式数据，而reactive()用于创建响应式对象。
示例：
import { ref, reactive } from 'vue';
const count = ref(0); // 创建一个响应式数据，初始值为0
const state = reactive({ name: 'Vue', version: 3 }); // 创建一个响应式对象3.computed()
computed()用于创建计算属性，它基于其他响应式数据动态计算值。当依赖的数据发生变化时，计算属性会自动更新。
示例：
import { ref, computed } from 'vue';
const count = ref(1);
const doubled = computed(() => count.value * 2); // 当count变化时，doubled也会自动更新4.readonly()
readonly()是Vue 3组合式API的一个核心函数，用于创建只读的响应式对象。它接收一个对象作为参数，并返回一个具有相同结构但属性只读的代理对象。尝试修改此代理对象会触发警告，而不会真正影响原始对象。这有助于保护数据的完整性，确保数据不被意外修改。
示例：
import { readonly } from 'vue';
const myObject = { name: 'Alice', age: 25 };
const readonlyObject = readonly(myObject);
// 尝试修改只读对象的属性会失败
readonlyObject.name = 'Bob'; // 这里会报错，因为只读对象的属性无法被修改5.watch()和watchEffect()
watch()和watchEffect()用于监听响应式数据的变化，并在数据变化时执行回调函数。watch()需要明确指定要监听的数据和回调函数，而watchEffect()则会自动收集依赖并执行回调函数。
示例：
import { ref, watch, watchEffect } from 'vue';
const count = ref(0);
watch(count, (newVal, oldVal) => {
console.log(`count changed from ${oldVal} to ${newVal}`);
});
watchEffect(() => {
console.log(`count is ${count.value}`);
}); // 当count变化时，这个回调函数会自动执行 关于 watchEffect()
副作用函数
传递给 watchEffect 的函数被称为“副作用函数”。这个副作用函数通常包含了需要在响应式数据变化时执行的代码逻辑。这使得 watchEffect 特别适合处理异步操作，如发起网络请求。
自动收集依赖
watchEffect 的一个关键特性是它能够自动收集依赖。这意味着你不需要显式地告诉它要监听哪些数据，它会自动跟踪在副作用函数中使用的响应式数据，并在这些数据变化时重新运行副作用函数。
停止监听
与 watch 不同，watchEffect 返回的是一个清除函数，用于手动停止监听。如果你需要停止监听，可以调用这个清除函数。
示例：
const stop = watchEffect(() => {
// ... 副作用逻辑
});
// 停止监听
stop();6.watchPostEffect()和watchSyncEffect()
watchEffect() 使用 flush: 'post' 和使用 flush: 'sync' 选项时的别名。
默认情况下，侦听器将在组件渲染之前执行。设置 flush: 'post' 将会使侦听器延迟到组件渲染之后再执行。详见回调的触发时机。在某些特殊情况下 (例如要使缓存失效)，可能有必要在响应式依赖发生改变时立即触发侦听器。这可以通过设置 flush: 'sync' 来实现。然而，该设置应谨慎使用，因为如果有多个属性同时更新，这将导致一些性能和数据一致性的问题。
7.provide()和inject()
详见另一篇博客基于Vue3组合式API：依赖注入使用技巧（Provide&Inject）
希望本文的介绍能够帮助你更好地理解和应用Vue 3中的组合式API。如果你有任何疑问或建议，请随时在评论区留言。
