基本类型：ref适用于基本数据类型，可以通过.value进行读写。reactive不能直接用于基本数据类型。引用类型：reactive直接作用于对象或数组，使其成为响应式。对于复杂的数据结构，reactive比ref更加适用。模板中的使用：无论是ref还是reactive创建的响应式数据，都可以直接在模板中使用，Vue 会自动处理。

深度响应式和浅响应式

默认情况下，reactive会递归地把一个对象内部的所有属性都转换为响应式数据。浅响应式：如果你不希望对象内部的所有属性都是响应式的，可以使用shallowReactive函数，它只会使最外层的属性成为响应式，而不会影响嵌套对象。

import { shallowReactive } from 'vue';

const state = shallowReactive({

innerObject: { count: 0 }

});

// `state`是响应式的，但`state.innerObject`不是响应式的。

reactive和ref是Vue 3中组合式API的两大支柱，理解它们之间的差异以及如何选择使用它们，对于高效开发Vue 3应用至关重要。

接下来，我们将讨论toRefs函数，它允许我们从reactive对象中提取出多个响应式引用，以保持结构分解赋值的响应性。

七、toRefs函数

在Vue 3的组合式API中，toRefs函数用于将reactive对象转换为一个普通对象，其中每个属性都是一个ref，这对于保持响应式状态在结构分解赋值（destructuring）时特别有用。

为什么需要toRefs

当你从reactive对象中结构出属性时，这些属性会失去响应性。这是因为结构赋值是基于值的拷贝，所以拷贝出来的值不会和原始的reactive对象保持响应连接。toRefs可以解决这个问题，它允许你在结构分解时保持属性的响应性。

示例代码：

假设我们有一个reactive对象：

import { reactive, toRefs } from 'vue';

export default {

setup() {

const state = reactive({

count: 0,

message: "Hello Vue 3"

});

// 尝试直接结构，会导致失去响应性

// let { count, message } = state;

// 使用toRefs来保持响应性

let { count, message } = toRefs(state);

return { count, message };

}

}

如何使用toRefs

toRefs接收一个响应式对象，并返回一个新的对象。返回的对象中的每个属性都是一个指向原始对象相应属性的ref。

<template>

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

<div>{ { message }}</div>

</template>

在模板中，你可以直接使用count和message，就像它们是使用ref创建的响应式引用一样。这保证了即使在结构分解后，你依然可以保持组件的响应性。

toRefs与ref

toRefs适用于将reactive对象转换成一个包含多个ref属性的普通对象，每个ref都是响应式的。ref用于创建单个响应式数据。

使用toRefs可以非常方便地在保持响应性的同时，使用JavaScript的结构分解功能，这对于在多个地方使用或传递reactive对象的部分属性时非常有用。

到目前为止，我们已经讨论了Vue 3的组合式API中的基本响应式API——ref、reactive和toRefs。这些工具为开发复杂组件提供了灵活性和强大的状态管理能力。

接下来，我们将进一步探讨Vue 3中的计算属性（computed）和侦听器（watch）。这些功能使得我们可以更细致地控制响应式状态的变化和更新。

八、Computed计算属性

在Vue 3中，计算属性(computed)是一种基于响应式依赖进行缓存的计算值。当计算属性依赖的响应式状态发生变化时，计算属性会重新计算。这非常适合用于执行开销较大的计算操作或派生状态。

1. 基本用法

使用computed函数可以创建一个计算属性。computed接收一个函数作为参数，这个函数的返回值就是计算属性的值。当依赖的响应式状态改变时，这个函数会被重新执行。

示例代码：

<template>

<div>{ { fullName }}</div>

</template>

<script>

import { reactive, computed } from 'vue';

export default {

setup() {

const person = reactive({

firstName: 'John',

lastName: 'Doe'

});

const fullName = computed(() => {

return `${person.firstName} ${person.lastName}`;

});

return { fullName };

}

}

</script>

在这个例子中，fullName是一个计算属性，它依赖于reactive对象person的firstName和lastName。当person的属性改变时，fullName会自动更新。

2. 高级用法

computed也支持一个带有get和set函数的对象，允许你创建可写的计算属性。这在需要执行额外逻辑来处理更新操作时非常有用。

示例代码：

<template>

<div>{ { fullName }}</div>

<button @click="changeName">Change Name</button>code>

</template>

<script>

import { reactive, computed } from 'vue';

export default {

setup() {

const person = reactive({

firstName: 'John',

lastName: 'Doe'

});

const fullName = computed({

get() {

return `${person.firstName} ${person.lastName}`;

},

set(newValue) {

const names = newValue.split(' ');

person.firstName = names[0];

person.lastName = names[1] || '';

}

});

function changeName() {

fullName.value = 'Jane Doe';

}

return { fullName, changeName };

}

}

</script>

在这个高级用法中，我们定义了一个可写的计算属性fullName。当尝试设置fullName.value时，设置函数(setter)会被调用，允许我们将一个新值分解并赋值给person.firstName和person.lastName。

计算属性是Vue响应系统的重要部分，它使得管理复杂逻辑和依赖变得简单高效。

接下来，我们将探讨Vue 3中的侦听器(watch和watchEffect)，它们提供了一种方法来响应数据的变化。

九、Watch监听