Vue3重点 setup函数 ref函数 reactive函数

setup函数

setup函数是Vue3中的一个新的配置项，组件中所要用到的数据、方法等等，都需要配置在setup中。
setup函数有两种返回值：
1.若返回一个对象，则对象中的属性、方法都可以直接在模板中使用。
2.若返回一个渲染函数，则可以自定义渲染内容。(了解即可)
注意点：
1.尽量不要与vue2的配置混用，（在vue2配置中可以访问到setup中的属性、方法，但是在setup中不能访问到vue2配置，如果有重名，setup优先）
2.setup不能是一个async函数，因为返回值不再是一个对象，而是Promise，模板中就看不到return的对象中的属性。

ref函数

作用：定义一个响应式数据。
语法： 举例如下

const x=ref(3)

在js中操作数据时，比如把x的值改为4，需要这样写：x.value=4，在模板中使用数据时，则不需要.value，直接使用即可，
如：<span>{{x}}</span>
ref函数可以接收基本数据类型、对象类型。

reactive函数

作用：定义一个对象类型的响应式数据。（不能定义基本类型）
语法：举例如下

 const p=reactive({
 x:1,
 y:2
 })

reactive函数接收一个对象或数组，返回值为一个代理器对象（proxy对象）。
无论在多深的层次的数据，都是响应式的。