详解vue3中setUp和reactive函数的用法

来详细讲解一下vue3中setUp和reactive函数的用法。

1. setUp函数

setUp函数是在vue组件初次渲染之前调用的函数，它可以执行各种初始化操作，并且可以直接返回一个代表组件实例的对象，这样我们就可以在组件内部使用普通变量而不是响应式变量了，从而避免了响应式变量在模板中被不小心改变的情况。

在组件内部使用普通变量示例如下：

import { setUp } from 'vue';

export default {
  // 组件选项
  seUp() {
    const count = 0;
    return { count };
  }
}

在上述示例中，setUp函数返回了一个对象，其中包含了一个count变量，我们可以在模板中使用该变量，像这样：

<template>
  <div>{{ count }}</div>
</template>

这样一来，我们就可以使用普通变量了。

2. reactive函数

reactive函数用于将普通对象转变为响应式对象，一旦我们将一个普通对象传入reactive函数中，该函数就会将该对象中的所有属性都转换成响应式属性，响应式属性的值变化时，会自动触发界面的更新。

示例如下：

import { reactive } from 'vue';

export default {
  // 组件选项
  data() {
    return reactive({
      count: 0,
      name: '张三'
    });
  }
}

上述示例中，我们使用了reactive函数将一个对象转换为了响应式对象，该对象中含有两个属性：count和name，我们在模板中使用这两个属性，像这样：

<template>
  <div>{{ count }}，{{ name }}</div>
</template>

这样一来，无论是count还是name属性的值发生了变化，都会自动触发界面的更新。

总结：

通过上述两个示例，我们可以看出，在vue3中，setUp函数帮助我们更好地管理普通变量，而reactive函数则使我们更方便地使用响应式属性，两者相辅相成，大大提升了我们对组件数据的处理能力。