响应式-核心 API

响应式-核心 API

核心响应式 API 包括 ref()、computed()、reactive()、readonly()、watchEffect()、watchPostEffect()、watchSyncEffect() 和 watch()，它们能有效管理和监控状态变化，并执行相关逻辑。这些工具为 Vue 3 提供了强大的状态管理和副作用处理功能，帮助开发人员更便捷地构建响应式应用。

以下是对响应式核心 API 的逐个介绍，并提供代码示例：

ref(value)

• 描述：将普通 JavaScript 值转换为一个响应式对象。

• 返回值：一个包含 value 的响应式引用对象。

• 示例：

  import { ref } from "vue";
  
  const count = ref(0);
  console.log(count.value); // 输出初始值 0
  count.value++; // 修改值

computed(getter)

• 描述：基于其他响应式对象衍生出的计算属性。

• 返回值：一个具有 value 属性的计算属性对象。

• 示例：

  import { ref, computed } from "vue";
  
  const count = ref(0);
  const doubledCount = computed(() => count.value * 2);
  console.log(doubledCount.value); // 输出初始值 0
  
  count.value++;
  console.log(doubledCount.value); // 输出更新后的计算结果 2

reactive(obj)

• 描述：将普通对象转换为响应式对象。

• 返回值：一个响应式代理对象。

• 示例：

  import { reactive } from "vue";
  
  const state = reactive({ count: 0 });
  console.log(state.count); // 输出初始值 0
  state.count++; // 修改值

readonly(obj)

• 描述：创建一个只读的响应式代理对象。

• 返回值：一个只读的响应式代理对象。

• 示例：

  import { ref, readonly } from "vue";
  
  const count = ref(0);
  const readOnlyCount = readonly(count);
  console.log(readOnlyCount.value); // 输出初始值 0
  
  count.value++;
  console.log(readOnlyCount.value); // 输出更新后的值 1
  
  // 尝试修改只读对象
  readOnlyCount.value = 5; // 抛出错误，只读对象不可修改

watchEffect(effect)

• 描述：立即运行指定的副作用函数，并在响应式对象变化时自动运行。

• 示例：

  import { ref, watchEffect } from "vue";
  
  const count = ref(0);
  
  watchEffect(() => {
    console.log("Current count:", count.value);
  });
  
  count.value++; // 触发副作用函数，输出 "Current count: 1"

watchPostEffect(effect)

• 描述：与 watchEffect 类似，但是它在 DOM 更新后延迟执行副作用函数。

• 示例：

  import { ref, watchPostEffect } from "vue";
  
  const count = ref(0);
  
  watchPostEffect(() => {
    console.log("Current count:", count.value);
  });
  
  count.value++; // 触发副作用函数，输出 "Current count: 1"（在 DOM 更新后）

watchSyncEffect(effect)

• 描述：与 watchEffect 类似，但是它在响应式对象变化时立即同步执行副作用函数。

• 示例：

  import { ref, watchSyncEffect } from "vue";
  
  const count = ref(0);
  
  watchSyncEffect(() => {
    console.log("Current count:", count.value);
  });
  
  count.value++; // 触发副作用函数，输出 "Current count: 1"（立即同步执行）

watch(source, callback, options?)

• 描述：监视一个或多个响应式对象的变化，并在变化时触发回调函数。

• 参数：

  • source：要监视的响应式对象或计算属性。
  • callback：在响应式对象变化时触发的回调函数。
  • options（可选）：配置选项，如 { immediate: true } 可以在开始时立即调用回调函数。

• 示例：

  import { ref, watch } from "vue";
  
  const count = ref(0);
  
  watch(count, (newValue, oldValue) => {
    console.log("Count changed:", newValue, oldValue);
  });
  
  count.value++; // 触发回调函数，输出 "Count changed: 1 0"

这些是 Vue 3 中的响应式核心 API 。它们提供了灵活且强大的工具，用于处理状态的变化，并在变化时执行相关逻辑。如