Vue3（2）常用Composition API（组合式api）

官网：https://v3.cn.vuejs.org/guide/composition-api-introduction.html

1.setup函数

1.理解：Vue3中一个新的配置项，值为一个函数。
2.setup是所有Composition API（组合式api）的承载。
3.组件中所用到的：数据、方法等，均要配置在setup中。
4.setup函数的两种返回值：

• 1.若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用。
• 2.若返回一个渲染函数：则可以自定义渲染内容。

5.注意点：

• 1.尽量不要与vue2配置混用
  – vue2配置（data、methods、components…）中可以访问到setup中的属性、方法。
  – 但在setup中不能访问到vue2配置（data、methods、components…）。
  – 如果有重名，setup中的优先。
• 2.setup不能是一个async函数，因为返回值不再试return的对象，而是promise，模板看不到return对象中的属性。

2.ref函数

• 作用：定义一个响应式的数据。
• 语法：const xxx = ref(initValue)
  – 创建一个包含响应式数据的引用对象（reference对象）。
  – JS中操作数据：xxx.value。
  – 模板中读取数据：不需要.value，直接：<div>{{xxx}}</div>。
• 备注：
  – 接收的数据可以是：基本类型、也可以是对象类型。
  – 基本数据的数据：响应式依然是靠Object.defineProperty()的get和set完成的。
  – 对象类型的数据：内部“求助”了vue3.0中的一个函数——reactive函数。

3.reactive函数

• 作用：定义一个对象类型的响应式数据（基本类型别用它，用ref函数）。
• 语法：