Vue面试题源码解析（35）：使用composition API解决多级响应式问题

2023-10-24 22:21:37

剖析面试难题

在面试中，经常会被问到如何使用Vue的Composition API解决多级响应式问题。这个问题的重点在于如何使用Composition API来管理嵌套响应式数据结构，确保数据变化时能够正确更新视图。

Composition API解析

Composition API是一种新的Vue状态管理方式，它允许我们以声明式的方式定义和使用响应式状态。通过使用setup()函数，我们可以将响应式状态定义为一个函数，该函数接受props和上下文作为参数。

多级响应式问题的解决方案

要使用Composition API解决多级响应式问题，我们可以使用嵌套reactive()函数或ref()函数来创建嵌套响应式对象。例如：

const state = reactive({
  user: {
    name: 'John Doe',
    age: 30
  }
});

在这个例子中，state.user.name和state.user.age都是响应式的，这意味着如果它们发生变化，视图将自动更新。

源码级详解

以下是使用Composition API解决多级响应式问题的完整源码示例：

import { defineComponent, reactive, computed } from 'vue';

export default defineComponent({
  setup() {
    const state = reactive({
      user: {
        name: 'John Doe',
        age: 30
      }
    });

    const fullName = computed(() => {
      return `${state.user.name} (${state.user.age})`;
    });

    return {
      state,
      fullName
    };
  }
});