vue3初始

setup

理解：vue3中的一个新的配置项，值为一个函数，setup是所有composition API即组合API“表演的舞台”，组件中所用到的：数据，方法等等，均要配置在setup中，

它有两种返回值：1、若返回一个对象，则对象中的属性和方法没在模板中均可以使用

2、若返回一个渲染函数：则可以自定义渲染内容

注意：setup不能是async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性。后期也可以一个promise实例，但需要suspense和异步组件的配合

ref函数

作用：定义响应式的数据

语法：const xxx=ref(initvalue)

创建一个包含响应式数据的引用对象(reference对象，简称ref对象)

js中操作数据：xxx.value

模板中读取数据;不需要.value,直接<div>{{xxx}}</div>

备注：

接收的数据可以使：基本类型，也可以是对象类型

基本类型的数据：响应式依然是靠object.defineproperty()的get与set完成的

对象类型的数据：内部使用了vue3de一个新函数reactive函数

reactive函数

- 作用: 定义一个<strong style="color:#DD5145">对象类型</strong>的响应式数据（基本类型不要用它，要用```ref```函数）
- 语法：```const 代理对象= reactive(源对象)```接收一个对象（或数组），返回一个<strong style="color:#DD5145">代理对象（Proxy的实例对象，简称proxy对象）</strong>
- reactive定义的响应式数据是“深层次的”。
- 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。