Vue 3 中的 setup 函数与响应式数据

在 Vue 3 中，setup 函数是 Composition API 的核心部分，它允许你将组件的逻辑集中管理。接下来，我们将详细学习如何使用 setup 函数，并理解响应式数据的概念。

一、setup 函数的基本使用

（一）定义 setup 函数

setup 函数是 Vue 3 中的一个新配置项，它的值是一个函数。这个函数在组件创建之前执行，比 Vue 2 中的 beforeCreate 钩子更早执行。setup 函数可以返回一个对象，该对象中的属性和方法可以在模板中直接使用。

（二）示例代码

将 Person.vue 组件改写为使用 setup 函数的形式：

HTML复制

<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showPhone">查看联系方式</button>
  </div>
</template>

<script lang="ts">
import { ref } from 'vue';

export default {
  name: 'Person',
  setup() {
    //数据
    const name = ref('张三');
    const age = ref(18);
    const phone = ref('13812341234');

    //方法
    const changeName = () => {
      name.value = '张杠三';
    };

    const changeAge = () => {
      age.value += 1;
    };

    const showPhone = () => {
      alert(phone.value);
    };

    return {
      name,
      age,
      phone,
      changeName,
      changeAge,
      showPhone
    };
  }
};
</script>

<style>
.person {
  background-color: #00f;
  color: #fff;
  padding: 20px;
  margin: 10px 0;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
button {
  margin: 5px;
  padding: 5px 10px;
  cursor: pointer;
}
</style>

setup函数中的this是undefined的，不能使用的，也是说vue3弱化this了，另外setup函数的返回值可以是一个渲染函数，也就是将return的内容直接渲染到页面中。支持箭头函数，例如return ()=>'哈哈'

这里面试官要问你问题了（setup函数和Optional API的关系）：

一 setup和data method可以共存吗？

答案是可以的。

二 data里可以读取setup的数据吗 setup可以读取data的数据吗

setup的生命周期早于data，所以data里可以读取setup的数据的，反之则不能，这都是细节。。。

（三）解释

1. 定义响应式数据：使用 ref 函数定义响应式数据。ref 函数返回一个响应式引用对象，通过 .value 访问和修改其值。

2. 定义方法：直接定义函数作为方法。

3. 返回对象：setup 函数返回一个对象，该对象中的属性和方法可以在模板中直接使用。

二、响应式数据

（一）什么是响应式数据

在 Vue 中，响应式数据是指当数据变化时，视图会自动更新。在 setup 函数中，使用 ref 或 reactive 函数可以创建响应式数据。

ref 会创建一个响应式引用对象，通过 .value 访问和修改其值。

1. 模板中的使用：在模板中直接使用 name 和 age，不需要 .value。

2. JavaScript 中的使用：在 JavaScript 中修改响应式数据时，必须使用 .value。为了方便和reactive统一，可以在插件Typescript Vue Plugin（Volar）中勾选自动补充value

（二）示例代码

使用 ref 和 reactive 创建响应式数据：

想让谁变成响应式的，那就是那它外边包一层ref，这是ref创建基本类型的响应式数据，而reactive 是针对对象的响应式数据，不管藏的多深，只要用reactive包裹就能找到，这里的对象变成代理的，也就是响应式的了，它不能对非对象进行包装

HTML复制

<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showPhone">查看联系方式</button>
  </div>
</template>

<script lang="ts">
import { ref, reactive } from 'vue';

export default {
  name: 'Person',
  setup() {
    const state = reactive({
      name: '张三',
      age: 18,
      phone: '13812341234'
    });

    const changeName = () => {
      state.name = '张杠三';
    };

    const changeAge = () => {
      state.age += 1;
    };

    const showPhone = () => {
      alert(state.phone);
    };

    return {
      ...state,
      changeName,
      changeAge,
      showPhone
    };
  }
};
</script>

<style>
.person {
  background-color: #00f;
  color: #fff;
  padding: 20px;
  margin: 10px 0;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
button {
  margin: 5px;
  padding: 5px 10px;
  cursor: pointer;
}
</style>

（三）解释

1. 使用 reactive：reactive 函数创建一个响应式对象。对象中的所有属性都是响应式的。

2. 使用 ...state：使用扩展运算符 ... 将 state 对象中的所有属性展开，返回到模板中使用。

如果直接将一个新对象分配给 reactive 创建的响应式对象，会失去响应式。

例如:

const car = reactive({ brand: '奔驰', price: 100 });

// 错误写法：直接替换整个对象
car = { brand: '宝马', price: 80 }; // 失去响应式

可以使用Object.assign来解决，assign是指派的意思

const car = reactive({ brand: '奔驰', price: 100 });

// 正确写法：更新对象的属性
Object.assign(car, { brand: '宝马', price: 80 });

三、总结

（一）setup 函数

• 定义：setup 是 Vue 3 中的一个新配置项，其值是一个函数。

• 执行时机：比 beforeCreate 钩子更早执行。

• 返回值：返回一个对象，该对象中的属性和方法可以在模板中直接使用。

（二）响应式数据

• ref：创建一个响应式引用对象，通过 .value 访问和修改其值。

• reactive：创建一个响应式对象，对象中的所有属性都是响应式的。

（三）示例代码

• 使用 ref：适用于单个数据。

• 使用 reactive：适用于对象或数组。

通过上述内容，你可以更好地理解和使用 Vue 3 中的 setup 函数和响应式数据。在实际开发中，根据需要选择合适的响应式数据创建方式，可以使代码更加简洁和高效。如果是属性比较深或者做表单相关的，推荐使用reactive

ref 和 reactive 的区别

• ref：用于基本类型和对象类型，访问时需要 .value。

• reactive：用于对象类型，访问时无需 .value，支持深层次响应式。

（二）使用场景

• 基本类型数据：使用 ref。

• 对象类型数据（层级较深）：使用 reactive。

• 对象类型数据（层级较浅）：ref 和 reactive 均可，具体取决于个人偏好。

• 表单数据：推荐使用 reactive。

（三）局限性

• reactive 的局限性：不能直接替换整个对象，否则会失去响应式。

• 解决方案：使用 Object.assign 或展开运算符更新对象的属性。