- 理解：Vue3.0中一个新的配置项，值为一个函数。
- setup是所有Composition API（组合API）“ 表演的舞台 ”。
- 组件中所用到的：数据、方法等等，均要配置在setup中。
- setup函数的两种返回值：
- 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
- 若返回一个渲染函数：则可以自定义渲染内容。（了解）
- 注意点：
- 尽量不要与Vue2.x配置混用
- Vue2.x配置（data、methos、computed…）中可以访问到setup中的属性、方法。
- 但在setup中不能访问到Vue2.x配置（data、methos、computed…）。
- 如果有重名, setup优先。
- setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）
- 尽量不要与Vue2.x配置混用
setup() 钩子是在组件中使用组合式 API 的入口，通常只在以下情况下使用：
- 需要在非单文件组件中使用组合式 API 时。
- 需要在基于选项式 API 的组件中集成基于组合式 API 的代码时。
其他情况下，都应优先使用 script setup 语法。
一个人的信息
姓名：{{name}}
年龄：{{age}}
性别：{{sex}}
a的值是：{{a}}
4.reactive函数
- 作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
- 语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
- reactive定义的响应式数据是“深层次的”。若要避免深层响应式转换，只想保留对这个对象顶层次访问的响应性，请使用 shallowReactive() 作替代。
- 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。
name:{{ name }}
{{ person.name }}
{{ hobby[0] }}
let person = reactive({
name: 'dselegent',
age: 21,
});
console.log(person);
通过reactive创建的其实就是ref创建的value属性内容
5.ref函数 5.1 基本使用注意：比如reactive中的数据是个对象，我们正常情况只能把整个对象导出去，如果只是想用某个属性，直接导出去的话不是响应式的，后面可以用toRef或者toRefs解决这种需求。
reactive() 的种种限制归根结底是因为 JavaScript 没有可以作用于所有值类型的 “引用” 机制。为此，Vue 提供了一个 ref() 方法来允许我们创建可以使用任何值类型的响应式 ref
-
作用: 定义一个响应式的数据
-
语法: const xxx = ref(initValue)
- 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
- JS中操作数据： xxx.value
- 模板中作为顶层属性被访问: 它们会被自动“解包”，所以不需要使用 .value，直接：{{xxx}}
-
备注：
- 接收的数据可以是：基本类型、也可以是对象类型。
- 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
- 对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。
import { ref } from 'vue'
const count = ref(0)
ref() 将传入参数的值包装为一个带 .value 属性的 ref 对象：
const count = ref(0)
console.log(count) // { value: 0 }
console.log(count.value) // 0
count.value++
console.log(count.value) // 1
TypeScript 用户请参阅：为 ref 标注类型
和响应式对象的属性类似，ref 的 .value 属性也是响应式的。
如果将一个对象赋值给 ref，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref，它们将被深层地解包。
若要避免这种深层次的转换，请使用 shallowRef() 来替代。
初体验
name:{{ name }}
{{ person.name }}
ref输出
let name = ref('ds');
console.log(name);
let person = ref({
name: 'dselegent',
age: 21,
});
console.log(person);
5.2 ref的响应式
一个包含对象类型值的 ref 可以响应式地替换整个对象：
const objectRef = ref({ count: 0 })
// 这是响应式的替换
objectRef.value = { count: 1 }
ref 被传递给函数或是从一般对象上被解构时，不会丢失响应性：
const obj = {
foo: ref(1),
bar: ref(2)
}
// 该函数接收一个 ref
// 需要通过 .value 取值
// 但它会保持响应性
callSomeFunction(obj.foo)
// 仍然是响应式的
const { foo, bar } = obj
简言之，ref() 让我们能创造一种对任意值的 “引用”，并能够在不丢失响应性的前提下传递这些引用。这个功能很重要，因为它经常用于将逻辑提取到 组合函数 中。
5.3ref 在模板中的解包#当 ref 在模板中作为顶层属性被访问时，它们会被自动“解包”，所以不需要使用 .value。下面是之前的计数器例子，用 ref() 代替：
在演练场中尝试一下
请注意，仅当 ref 是模板渲染上下文的顶层属性时才适用自动“解包”。 例如， foo 是顶层属性，但 object.foo 不是。
所以我们给出以下 object：
const object = { foo: ref(1) }
下面的表达式将不会像预期的那样工作：
{{ object.foo + 1 }}
渲染的结果会是一个 [object Object]，因为 object.foo 是一个 ref 对象。我们可以通过将 foo 改成顶层属性来解决这个问题：
const { foo } = object
{{ foo + 1 }}
现在渲染结果将是 2。
需要注意的是，如果一个 ref 是文本插值（即一个 {{ }} 符号）计算的最终值，它也将被解包。因此下面的渲染结果将为 1：
{{ object.foo }}
这只是文本插值的一个方便功能，相当于 {{ object.foo.value }}。
5.4 ref的解包 5.4.1 ref 在响应式对象中的解包当一个 ref 被嵌套在一个响应式对象中，作为属性被访问或更改时，它会自动解包，因此会表现得和一般的属性一样：
const count = ref(0)
const state = reactive({
count
})
console.log(state.count) // 0
state.count = 1
console.log(count.value) // 1
如果将一个新的 ref 赋值给一个关联了已有 ref 的属性，那么它会替换掉旧的 ref：
const otherCount = ref(2) state.count = otherCount console.log(state.count) // 2 // 原始 ref 现在已经和 state.count 失去联系 console.log(count.value) // 1
只有当嵌套在一个深层响应式对象内时，才会发生 ref 解包。当其作为浅层响应式对象的属性被访问时不会解包。
5.4.2 数组和集合类型的 ref 解包#跟响应式对象不同，当 ref 作为响应式数组或像 Map 这种原生集合类型的元素被访问时，不会进行解包。
const books = reactive([ref('Vue 3 Guide')])
// 这里需要 .value
console.log(books[0].value)
const map = reactive(new Map([['count', ref(0)]]))
// 这里需要 .value
console.log(map.get('count').value)
5.5 响应性语法糖 (实验性功能)
响应性语法糖目前是一个实验性功能，默认是禁用的，需要显式选择使用。
相对于普通的 JavaScript 变量，我们不得不用相对繁琐的 .value 来获取 ref 的值。这是一个受限于 JavaScript 语言限制的缺点。然而，通过编译时转换，我们可以让编译器帮我们省去使用 .value 的麻烦。Vue 提供了一种编译时转换，使得我们可以像这样书写之前的“计数器”示例：
你可以在 响应性语法糖 章节中了解更多细节。请注意它仍处于实验性阶段，在最终提案落地前仍可能发生改动。
