Vue 3 组合式 API 详解

Vue 3 组合式 API 详解

在 Vue 3 中，组合式 API（Composition API）提供了一种更灵活、更强大的方式来组织和复用组件逻辑。本文将详细介绍组合式 API 中的一些关键概念和函数，包括 readonly、shallowReadonly、shallowReactive、shallowRef、toRaw、markRaw、toRef、toRefs、provide、inject 以及路由跳转传参。

1. readonly 和 shallowReadonly

• readonly: 将对象的所有属性转换为只读的响应式对象，包括嵌套对象的属性也是只读的。

  import { readonly } from 'vue';
  
  const original = { count: 0, nested: { message: 'Hello' } };
  const wrapped = readonly(original);
  
  wrapped.count = 1; // 无法修改，控制台会警告
  wrapped.nested.message = 'World'; // 无法修改，控制台会警告
  

• shallowReadonly: 只会将根级属性设置为只读的响应式对象，嵌套对象的属性仍然是可修改的。

  import { shallowReadonly } from 'vue';
  
  const original = { count: 0, nested: { message: 'Hello' } };
  const wrapped = shallowReadonly(original);
  
  wrapped.count = 1; // 无法修改，控制台会警告
  wrapped.nested.message = 'World'; // 可以修改
  

2. shallowReactive 和 shallowRef

• shallowReactive: 用于创建一个浅响应式对象，只会对根属性进行响应式处理，而不会递归到对象的嵌套属性。

  import { shallowReactive } from 'vue';
  
  const state = shallowReactive({ count: 0, nested: { message: 'Hello' } });
  
  state.count++; // 响应式
  state.nested.message = 'World'; // 非响应式
  

• shallowRef: 对该对象内部属性的修改不会被监听。如果声明的是基本类型的数据，仍然是响应式数据；如果声明的是引用类型的数据，就是非响应式数据。

  import { shallowRef } from 'vue';
  
  const count = shallowRef(0); // 响应式
  const obj = shallowRef({ message: 'Hello' }); // 非响应式
  
  count.value++; // 响应式
  obj.value.message = 'World'; // 非响应式
  

3. toRaw 和 markRaw

• toRaw: 用于获取代理对象的原始未代理版本。

  import { reactive, toRaw } from 'vue';
  
  const state = reactive({ count: 0 });
  const rawState = toRaw(state);
  
  console.log(rawState === state); // false
  

• markRaw: 用于标记一个对象，使其永远不会被转换为响应式对象。

  import { markRaw, reactive } from 'vue';
  
  const rawObj = markRaw({ count: 0 });
  const state = reactive({ nested: rawObj });
  
  state.nested.count++; // 非响应式
  

4. toRef 和 toRefs

• toRef: 用于创建一个指定响应式对象的属性的可响应式引用。返回一个 ref 对象，可以通过该 ref 对象访问原始响应式对象的属性，修改 ref 对象的值会影响到原始对象。

  import { reactive, toRef } from 'vue';
  
  const state = reactive({ count: 0 });
  const countRef = toRef(state, 'count');
  
  countRef.value++; // 修改 countRef 会影响 state.count
  

• toRefs: 函数用于将一个响应式对象转换为一个包含多个属性的 ref 对象集合。返回一个对象，该对象中的每个属性都是 ref 对象，通过该 ref 对象可以访问原始响应式对象的对应属性。修改 ref 对象的值会影响到原始对象。

  import { reactive, toRefs } from 'vue';
  
  const state = reactive({ count: 0, message: 'Hello' });
  const stateRefs = toRefs(state);
  
  stateRefs.count.value++; // 修改 stateRefs.count 会影响 state.count
  stateRefs.message.value = 'World'; // 修改 stateRefs.message 会影响 state.message
  

5. provide 与 inject

• provide: 用于在父组件中传递数据，只能在 setup 函数中使用。

  import { provide } from 'vue';
  
  provide('key', 'value');
  

• inject: 用于在子组件中接收父组件传递的数据。

  import { inject } from 'vue';
  
  const value = inject('key');
  

6. 路由跳转传参

• 声明式路由跳转:

  <router-link :to="{ path: '/pageB', query: { id: 100 } }">跳转到 pageB</router-link>
  <router-link :to="{ name: 'pageB', params: { id: 100 } }">跳转到 pageB</router-link>
  

• 函数式路由跳转:

  import { useRouter } from 'vue-router';
  
  const router = useRouter();
  
  function toPageB() {
    router.push({
      path: '/pageB',
      query: {
        id: 100
      }
    });
  }
  

• 接收路由参数:

  import { useRoute } from 'vue-router';
  
  const route = useRoute();
  console.log(route.query.id); // 通过 query 接收参数
  console.log(route.params.id); // 通过 params 接收参数
  

总结

组合式 API 提供了丰富的工具和函数，帮助开发者更灵活地管理和复用组件逻辑。通过 readonly、shallowReadonly、shallowReactive、shallowRef、toRaw、markRaw、toRef、toRefs、provide、inject 以及路由跳转传参等功能，开发者可以更高效地构建复杂的 Vue 3 应用。希望本文能帮助你更好地理解和使用这些组合式 API 的功能。