Vue Composition API的`setup`函数内部机制：响应性状态的初始化与上下文注入 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Vue Composition API 的 `setup` 函数：响应性状态的初始化与上下文注入

大家好，今天我们要深入探讨 Vue Composition API 中至关重要的 setup 函数。setup 函数是 Composition API 的入口点，它允许我们在组件中使用函数式的方式来组织和管理组件的逻辑。我们将重点关注 setup 函数内部的机制，特别是响应性状态的初始化以及上下文的注入。

`setup` 函数的定位与职责

在 Vue 2 中，我们主要通过 data、methods、computed、watch 等选项来定义组件的状态和行为。而在 Composition API 中，setup 函数取代了这些选项的部分职责，成为组件逻辑的核心。

setup 函数的主要职责包括：

创建响应式状态： 定义组件需要追踪的状态，并将其转换为响应式数据。
注册生命周期钩子： 允许在 setup 函数内部注册组件的生命周期钩子函数。
访问组件上下文： 提供访问组件实例的上下文，例如 props、attrs、slots、emit 等。
返回模板上下文： 将需要在模板中使用的状态、方法等暴露出去，作为模板上下文。

响应式状态的初始化

setup 函数最重要的任务之一就是创建和管理响应式状态。Vue 3 提供了 reactive、ref、readonly 等函数来实现响应式状态的创建。

`reactive` 函数

reactive 函数用于将一个普通 JavaScript 对象转换为响应式对象。当响应式对象中的属性发生变化时，依赖于这些属性的视图会自动更新。

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
      message: 'Hello, Vue!'
    });

    const increment = () => {
      state.count++;
    };

    return {
      state,
      increment
    };
  }
};

在这个例子中，state 对象包含了 count 和 message 两个属性，并且通过 reactive 函数将其转换为响应式对象。当 count 的值发生变化时，任何使用了 state.count 的视图都会自动更新。

需要注意的是，reactive 函数只能用于对象类型（包括数组和普通对象），不能直接用于基本数据类型（如数字、字符串、布尔值）。

`ref` 函数

ref 函数用于创建一个包含响应式且可变的 .value 属性的 ref 对象。我们可以使用 ref 函数来处理基本数据类型，也可以处理对象类型。

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const message = ref('Hello, Vue!');

    const increment = () => {
      count.value++;
    };

    return {
      count,
      message,
      increment
    };
  }
};

在这个例子中，count 和 message 都是通过 ref 函数创建的 ref 对象。要访问或修改 ref 对象的值，需要使用 .value 属性。

ref 和 reactive 的主要区别在于：

特性	`reactive`	`ref`
适用类型	对象（包括数组和普通对象）	任何类型（包括基本数据类型和对象）
访问方式	直接访问属性，例如 `state.count`	通过 `.value` 属性访问，例如 `count.value`
内部实现	通过 Proxy 实现深层响应式，监听对象的所有属性	包装一个对象，只监听 `.value` 属性的变化
应用场景	复杂对象的状态管理	基本数据类型或需要手动控制响应式的场景

`readonly` 函数

readonly 函数用于创建一个只读的响应式对象。这意味着我们无法修改只读对象中的属性值。

import { reactive, readonly } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
      message: 'Hello, Vue!'
    });

    const readonlyState = readonly(state);

    const increment = () => {
      // readonlyState.count++; // 报错，无法修改只读对象
      state.count++; // 可以修改原始的 state 对象
    };

    return {
      state,
      readonlyState,
      increment
    };
  }
};

在这个例子中，readonlyState 是 state 的只读版本。虽然我们可以修改原始的 state 对象，但是无法修改 readonlyState 对象。readonly 可以用于保护状态，防止意外修改。

`shallowReactive` 和 `shallowReadonly`

shallowReactive 和 shallowReadonly 函数与 reactive 和 readonly 函数类似，但是它们只提供浅层响应式或只读。这意味着只有对象的第一层属性是响应式的或只读的，而嵌套对象中的属性仍然是可变的。

import { shallowReactive, shallowReadonly } from 'vue';

export default {
  setup() {
    const state = shallowReactive({
      count: 0,
      nested: {
        value: 1
      }
    });

    const readonlyState = shallowReadonly(state);

    const increment = () => {
      state.count++; // 可以修改
      state.nested.value++; // 也可以修改，因为是浅层响应式
      // readonlyState.count++; // 报错，无法修改只读对象
      readonlyState.nested.value++; // 也可以修改，因为是浅层只读
    };

    return {
      state,
      readonlyState,
      increment
    };
  }
};

使用 shallowReactive 和 shallowReadonly 可以提高性能，因为它们不需要递归地监听所有属性的变化。

上下文注入

setup 函数接收两个参数：props 和 context。props 对象包含了父组件传递给当前组件的 props，而 context 对象则提供了访问组件上下文的能力。

`props` 对象

props 对象包含了父组件传递给当前组件的所有 props。我们可以通过 props 对象来访问这些 props 的值。

export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  setup(props) {
    console.log(props.message); // 访问 props 的值

    return {};
  }
};

需要注意的是，在 setup 函数内部，props 对象是响应式的。这意味着当父组件传递的 props 发生变化时，setup 函数会自动重新执行，并且 props 对象会被更新。

注意： 在 setup 函数内部，不应该直接修改 props 对象的值。因为 props 是由父组件传递的，子组件修改 props 会影响父组件的状态，这违反了单向数据流的原则。如果需要在子组件中修改 props 的值，应该通过 emit 触发一个事件，通知父组件进行修改。

`context` 对象

context 对象提供了访问组件上下文的能力。它包含了以下属性：

attrs： 一个包含了组件所有非 props 的 attribute 的对象。
slots： 一个包含了组件所有插槽的对象。
emit： 一个用于触发自定义事件的函数。
expose： 一个用于显式暴露组件实例属性的函数。

`attrs`

attrs 对象包含了组件所有非 props 的 attribute。例如，如果父组件传递给子组件一个 class 属性和一个 style 属性，但是子组件没有声明这些属性为 props，那么这些属性就会被包含在 attrs 对象中。

export default {
  setup(props, context) {
    console.log(context.attrs.class); // 访问 class 属性
    console.log(context.attrs.style); // 访问 style 属性

    return {};
  }
};

attrs 对象也是响应式的，当父组件传递的 attribute 发生变化时，attrs 对象会自动更新。

`slots`

slots 对象包含了组件所有插槽。我们可以通过 slots 对象来访问插槽的内容。

export default {
  setup(props, context) {
    console.log(context.slots.default()); // 访问默认插槽的内容

    return {};
  }
};

slots 对象也是响应式的，当插槽的内容发生变化时，slots 对象会自动更新。

`emit`

emit 函数用于触发自定义事件。我们可以使用 emit 函数来通知父组件发生了某些事件。

export default {
  setup(props, context) {
    const handleClick = () => {
      context.emit('custom-event', 'Hello, parent!'); // 触发自定义事件
    };

    return {
      handleClick
    };
  }
};

在这个例子中，当 handleClick 函数被调用时，会触发一个名为 custom-event 的自定义事件，并且传递一个字符串 'Hello, parent!' 作为事件参数。

父组件可以通过监听这个事件来响应子组件的行为：

<template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(message) {
      console.log(message); // 输出 'Hello, parent!'
    }
  }
};
</script>

`expose`

expose 函数用于显式暴露组件实例的属性。默认情况下，setup 函数返回的所有属性都会被暴露给模板，但是不会暴露给父组件。使用 expose 函数可以显式地控制哪些属性可以被父组件访问。

import { ref } from 'vue';

export default {
  setup(props, context) {
    const count = ref(0);
    const internalValue = ref('secret');

    context.expose({
      count
    });

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};

在这个例子中，只有 count 属性被暴露给父组件，而 internalValue 属性则不会被暴露。

父组件可以通过 ref 获取子组件的实例，并访问暴露的属性：

<template>
  <ChildComponent ref="child" />
  <button @click="logCount">Log Child Count</button>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
import { ref, onMounted } from 'vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const child = ref(null);

    onMounted(() => {
      console.log(child.value.count.value); // 访问子组件暴露的 count 属性
    });

    const logCount = () => {
      console.log(child.value.count.value);
    };

    return {
      child,
      logCount
    };
  }
};
</script>

返回模板上下文

setup 函数的返回值将作为模板上下文，可以在模板中直接使用。我们可以将需要在模板中使用的状态、方法等作为对象返回。

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};

在这个例子中，count 和 increment 都被返回，可以在模板中直接使用：

<template>
  <p>Count: {{ count }}</p>
  <button @click="increment">Increment</button>
</template>

使用 `setup` 函数的最佳实践

明确定义响应式状态： 在 setup 函数中，明确定义组件需要追踪的状态，并使用 reactive 或 ref 函数将其转换为响应式数据。
避免直接修改 props： 不要直接修改 props 对象的值，应该通过 emit 触发事件，通知父组件进行修改。
合理使用 context 对象： 使用 context 对象访问组件上下文，例如 attrs、slots、emit 等。
清晰地返回模板上下文： 将需要在模板中使用的状态、方法等作为对象返回，确保模板能够正确访问。
利用 expose 控制暴露属性： 使用 expose 函数显式地控制哪些属性可以被父组件访问，避免暴露不必要的内部状态。
尽可能保持 setup 函数的简洁： 将复杂的逻辑拆分成多个函数，并在 setup 函数中调用这些函数，保持 setup 函数的简洁易懂。
充分利用组合式函数： 将可复用的逻辑提取成组合式函数，并在多个组件中复用，提高代码的可维护性和可复用性。

总结：`setup` 函数的灵魂

setup 函数是 Vue Composition API 的核心，它负责初始化响应式状态，提供组件上下文，并返回模板上下文。掌握 setup 函数的内部机制，可以帮助我们更好地理解和使用 Composition API，编写出更高效、可维护的 Vue 组件。通过对 reactive、ref 的理解，以及对 props 和 context 的运用，我们能更好地管理组件的状态和行为。

更多IT精英技术系列讲座，到智猿学院

Vue Composition API 的 setup 函数：响应性状态的初始化与上下文注入

setup 函数的定位与职责

响应式状态的初始化

reactive 函数

ref 函数

readonly 函数

shallowReactive 和 shallowReadonly

上下文注入

props 对象

context 对象

attrs

slots

emit

expose