Vue 3进阶之路：揭秘setup、ref与reactive的核心机制

Vue3从零开始——掌握setup、ref和reactive函数的奥秘

在Vue 3中，随着Composition API的引入，setup、ref和reactive成为了构建组件的核心工具。这些工具不仅让组件的状态管理更加灵活和强大，还提高了代码的可维护性和复用性。以下将详细探讨这三个函数的奥秘，帮助开发者从零开始掌握Vue 3的Composition API。

一、setup函数

setup函数是Vue 3中引入的一个新特性，它是组件内部用于设置组件的配置和状态的地方。setup函数在组件被创建之前被调用，此时组件的props已经被解析，但DOM还未被挂载。因此，setup函数内部无法访问到组件的this实例，也无法使用Vue 2.x中的data、computed、methods等选项。相反，它提供了ref、reactive、computed等Composition API来定义组件的状态和逻辑。

1. setup函数的基本用法

setup函数接收两个参数：props和context。

• props是组件的属性对象，可以通过它访问父组件传递过来的属性值。
• context是一个包含了一些组件上下文信息的对象，如attrs（非props的属性）、slots（插槽内容）、emit（触发事件的方法）等。

setup函数需要返回一个对象，这个对象包含了组件中需要使用的所有数据和方法等。这个返回的对象会被合并到组件实例中，供模板和其他Composition API使用。

export default {
  setup(props, context) {
    // 定义响应式数据
    const count = ref(0);

    // 定义方法
    function increment() {
      count.value++;
    }

    // 返回给模板使用的数据和方法
    return {
      count,
      increment
    };
  }
}

2. setup函数中的生命周期钩子

在setup函数中，可以通过onMounted、onUpdated、onUnmounted等生命周期钩子函数来执行副作用操作，如数据获取、DOM操作等。这些钩子函数会在组件的相应生命周期阶段被调用。

import { onMounted, ref } from 'vue';

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

    onMounted(() => {
      console.log('组件已挂载');
      // 执行一些初始化操作
    });

    return {
      count
    };
  }
}

3. setup函数中的事件触发

在setup函数中，可以通过context.emit或defineEmits来定义并触发事件，实现子组件向父组件通信的功能。

import { defineEmits } from 'vue';

export default {
  setup(props, { emit }) {
    // 或者使用 defineEmits
    // const emit = defineEmits(['update:count']);

    function updateCount(newCount) {
      emit('update:count', newCount);
    }

    return {
      updateCount
    };
  }
}

二、ref函数

ref函数是Vue 3 Composition API中的一个核心函数，用于创建响应式数据。它接受一个初始值作为参数，并返回一个响应式引用对象。这个引用对象具有一个名为value的属性，用于存储和访问响应式数据的值。

1. ref的基本用法

在setup函数中，可以使用ref来创建响应式数据。当数据发生变化时，Vue会自动追踪并更新依赖该数据的视图。

import { ref } from 'vue';

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

    // 修改响应式数据的值
    count.value++;

    return {
      count
    };
  }
}

2. ref与模板中的使用

在模板中，可以直接使用通过ref创建的响应式数据，但需要通过.value来访问其值。不过，在Vue 3的模板编译器优化下，当在模板中直接访问ref的响应式数据时，.value可以省略。

<template>
  <div>{{ count }}</div>
  <button @click="increment">Increment</button>
</template>

<script>
import { ref } from 'vue';

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

（2）模板内部的自动去`.value`

在Vue 3的模板中，当访问通过`ref`创建的响应式数据时，Vue会自动解析并显示其`.value`属性的值，无需手动添加`.value`。这大大简化了模板的编写，使开发者可以更专注于数据的逻辑处理。

##### 3. `ref`与对象的响应式

虽然`ref`主要用于处理基本数据类型的响应式，但它也可以用于包装对象。然而，对于对象内部的属性，如果需要它们也变成响应式的，则需要使用`reactive`或单独对对象内的每个属性使用`ref`。

```javascript
import { ref } from 'vue';

export default {
  setup() {
    const person = ref({
      name: 'Alice',
      age: 25
    });

    // 修改对象内属性的值
    person.value.age++;

    return {
      person
    };
  }
}

需要注意的是，直接使用ref包装对象时，只有对象的引用是响应式的，而对象内部的属性并不是默认响应式的。这意味着，如果你替换了整个对象，那么响应式系统能够感知到这种变化，但如果只是修改了对象内部的某个属性值，则不会自动触发视图更新，除非这个属性也被单独处理成了响应式（例如使用reactive或额外的ref）。

三、reactive函数

与ref不同，reactive函数用于创建一个响应式的对象。与Vue 2.x中的Vue.observable()类似，但reactive提供了更全面的响应式支持。

1. reactive的基本用法

reactive接受一个对象作为参数，并返回该对象的响应式代理。代理对象保持了与原始对象相同的结构和属性，但所有的属性访问和修改都会触发响应式系统的依赖追踪和更新。

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
      person: {
        name: 'Bob',
        age: 30
      }
    });

    // 修改响应式对象的属性
    state.count++;
    state.person.age++;

    return {
      state
    };
  }
}

2. reactive与深层响应式

与ref不同，reactive可以处理对象的深层响应式。即，当你修改对象内部属性的值时，响应式系统会追踪这种变化，并自动更新依赖的视图。这使得reactive成为处理复杂对象状态管理的首选。

3. reactive与ref的选择

在实际开发中，ref和reactive各有其适用场景。

• 当处理基本数据类型时，或者需要将响应式数据存储为某个对象的属性且需要保持引用一致性时，可以使用ref。
• 当处理复杂对象或需要对象属性具有深层响应式时，应使用reactive。

综上所述，Vue 3的Composition API通过setup、ref和reactive等函数提供了更灵活、更强大的组件状态管理能力。开发者可以根据实际需求和场景选择使用这些函数来构建高效、可维护的Vue组件。