vue3日常开发最核心API如ref,reactive,watch等说明

在 Vue 3 的组合式 API（Composition API）中，defineComponent,ref,reactive,computed,watch,onMounted,onBeforeUnmount,toRefs这些 API 是日常开发最核心的工具。下面按照功能类别为你梳理它们的含义和典型用法：

1. 定义组件与响应式核心

• defineComponent（类型推导辅助）

  • 意思：这是一个类型辅助函数，主要用于 TypeScript 环境。它不会改变组件的逻辑，只是帮助 Vue 正确推导 props、emits 等选项的类型。
  • 用法：在 .vue 文件的 <script> 中或 JSX/TSX 中包裹组件对象。

  import { defineComponent } from 'vue';
  export default defineComponent({
    props: { msg: String },
    setup(props) { ... }
  });
  

• ref（基本响应式）

  • 意思：接收一个内部值，返回一个响应式且可变的 ref 对象，通过 .value 访问。适合声明基本数据类型（如字符串、数字）或需要整体替换的对象/数组。
  • 用法：

  const count = ref(0);
  count.value++; // 修改必须用 .value
  

• reactive（对象响应式）

  • 意思：返回一个对象的响应式代理（基于 Proxy）。适合声明复杂数据类型（对象、数组），且不需要重新赋值整个对象的情况。
  • 用法：

  const state = reactive({ name: 'Vue', list: [] });
  state.name = 'Vue3'; // 直接修改属性，无需 .value
  

2. 派生状态与副作用

• computed（计算属性）

  • 意思：依赖其他响应式数据，返回一个只读的 ref 对象。当依赖变化时，它会自动重新计算并缓存结果。
  • 用法：

  const firstName = ref('John');
  const lastName = ref('Doe');
  const fullName = computed(() => firstName.value + ' ' + lastName.value);
  

• watch（侦听器）

  • 意思：惰性执行副作用。侦听一个或多个数据源，当数据变化时执行回调函数（可获取新旧值）。
  • 用法（侦听 ref 或 getter 函数）：

  watch(count, (newVal, oldVal) => {
    console.log(`count changed from ${oldVal} to ${newVal}`);
  });
  

3. 生命周期与资源清理

• onMounted（挂载后）

  • 意思：组件首次渲染到 DOM 后执行。这是发起 API 请求、操作 DOM、绑定第三方库的常用时机。
  • 用法：

  onMounted(() => {
    console.log('组件已挂载，DOM 可访问');
  });
  

• onBeforeUnmount（卸载前）

  • 意思：组件即将被销毁/卸载前执行。用于清理定时器、取消事件监听、终止请求等，防止内存泄漏。
  • 用法：

  onBeforeUnmount(() => {
    clearInterval(timer.value);
    window.removeEventListener('resize', handler);
  });
  

4. 解构工具

• toRefs（解构保持响应性）
  • 意思：将 reactive 对象中的每个属性，都转换为独立的 ref。主要用于解构对象时，让属性在解构后仍保持响应式链接。
  • 用法（关键场景：在 setup 中 return 供模板使用）：

  const state = reactive({ age: 18, city: 'SZ' });
  // 解构后 age 和 city 依然是响应式 ref
  const { age, city } = toRefs(state); 
  
  // 注意：toRefs 只会转换第一层属性。
  

避坑小提示